[TIL] JavaScript | for, for-of, for-in, forEach, map

🎲 목표: 파이썬의 for문과 헷갈리는🙄 자바스크립트의 다양한 for문(+메서드) 이해하기

며칠 고민하다 어제 갑작스레 프론트로 분야를 바꿨다! 만드는 대로 눈에 보이는 게 너무 재밌어...... 근데 자꾸 문제 풀면서 파이썬 문법이 튀어나옴😅 자바스크립트 더 열심히 따라가야징 💪💪

▶ 목차
🔎 for
🔎 for-of
🔎 for-in
🔎 forEach
🔎 map

🔎 for

파이썬과 마찬가지로, 반복수행이 필요할 때 for문을 쓴다. 기본적인 for문의 형태는 다음과 같다.

for (let i; i < 10; i++) {
  실행할 함수
  }

괄호 안의 내용은 (변수; 반복을 끝낼 변수의 조건; for문이 한 번 끝날 때마다 변수의 변화)로 보면 됨!

for문을 이용해서 배열(Array)의 요소를 반복 호출할 수도 있다.

const fruits = ["lemon", "melon", "blueberry", "peach"];
for (let i; i < fruits.length; i++) {
  console.log(fruits[i]);
  }

🔎 for-of

for-of는 ES6에서 추가된 문법으로서, 일반 for문보다 편리하게 Array, String, Map, Set 등을 반복할 수 있게 해 준다.

const fruits = ["lemon", "melon", "blueberry", "peach"];
for (let i of fruits) {
  console.log(i);
  }

/*실행결과:
  lemon
  melon
  blueberry
  peach*/

• 배열의 길이만큼 반복하는 조건을 직접 설정하지 않아도 되고, i가 인덱스가 아니라 i번째 요소 그 자체로 할당되기 때문에 편리함
• continue와 break로 반복을 스킵하거나 중단할 수 있음!
• Object에는 사용 불가능 (순서가 있는 iterable한 자료형이 아니기 때문)

🔎 for-in

마찬가지로 ES6에서 추가된 문법. for-of와 달리 Object에도 사용 가능함!

const colorfulfruits = {
  yellow: "lemon",
  green: "melon",
  purple: "blueberry",
  pink: "peach"
  };
for (let i in colorfulfruits) {
  console.log(i, colorfulfruits[i]);
  }

/*실행결과:
  yellow lemon
  green melon
  purple blueberry
  pink peach*/

위에서 알 수 있듯이 i는 object의 key값이 되고, object[i]로 value를 사용할 수 있다.

그런데 Array에 for-in을 사용할 경우

const fruits = ["lemon", "melon", "blueberry", "peach"];
for (let i of fruits) {
  console.log(i);
  }

/*실행결과:
  0
  1
  2
  3*/

i는 각 요소가 아닌 인덱스가 되기 때문에 헷갈리지 않도록 주의하자!

🔎 forEach

forEach는 Array의 메서드로서 각 요소를 인자로 콜백함수를 실행한다.

const fruits = ["lemon", "melon", "blueberry", "peach"];
fruits.forEach(i => console.log(`I like ${}`));

/*실행결과:
  I like lemon
  I like melon
  I like blueberry
  I like peach*/

만약 콜백함수의 인자를 세 개 설정할 경우 각각 요소, 인덱스, 전체 배열이 된다.

const fruits = ["lemon", "melon", "blueberry", "peach"];
fruits.forEach((a, b, c) => console.log(a, b, c));

/*실행결과:
  lemon 0 4
  melon 1 4
  blueberry 2 4
  peach 3 4*/

🔎 map

map 또한 Array의 메서드로, forEach와 비슷하지만 각 요소의 콜백함수 실행 결괏값들로 새 Array를 리턴한다. 파이썬의 map과 거의 비슷한 것 같다. forEach는 for문처럼 함수의 반복실행만 할 뿐, 리턴값이 없음!

const fruits = ["lemon", "melon", "blueberry", "peach"];
const re = fruits.map(i => `fresh ${i}`);
console.log(re);
/*실행결과:
  ["fresh lemon", "fresh melon", "fresh blueberry", "fresh peach"]*/

array.map((x, y, z) => {} ) 이런 식으로 콜백함수가 인자 세 개를 받을 경우 각각 요소, 인덱스, 배열이 할당됨!

🙇‍♀️참고한 자료

[Javascript] forEach, some, for in, for of (자바스크립트, 반복, 배열 반복, 프로토타입, prototype, 객체 반복)
Array.prototype.forEach() - JavaScript | MDN