for in, for of, forEach()

for...in

 for in 반복문은 객체의 모든 열거가능한 속성들을 포함하여, 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다. for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않는다. 객체의 반복을 위해 만들어졌기 때문에 배열의 반복을 위해선 추천되지 않는다.

for(variable in object){
  statement;
}

• variable : 매번 반복마다 다른 속성이름(Value name)이 변수로 지정된다.
• object : 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.

예시

let obj = {					//[Key],[Value]가 대입된 변수
    a: 1, 
    b: 2, 
    c: 3
}

for(let list in obj){			//for...in 반복문
	console.log(list); 
	console.log(`${list}: ${obj[list]}`);
}		

//a
//b
//c

// "a: 1"
// "b: 2"
// "c: 3"

for...of

for of 반복문은 반복가능한 객체(Array, map, set, string, typedArray, arguments 객체 등을 포함 === [symbol.iterator]속성이 있는 모든 컬렉션)에 대해서 반복한다.

for(variable of iterable){
  statement;
}

• variable : 각 반복에 서로 다른 속성값이 변수에 할당된다.
• iterable : 반복되는 열거가능(enumerable)한 속성이 있는 객체

예시

Array에 대해 반복

let arr = [1, 2, 3]

for(let element of arr) { 
	console.log(element);
    }
 //1, 2, 3

String에 대해 반복

let arr = 'kimchi';

for(let element of arr) { 
	console.log(element);
    }
 //"k"
 //"i"
 //"m"
 //"c"
 //"h"
 //"i"

 

for of와 for in의 차이

• for...in : 객체의 모든 열거가능한 속성에 대해 반복한다.
• for...of : 모든 객체보다는, [symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 반복한다.

객체일 경우

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

for(let list in obj){
	console.log(`${list}: ${obj[list]}`);
}

// a: 1
// b: 2
// c: 3


for(let list2 of obj){
	console.log(list2);
}

//Uncaught TypeError: obj is not iterable
//at <anonymous>:1:18

배열일 경우

const arr = [1,'kim', 7, 'As', 4];

for(let list in arr){
	console.log(`${list}: ${arr[list]}`);
}

// 0: 1
// 1: kim
// 2: 7
// 3: As
// 4: 4


for(let list2 of arr){
	console.log(list2);
}

//1
//kim
//7
//As
//4