오늘은 자바스크립트에 관한 문제를 풀면서 어려움을 느꼈던 for..in에 대해 다뤄 보려고 한다.

For..in은 무엇인가?

for in은 일반적으로, 배열, 혹은 object에 대해 사용 할 수 있는 메서드이다.
하지만 사용을 할 수 있다뿐이지, 배열에 for in을 사용하는것은 추천 되지 않는다.
이유는 object에 대해 적용할때를 다룬 다음, 작성 하도록 하겠다.

for in은 어떨때 사용하는가?

for in은 MDN에서 검색해보면, 다음과 같이 설명한다.

for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)

symbol은 오직 하나만 있는 데이터 타입을 의미하므로, 무시 된다.

여기서 우리는 for in이 object에서 무언가를 반복시킨다는것을 알 수 있다.

for(variable in object) {
  //반복시켜 사용할 구문
}

과 같이 사용 할 수 있다.

여기서 눈여겨 봐야 할것은 variable(변수)인데, 일반적인 for문등에서 사용 되는 변수와는 다르게, object의 key를 의미한다.

반복을 시키되, 변수가 증가하는것이 아니라, key 하나에 대해 반복을 끝마치면, 다음 key로 넘어가서 반복하는 방식이다.

for in은 어떻게 사용하는가?

예를 하나 들어보자.
다음과 같은 object가 있다.

const obj = {
  apple : 10,
  banana : 15,
  cherry : 20
}

위의 object에 for in을 사용해보도록 하자.

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

// "apple : 10"
// "banana : 15"
// "cherry : 20"  출력

for in을 사용하자, 해당 object의 key와 value가 순차적으로 출력 되었다.
즉, 변수는 object의 key를 의미하고, obj[fruit]는 그 key에 대한 value를 의미하는것이다.

물론 단순히 여기서 끝난다면 어렵게 생각하지 않았을것이다.

for in의 다른 사용법은, object를 복사하여, 다른 object를 만드는 것이다.

다음 예제 코드를 보자.

const basket = {}

위의 바구니는 텅 비어 있는 상태이다.
여기서, 위의 obj를 이용해서 과일을 하나씩 넣을건데,

for(fruit in obj) {
  basket[fruit] = obj[fruit];
}
console.log(basket);

다음과 같이 작성하고, 콘솔창으로 바구니를 확인해보자.

{ apple : 10, banana : 15, cherry : 20 }

텅 비어있던 바구니 object에 과일이 복제가 되었다.

여기서 눈여겨 봐야 할곳은 바로 basket[fruit] = obj[fruit]; 이 부분인데,
basket[fruit]의 fruit와 obj[fruit]의 fruit가 의미하는 바가 약간 다르다.

basket[fruit]의 fruit는 새로운 object, basket에 추가할 새로운 key를 의미하는것이며, obj[fruit]는 해당 key의 value로서 추가 할 값을 의미하는것이다.
첫번째 basket[fruit]는 apple이고, obj[fruit]는 10이 할당되어 basket에 추가 되었고, 다음 루프에서는 banana와 value 15가 추가 되었다.

이렇게 for in으로 새로운 object를 만들 수 있는것이다.

또다른 활용법

for in의 또 다른 활용법은, 새로운 object를 이용해서 value를 바꿀 수 있다.

이 부분이 가장 이해가 어려웠던 부분이기도 하다.

다시 한번 과일 바구니를 보자.

const basket = {};
const newSomthing = {
  10 : "Bad",
  15 : "Nice!",
  20 : "Good!!"
};

새로운 object를 추가하고, 내용을 바꿔보도록 하겠다.

for(fruit in obj) {
  basket[fruit] = newSomthing[obj[fruit]];
}
console.log(basket);
//{ apple : "Bad", banana : "Nice!", cherry : "Good!!" }

원래 있던 값이 사라지고, 새로운 object의 value가 나타났다.

이는 당시에는 이해가 되지 않았으나,

위에서 본 새로운 배열에 복제 하는것의 응용이라 볼 수 있다.

basket[fruit]에서 새롭게 추가할 object의 key에 할당할 value를 정하는데, 정하는 값은 newSomthing이라는 object에 obj[fruit]를 key로 하는 value를 뜻한다.

obj[fruit]의 value는 각각 10, 15, 20이고, 이는 그대로 newSomthing의 key에 해당하기 때문에, 새롭게 추가 되는 object의 값을 변경 시키는것처럼 보이는것이다.

번외 : 왜 for in은 배열에서 사용 하면 안될까?

for in은 서두에, 배열에 사용은 가능하지만, 권장 되지 않는다 하였다.
그 이유는 바로 for in이 특정 index에 맞춰서 반복 하는것을 장담 할 수 없기 때문이다.

배열처럼 순서를 의식하는 데이터 타입에서는 아무래도 사용하기 꺼려지는 특성이다.

배열에 반복이 필요할땐, for in을 사용하기 보다, for of, 혹은 forEach를 사용하여 반복 시키도록 하자.