[ES6+] FOR of LOOP(for문)

in JavaScript



for : 반복문

기존의 for문

//1번 예시
for(let i =0; i <20; i++){
  console.log(i);
}
//0,1,2,3,4,5...19


//2번 예시
const friends = ["sora","kat","alex","meg"];
for(let i = 0; i < friends.length; i++){
  console.log(friends[i]);
}
//sora kat alex meg

틀린건 아니지만 효율적이지 않다는 for문…




그렇다면 ES6에서는 어떻게 할까?

const friends = ["sora","kat","alex","meg"];

const addHeart = c => console.log(c); 

friends.forEach(addHeart);

//sora kat alex meg

forEach는 각 엘리먼트에 해당하는 만큼의 특정한 액션을 실행한다.

forEach는 addHeart라는 함수를 호출할건데, 이 함수는 current item과 같이 호출을 한다

그러니까 addHeart에 current item이 함수의 첫 인자가 될 것이다

인덱스를 같이 받을 수도 있다.

const addHeart = (c,i) => console.log(c,i);
sora 0 kat 1, alex 2, meg 3

이렇게 말이다



또, 배열도 넣을 수가 있는데

const addHeart = (c,i,a) => console.log(c,i,a);
//sora 0 (4)["sora","kat","alex","meg"]
//kat 1 (4)["sora","kat","alex","meg"] 
//alex 2 (4)["sora","kat","alex","meg"]
//meg 3 (4)["sora","kat","alex","meg"]

이름은 c,i,a가 아니어도 상관없다.

첫번째, 두번째, 세번째 자리가 의미하는게 정해져 있기 떄문이다.



그리고 forEach의 괄호안을 화살표함수로 적어줄 수도 있다.

friends.forEach(friend => console.log(friend));

이런식으로 말이다




For of

const friends = ["sora","kat","alex","meg"];

for (const friend of friends){
	console.log(friend);
}
//sora kat alex meg

for of 와 forEach의 차이점은

for of에서는 let 과 const 를 지정해줄 수 있고, 다른 동작들도 가능하다. ( 배열뿐만이 아니고 iterable(=루프가 가능한)한 모든것에서 동작한다 )

심지어 string에서도 가능하다

그리고 원하는곳에서 for을 중단시킬 수도 있다!

const friends = ["sora","kat","alex","meg","mike","kevin"];

for(const friend of friends){
  if(friend === "meg"){
    break;
  }else{
    console.log(friend);
  }
}
//sora kat alex

원할때 진행시키고, 원할떄 멈출수있는 for문이었다 =)






노마드코더의 ‘ES6의 정석’을 듣고 정리 =)


© 2018. by sora

Powered by sora