본문 바로가기

Language/JavaScript(ES6)

[ES6]for문(for of문 다시보기)

for문 종류가 너무 많다.

책을 읽다가 정리해야 겠다고 생각해서 작성


foreach 반복문

foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다.(ES6부터는 Map, Set 등에서도 지원됩니다) 배열의 요소들을 반복하여 작업을 수행할 수 있습니다. foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.

var items = ['item1', 'item2', 'item3'];

items.forEach(function(item) {
    console.log(item);
});
// 출력 결과: item, item2, item3

foreach는 함수를 받아서 닥치는대로 반복.


음....? 맵이랑 같은거 아닌가?



응 다르다고 한다.


for …in 반복문

for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다. 모든 객체에서 사용이 가능합니다. for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않습니다. 자바스크립트에서 객체 속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있습니다. 그 중 하나가 [[Enumerable]]이며, for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있습니다. 이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않습니다.

var obj = {
    a: 1, 
    b: 2, 
    c: 3
};

for (var prop in obj) {
    console.log(prop, obj[prop]); // a 1, b 2, c 3
}

오호 for in 문은 객체를 나열할 때 사용 된단다.

특히 이런 키 값과 밸류값을 열거할 때 쓰이나 보다.


다만

 for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않습니다. 


이 말은 무슨 뜻일까.

아마 값을 수정하는 것이 불가능 하다는 뜻이 아닌가 싶다.


for …of 반복문

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

... 이터레이터랑 관련 된건가 보다.

하... 이터레이터 포스팅 할 때 다시 보자.


for in 반복문과 for of 반복문의 차이점

  • for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
  • for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

var iterable = [3, 5, 7];
iterable.foo = "hello";

for (var key in iterable) {
  console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (var value of iterable) {
  console.log(value); // 3, 5, 7
}

이 부분.. 엄청 어렵다.


JavaScript에서 거의 모든 객체는 Object의 인스턴스입니다. 일반적인 객체는 Object.prototype 에서 속성과 메서드를 상속받으며, 그 중 일부는 (오버라이드 등으로 인해) 숨겨질 수 있습니다


라고 하는데

iterable의 모든 객체의 속성이 출력 될 때,

Object.prototype.objCustom = function () {}; Array.prototype.arrCustom = function () {};

객체와 배열 타입의 키 값도 모두 출력된다.


iterable에 추가하는 것이 전혀 없었는데도...


나중에 다시보자...

'Language > JavaScript(ES6)' 카테고리의 다른 글

[ES6]Map과Set  (0) 2019.01.03
[ES6]객체와 객체지향프로그래밍  (0) 2019.01.03
[ES6]Array Method  (0) 2019.01.01
[Javascript]Map(iterator)  (0) 2018.12.30
[Javascript] Modern Javascript Tooling  (0) 2018.12.29