자바스크립트 for each 문 , for in 문 , for of문

● foreach 문

▼ 내용

foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터는 Map,Set 지원)

배열의 요소들을 반복하여 작업을 수행할수 있습니다.

foreach구문의 인자로 callback함수를 등록할수 있고, 배열의 각 요소들이 반복될 떄 이 callback 함수가 호출됩니다. callback 함수에서 배열요소의 인덱스와 값에 접근할수 있습니다.

배열의 첫번쨰부터 마지막까지 반복하면서 item을 꺼낼수 있다.

var arr = ['가','나','다','라'];

arr.forEach(function(item,index,arr2){
    console.log(item,index,arr2[index+1]);
})
//첫번쨰 인수는 배열의 각각의 item
//두번쨰 인수는 배열의 index
//세번째 인수는 배열 그자체

 

 

● for ...in 반복문

▼ 내용

객체에 사용 할수 있습니다.

객체의 key값과 value 값을 뽑아내는데 유용합니다.

객체의 키값의 갯수만큼 반복하여 첫번쨰키값부터 마지막 키값까지 반복합니다.

var obj = {
    a: '가', 
    b: '나', 
    c: '다'
};

for (var key in obj) {
    console.log(key, obj[key]); // a 가, b 나, c 다
}

 

 

● 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 반복문 : 객체의 모든 열거 가능한 속성(property)에 대한 반복

for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용

Object.prototype.objCustom = function () {};// Object 프로퍼티에 객체 생성
Array.prototype.arrCustom = function () {}; // array 프로퍼티에 객체 생성

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

for (var key in iterable) {
  console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}
//기본 js 내장함수에 프로퍼티를 추가해서 프로퍼티까지 다뽑힌다

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

 

참조

https://dydals5678.tistory.com/66