[JS] for ...in, for ...of의 차이점 정리

안녕하세요. 오늘은 유튜브 코드팩토리님의 자바스크립트 강의 영상을 일부 참고하여 for ..in, for ...of의 차이점에 대해 작성하도록 하겠습니다.

 

 

 

자바스크립트에서는 배열이나 객체의 반복을 위해 사용하는 두 가지 반복문 for ...in, for ...of이 있습니다.

for ...in

• 객체의 속성을 반복할 때 사용
• 객체의 모든 열거 가능한 속성 키를 순회하며 배열에서도 사용할 수 있지만 인덱스 값을 반환함

예시1) 객체에서 사용

const yuJin = {
    name : '안유진',
    year : 2003,
    group : '아이브'
};

for (let key in yuJin) {
    console.log(key); // name, year, group (객체의 키)
};

여기서는 객체 yuJin의 속성 키인 name, year, group을 순회하며 출력

 

 

예시2) 배열에서 사용

const iveMembersArray = ['안유진', '가을', '레이', '장원영', '리즈', '이서'];

for (let key in iveMembersArray) {
    console.log(key); // 0, 1, 2, 3, 4, 5 (배열의 인덱스)
}

for ...in을 배열에서 사용하면 인덱스 값을 반환하며 배열 요소에 접근하려면 해당 인덱스를 이용해 접근해야 함

즉, for ...in은 배열의 값이 아닌 인덱스를 순회함

 

 

 

for ...of

• 배열과 같은 순회 가능한 객체(iterable object)에서 값을 순회할 때 사용됨
• 일반 객체(object)에서는 사용할 수 없고, 배열이나 문자열 같은 iterable한 데이터에서 값을 하나씩 가져옴

※ iterable - 반복할 수 있는 객체

예시 1) 배열에서 사용

const iveMembersArray = ['안유진', '가을', '레이', '장원영', '리즈', '이서'];

for (let value of iveMembersArray) {
    console.log(value); // 안유진, 가을, 레이, 장원영, 리즈, 이서 (배열의 값)
}

for ...of를 사용하면 배열의 값을 직접 순회할 수 있음. 배열의 인덱스를 신경쓰지 않고 값 자체에만 집중할 수 있어서 직관적임!

 

 

예시 2) 문자열에서 사용

const string = 'hello';
for (let char of string) {
    console.log(char); // h, e, l, l, o
}

 

 

 

for ...in과 for ...of 차이 정리

• for ...in : 객체와 배열에서 사용되며 키 또는 인덱스를 순회함
• for ...of : 배열, 문자열과 같은 순회 가능한 객체에서 사용되며 값을 순회함