ES6알아보기 03 - loops

ES6알아보기 03 - loops

2018, May 23    

이번에는 새로운 반복 선언에 대해서 알아보도록 하겠습니다.

기존 for loop 에서 사용되던 방법은 아래와 같습니다.

let arr = ['a', 'b', 'c', 'd', 'e']

for (let i = 0 ; i < 5 ; i++) {
  console.log(arr[i])
}

ES6에서의 새로운 for loop 두가지

for…in

첫번째로 추가된 방법은 for...in 입니다. 사용방법은 아래와 같습니다.

let arr = ['a', 'b', 'c', 'd', 'e']

for (let i in arr) {
  console.log(i, arr[i])
}
// outputs:
// 0 a
// 1 b
// 2 c
// 3 d
// 4 e

여기서 주의할 점은 변수 i 에는 배열의 인덱스 가 들어간다는 점 입니다. 이 새로운 loop는 object 변수에도 적용할 수 있습니다.

let obj = {a: 'hello', b: 'world', c: 'good to see you!'}

for (let key in obj) {
  console.log(key, obj[key])
  // outputs:
  // a hello
  // b world
  // c good to see you!
}

배열 때와 마찬가지로 key 변수에는 반복가능한 객체의 키값이 들어가게 됩니다.

for…of

for...of 는 인덱스나 키값이 아닌 value 값이 오게 됩니다.

let arr = ["hello", "world", "good to see you!"]

for (let val of arr) {
  console.log(val)
  // outputs:
  // hello
  // world
  // good to see you!
}

앞에서 살펴본 for...in 과 for...of 는 Array, Map, Set 타입의 기본함수인 forEach(), map(), reduce() 에서도 동일한 값을 출력하도록 구현할 수 있습니다. 한가지 큰 차이점 이라고 한다면 이런 함수들 에서는 array like object를 구현할 수 없기 때문에 형 변환이 필요하게 됩니다. 어떤 방식을 쓰던지 상관없이 상황에 맞게 가장 가독성을 올려주는 방법으로 사용하는게 좋지 않을까 생각합니다.

Twitter Facebook Google+
# javascript