TIL45. 반복문의 세계

반복문의 종류는 참 다양하다. 그동안 각각의 차이를 모르고 사용한 것 같아서 이번 기회를 통해 명확하게 구분하여 사용하는 기회를 가져보자.

for

가장 베이직한 for문 문법이며 index로 직접 배열의 요소를 선택하여 보여준다. 가장 빠르고 단순하고, 모든 자료형에 대해 사용이 가능하다. 중간에 loop 건너뛰기나 종료가 가능하다. (continue or break)

const fruits= ['🍎','🍊']
for(let i=0; i < fruits.length; i++) {
	console.log(fruits[i]);
}
// expected output
🍎
🍊

for of

for of문은 배열의 객체를 하나씩 반환해주는 반복문이다.

for (let fruit of fruits) {
	console.log(fruit);
}
// expected output
🍎
🍊

*for in

for in문은 Object에 있는 key에 차례로 접근하는 데 사용되는 반복문이다.
배열에서도 사용가능하지만 권장하지 않는다.

const obj = {
  "1" : "🍎",
  "2" : "🍊"
}

for (let i in obj){
  console.log(obj[i])
}

// expected output
🍎
🍊

forEach

forEach문은 배열의 요소 또는 인덱스를 반환해주는 반복문으로 for문에 비해 가독성이 좋다.
인자로 세개까지 받을 수 있는데 첫번째는 value,두번째는 index, 세번째는 array.
새 배열로 바꾸지 않고, return값을 반환하지 못한다.(즉, 함수 안에 console.log나 결과값 직접 입력)
for문과 다르게 중간에 끊을 방법이 없다.

fruits.forEach((fruit, idx, array) => {
	console.log(fruit, index, array);
});

// expected output
🍎 0 ['🍎','🍊']
🍊 1 ['🍎','🍊']

filter

filter의 가장 큰 특징은 boolean형태의 return값을 갖는다. return값이 true일경우, 그 요소를 새로운 배열을 만들어 반환하고 false일경우, 빈 배열 요소는 반환하지 않는다.(기본값은 false)

let cost = [,40 , 50, 100, 400, 700];
let smallCost = cost.filter((costItem) => costItem < 200);
console.log(smallCost);

// expected output
[ 40, 50, 100 ]

map

배열을 순회하며 요소마다 callback 함수 적용 후 새로운 배열로 리턴한다.
map과 forEach( )의 가장 큰 차이는 'return'유무이다. map은 return으로 결과값을 반환할 수 있으며, 그 값을 변수에 넣었을 때는 배열로 얻을 수 있다. forEach를 사용한다면 각 요소 요소를 따로 도출되고, map을 사용하면, 결과값을 배열로 받을수 있다.

let cost = [100,400,300,700];
let newCost = cost.map((costItem) =>
   costItem / 10);

console.log(newCost);

//expected output
[10, 40, 30 , 70]

reduce

reduce의 가장 큰 특징으로는 첫번째 인자인 accumulator 이다. accumulator 는 return값을 누적하는데, 계속해서 전달받아서 사용할 수도 있다. accumulator의 초기값을 설정할 수 있는데, optional하며 생략시에는 첫번째 return값이 된다.
쇼핑몰에서 장바구니 기능을 구현할 때, 각 각의 물건값을 더하여 합산할 때 사용하면 좋은 메소드이다.

let arr = [1,2,3,4,5]
let newArr = arr.reduce(function(acc, v, i, arr) {
  return acc + v;
}, 100);
// 115