forEach | for in | for of

jh_leitmotif·2021년 6월 10일

🧐 어떤 반복문을 써야할까?

'반복문' 하면 머릿속에 바로 떠오르는 것이 있다.

for (int i=0; i<n; i++){
~}

do{~}while(~)
while(~){}

그렇듯 아직 자바스크립트에서 사용하는 루프문에 대해 크게 익숙하지 않다.

C, Java, Python 등이 익숙한 나는 js의 방식을 한 번 정리해야겠다고 마음 먹었다.

✔ forEach

forEach는 반복문이 아닌 함수.

const arr=[1,2,3,4,5];
arr.forEach(item=>{
	console.log(item);
});
//1 2 3 4 5 순서로 출력.

Array object에 적용된다.

✔ for in

for in은 객체가 상속받는 prototype chain 상의 모든 property key를 나열한다.

즉, 키와 값의 쌍 뿐만 아니라 함수가 있다면 또한 확인하여 출력한다.

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

for (const key in obj){
	console.log(key, obj[key]);
}
// key에 접근하므로 a,b,c 순서로 출력.

JS를 공부하면서 자료형이 비교적 자유롭다고 느꼈는데, 예를 들면 함수를 변수에 저장해둔다거나 위처럼 키와 값의 쌍으로 저장하는 사례였다.

당연한 이야기지만 실제 프로그램을 설계할 때 각각의 변수명, 키값, 함수명을 더 조심하며 작성해야겠다는 생각이 들었다.

✔ for of

iterable한 Object에 대한 반복문.
Symbol.iterator 속성을 가지는 컬렉션에 대해서'만' 반복한다.

const arr = [1,2,3,4,5]
for (const val of arr){
	console.log(val);
}
/// a, b, c 순서로 하나씩 출력된다.

const obj={
	a:0,
	b:1,
	c:2,
};
for (const val of obj){
	console.log(val);
}
// obj는 한 번에 하나씩 member를 반환하는 객체는 아니다. 
// 따라서 타입 에러가 발생할 것.