ES6(ECMAScript 6) For문 설명
개발자에게 있어서 반복문을 활용하는 것은 정말 중요하다고 생각합니다. 잘못된 코딩 습관, 의미없는 요소 순회 및 객체 생성 등은 실행 환경에서 성능에도 지장을 주기 때문인데요.
본 포스팅에서는 ES6에서 추가된 For-of 문법과 기존의 For-in 문법의 예제 소스를 작성해 보면서 차이점을 간단하게 비교해 보도록 하겠습니다.
For-in, For-of 비교 예제
For-of : 반복가능한 객체(Array, Map, Set, String, TypeArray, arguments 객체 등)을 반복하는 기능 수행
즉, 객체의 요소들(Data)를 순회하기 위한 구문
For-in : 객체의 속성 또는 배열의 요소에 대해 반복하는 기능 수행
즉, 객체의 속성들을 순회하기 위한 구문
간단하게 예를 들어 볼까요?
let list = [4, 5, 6];
for (let i in list) {
console.log(i); // 결과 : "0", "1", "2",
}
for (let i of list) {
console.log(i); // 결과 : "4", "5", "6"
}위에 예제에서 For-in 구문은 배열의 인덱스를 순회하며 출력하고 있습니다. 개발자 포럼에서 자주 언급 되는 문서들을 살펴보면 몇 가지 단점이 있습니다.
인덱스가 문자로 반환
루프 구문이 요소들만 순회하는 것이 아니라 프로토타입 체인(Chain)도 순회
루프 순회 순서가 무작위
반면에 For-of 구문은 아래와 같은 장점이 있습니다.
배열 순회를 지원하는 문법 중에서 가장 간결하고 직접적으로 접근 가능
for-in 구문의 단점을 보완
forEach 문에서 지원하지 않는 break, continue, return 구문 사용 가능
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>For-in,of Examples</title> </head> <body> <script> //For in 예제1 const numbers_g1 = [1,2,3,4,5]; for(let number in numbers_g1) { console.log(number); } //For of 예제1 const numbers_g2 = [1,2,3,4,5]; for(let number of numbers_g2) { console.log(number); } //For in 예제2(Conllection) const CarObj1 = { color: 'red', height: 1.7, witdh: 5 } for(let prop in CarObj1) { console.log(prop); } //For of 예제2(Conllection) const CarObj2 = { color: 'red', height: 1.7, witdh: 5, [Symbol.iterator]: function* (){ yield this.color; yield this.height; yield this.witdh; } } for(let prop of CarObj2) { console.log(prop); } </script> </body> </html> | cs |
예제 실행 화면
실제로 크롬(Chrome) 브라우저에서 테스트한 화면이며, 문제없이 잘 동작하고 있습니다.
소스 코드 다운로드 :
javascript_es6_for.zip
마무리
어떤 구문이 더욱 좋고 우월하다라는 것은 없는 것 같습니다. 각 기능 수행에 맞는 적절한 문법을 정확하게 사용함으로써 성능을 고려한 어플리케이션 개발에 더욱 열심히 전념해 봅니다.
아울러, 항상 반복적으로 같은 코딩을 하고 있는 상황에서 좀 더 유연하게 새로운 기술들을 접목시킬 수 있는 안목을 기를수 있도록 더욱 노력하자는 마음을 다짐하면서 본 포스팅을 마칩니다.
참고문헌
ES5 for-in 레퍼런스(Reference) : 이동
ES6 for-of 레퍼런스(Reference) : 이동
'웹 프론트 > Javascript & ECMA' 카테고리의 다른 글
| Javascript(자바스크립트) - 배열 처리 정리(4) - reduce (1) | 2017.11.21 |
|---|---|
| Javascript(자바스크립트) - 배열 처리 정리(3) - every, some (0) | 2017.11.20 |
| Javascript(자바스크립트) - 배열 처리 정리(2) - filter(필터) (0) | 2017.11.19 |
| Javascript(자바스크립트) - 배열 처리 정리(1) - map, forEach (0) | 2017.11.17 |
| Javascript(자바스크립트) - 싱글톤(Singleton) 패턴 설명 (0) | 2017.09.16 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}