[ JavaScript ] 헷갈리는 for...in과 for...of, in의 내부,속성만 기억하자

for...in과 for...of가 헷갈린다면 for...in의 in으로 구분해서 기억하자.

in은 '내부의' 라는 뜻으로 객체의 속성을 열거하는 데 사용한다고 기억하고

of는 '각각의'라는 뜻으로 기억하고 요소나 값을 순회한다고 생각하면 쉽다.

 

for...in

자바스크립트에서 객체의 속성을 반복하는데 사용되는 루프로

객체의 모든 열거 가능한 속성에 대해 반복하며 각 속성의 키를 변수에 할당한다.

 

for(const key in object){

}

여기서 key는 객체의 속성인 키를 나타내는 변수이고 object는 객체

 

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for(const key in person){
	console.log(key+":"+person[key]);
}
//  name:John  age:30  city:New York이 순서대로 출력된다.

 

 

for...of

자바스크립트에서 배열 또는 iterable 객체의 각 요소를 반복적으로 순회하기 위해 사용되는 반복문.

 

for(variable of iterable){ 

}

 

variable은 현재 반복요소에서 값을 할당받는 변수,

iiterable은 반복가능한 객체로 array, string, set, map, nodelist 가 될 수 있다.

for of 루프는 반복 가능한 객체의 각 요소에 대해 반복 실행되며

반복순서는 해당 객체의 순서에 따라 결정된다.

배열의 경우 인덱스 순서대로 반복이 수행된다.

 

const arr=[1,2,3,4,5];
for (const element of arr){
  console.log(element);
}
//1 2 3 4 5 순서대로 출력된다.