자바스크립트 ES6 For/Of Loop

 

자바스크립트 ES6의 For/Of에 대해 알아보겠습니다.

 

기본적으로 자바스크립트에서 for문, for/in문을 사용하였는데요.

ES6에서 새롭게 추가된 For/Of입니다.

 

ES6 For/Of

 

기본정의는 반복 가능한 객체를 반복하는 것의 For/Of의 목적입니다.

 

for (variable of iterable) {
  // code block to be executed
}

 

variable 즉 변수, const, let, var를 선언할 수 있습니다.

아래에 샘플 코드를 몇 가지를 작성해보겠습니다.

 

For/Of 예시1

let cars = ["BMW", "Volvo", "Mini"];
let text = "";
 
for (let x of cars) {
  text += x + "<br>";
}

For/Of의 1번 예시 결과

 

For/Of 예시2

let language = "JavaScript";
let text = "";
 
for (let x of language) {
  text += x + "<br>";
}

 

그렇다면, 기존의 For/In과 어떠한 차이가 있을까요?

For/In은 객체 순환, For/Of은 배열 순환의 특징을 가지고 있습니다.

 

샘플 코드로 예를 들어보겠습니다.

 

For/Of과 For/In의 차이 예시1

let cars = ["BMW", "Volvo", "Mini"];
let text = "";
 
for (let x in cars) {
  text += x + "<br>";
}

 

For/In 1번 예시 결과

 

For/Of의 동일한 예시에 For/Of를 For/In으로 변경 후 실행한 결과입니다.

결괏값을 배열의 번호를 가져와 출력하는 것을 볼 수가 있습니다.

(객체의 순환이기 때문에, 배열의 순서를 출력하게 되었습니다.)

 

간단한 게 ES6의 For/Of에 대해 알아보았습니다.

감사합니다.