[자바스크립트] for each / for in / for of반복문의 차이

#자바스크립트foreach #자바스크립트forof #자바스크립트forin

​

모르는거 복습한 글

​

foreach 반복문

foreach 반복문은 ​배열에 쓰이는 반복문이다. 인자로 콜백함수가 들어갈 수 있다.

=>사실 위 문장은 초보자에게 너무 어려운 말이다. 간단하게 풀어서 기억해두자. 배열을 여러군데 쓰고싶을 때 사용하는 도구라고 생각해보자.

​

콜백함수는 다른 함수의 인자로 사용되는 함수, 어떤 이벤트에 의해 호출되는 함수를 뜻한다.

=>이 말도 너무 어렵다 그냥 인자에 함수가 들어간 것으로 우선 해석하자.

​

코딩은 실전을 통해 이해하는게 더 빠르다. 아래 코드를 하나 하나 뜯어 보자. 내가 연습하고있는 음악패널 사이트 예제이다. 블로그에 있는 예제를 통해 공부해보면 좋다.

                                    const list = frame.querySelectorAll('article');
const names=["Blizzards", "Calm", "Dusty_Road", "Escape", "Payday", "Retreat", "Seasonal", "Vespers"];

 names.forEach((name, index)=>{
    const pic=list[index].querySelector('.pic');
    const h2=list[index].querySelector('.txt h2')
    list[index].style.transform = `rotate(${deg*index}deg) translateY(-100vh) `;
    pic.style.backgroundImage=`url(img/${names[index]}.jpg)`;
    h2.innerText=names[index];

 })

사전 지식이 필요하므로 간단하게 설명해주겠다. list는 간단하게 패널들의 모임이라고 생각하면된다. 총 8개의 패널이 존재한다.

​

list= 네모 박스 패널 / 8개가 있고, 각 요소는 한곳에 겹쳐져있음

​

여기서 names라는 배열을 만들었다. 만든 이유는 이미지 파일을 각 패널에 자동으로 넣기 위함이다. 이미지의 이름은 "Blizzaed.jpg", "Calm" ...등으로 되어있다. 이름을 배열로 만들어 한번에 파일을 넣을 것이다.

​

​

foreach문 분석

names.forEach : 배열이기 때문에 forEach 반복문을 사용하였다.

names.forEach(()=>{}) : 콜백함수가 인수로 들어갔다. 화살표 함수로 간단하게 나타내었다.

names.forEach((name, index)=>{}) : 화살표 함수는 함수의 축약문이다. 원래의 형태라면 function(name,index)=>{}로 표현 된다.

​

\[index\](배열의 순서)

list\[index\].style.transform=rotate(${deg\*index}deg) translateY(-100vh) : list =패널, \[index\] 각 패널의 모든 순번을 순회한다.

list\[0\]~list\[7\]

names 배열의 활용

위에보면 names= \["Blizzards", "Calm", "Dusty\_Road", "Escape", "Payday", "Retreat", "Seasonal", "Vespers"\] 문자열로 된 배열이다.

pic.style.backgroundImage=url(img/${names\[index\]}.jpg) 를 살펴보겠다. pic에 배경이미지를 삽입할 것이다. 여기서 pic은 패널안에 있는 작은 네모 박스라고 생각하면 된다. 즉 패널 안에 이미지를 삽입하는 삽입하기 위한 구문이다.

​

자바스크립트에 스타일 요소를 "배경이미지를"추가하는 .style.backgroundImage를 사용하였다.

​

url은 이미지 파일 경로를 의미한다. img폴더 안에는 Blizzards.jpg , Calm.jpg ... 등 배열과 똑같은 이름을가진 8개의 이미지가 준비되어있다.

여기서 names는 변수이므로 `(백틱)처리를 하여 **url(img/${names\[index\]}.jpg)`**을 삽입한다.

​

아래와 같이 모든패널에 이미지가 각각 들어간다.

for in 반복문

객체안을 순회하며 객체의 속성값을 뽑아낸다. 형태는 다음과 같다.

for(let key in woman) = for ( 원하는 변수지정 in 객체명)

                                    const woman = {
    name : "JANE",
    age : 27,  // age= 으로 선언하지 말 것
    job : "teacher", //반드시 ""를 붙여서 표현하기
}

for(let key in woman){
   console.log(key, woman[key]);
}

key값을 뽑아내고 value를 뽑고 싶으면, woman\[key\]를 입력하면된다.

​

각 속성 key값과 value값이 차례대로 콘솔에 찍히는 것을 볼 수 있다.

for of 반복문

for of는 배열을 뽑아낼때 사용하는 반복문이다. iterator와 사용하기 적합하다고 하는데, 이해하기 어렵다. 그냥 "배열"로 일단은 기억해두자

​

                                    const color = ["pink" , "white", "blue"]

for(let el of color){
   console.log(el)
}

결과 : "pink","white", "blue"

배열의 각 요소를 뽑아내기 좋은 반복문이다.

​

배열에 속해있는 pink, white, blue가 console창에 찍히는 것을 볼 수 있다.

​

​

​

for in vs for of 반복문

많이 헷갈리는 for of와 for in이 어떤 차이가 있는지 테스트 해보았다.

                                    [for in]
const woman = {
    name : "JANE",
    age : 27,  // age= 으로 선언하지 말 것
    job : "teacher", //반드시 ""를 붙여서 표현하기
}

for(let key in woman){
   console.log(key, woman[key]);
}

for(let el of woman){
  console.log(el);
}

콘솔결과: ??

------------------------------------------------------------------------------------------------------------------------
[for of]
const color = ["pink" , "white", "blue"]

for(let el of color){
   console.log(el)
}

for(let key in color){
   console.log(key)
}

결과 : ??

​

위와 동일한 객체를 for of로 추출해보았다.

​

객체로 지정해둔 woman이 iterable하지 않는다고 한다. 무슨말인가?

​

사실 for of는 iterator만 반복할 수 있다. 여기서 iterator는 반복자를 의마하는데, 가장 대표적인 예로 배열이있다.

​

결론은 for of는 그냥 배열에서 쓰라는 이야기이다.

밑에는 배열 color에서 for in 반복문을 시행했다.

​

왠 숫자가 나온다.

​

for in은 key값을 추출한다고 배웠다. 배열의 key으로 index값이 나온듯 하다 (?)

​

사실 해석을 못하겠다 공부가 필요하다

​

결론은 . for in은 객체에서만 사용하라는 이야기였다.

​

​

결론: for of는 "배열"에서 for in은 "객체"에서 원하는 값을 뽑아낼 때 사용하기

​

​