자바스크립트 for,for...in/of,forEach,map,filter,reduce,find

맨날 헷갈려서 구글을 찾아보는게 아직도 정립이 안되어있나보다

for loop

for ([initialization]; [condition]; [final-expression]){
	statement
}

[initialization] 식 또는 변수 선언(let)

[condition] 매 반복마다 평가할 식, 결과가 참이면 statement를 실행 함

[final-expression] 매 반복 후 평가할 식 다음번 condition 평가 이전에 발생함, 주로 카운터 변수를 증감하거나 바꿈

[statement] 조건의 평가 결과가 참일 때 실행

for (var i = 0; i < 9; i++) {
   console.log(i); 
   // 1 ~ 8 까지 순차적으로 출력
}

for반복문의 3개 식은 모두 선택사항

//  [initialization] 생략
let i = 0;
for (; i < 9; i++) {
    console.log(i); 
}

//  [condition] 생략, 이 경우 반복문 본문에 무한반복을 탈출할 수 있는 장치를 추가하여야함
for (var i = 0;; i++) {
   console.log(i);
   if (i > 3) break;
}

// 세 가지 모두 생략
let i = 0;
for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

forEach()

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

callback 각 요소에 대해 실행할 함수 (매개변수 : 요소 값,요소 인덱스, 순회 중인 배열)

currentValue 처리할 현재 요소.

index Optional 처리할 현재 요소의 인덱스.

array Optional forEach()를 호출한 배열.

thisArg Optional callback을 실행할 때 this로 사용할 값.

const array = ['a', 'b', 'c'];

array.forEach(element => console.log(element));

//콜백 함수를 인자로 받고 배열의 각 요소에 콜백함수를 실행함
// expected output: "a"
// expected output: "b"
// expected output: "c"

let arr = [2, 5, 9]
arr.forEach(function(element, index, array) {
console.log(index + ":" + element,"array" + "=" + array);
});

// expected output: 0:2 array=2,5,9
// expected output: 1:5 array=2,5,9
// expected output: 2:9 array=2,5,9

하지만

❗ forEach()는 중간에 끊을 수 없다 (return으로 skip)
❗ return값을 받지 못함

var arr = [1,2,3,4,5];
var newArr = arr.forEach(function(e, i) {
  return e;
});
// undefined

for...in

✔ 객체의 열거 가능한 '속성들'을 순회할 수 있도록 해줌
✔ for...in문은 순서가 보장되지 않음
   (순서가 중요한 경우 for...in문 을 권장하지 않음)
✔ 객체의 key값에 접근 가능, value값에는 직접 접근 불가
   ex)arr[i],obj[prop]와 같이 간접적으로 접근, value값은 string
✔ 배열에서는 index, 객체에서는 key값에 접근
✔ 모든 객체에서 사용 가능

let arr = ['a', 'b', 'c']; 
for (var i in arr) { 
	console.log(i, arr[i]); } 
    // 0 a, 1 b, 2 c 

let obj = { a: 1, b: 2, c: 3 }; 
for (var prop in obj) { 
	console.log(prop, obj[prop]); } 
    
    // a 1, b 2, c 3

for...of

✔ 반복 가능한 객체(iterable)를 순회할 수 있도록 해줌
✔ Array, Map, Set, arguments 등이 해당됨 (Object는 해당 X)

// Array 
for (const val of ['a', 'b', 'c']) { 
	console.log(val); // 'a','b','c'
} 

// String 
for (const val of 'abc') { 
	console.log(val); // 'a','b','c'
}

// Object 
for ( let val of {1 :'a', 2 :'b', 3 :'c'} ) {
	console.log(val); // TypeError: object is not iterable
 }

for...in / for...of

for ...in

✔️ Iterable object이면 모두 대상으로 함
✔️ 객체의 모든 열거 가능한 속성에 대해 반복
✔️ key를 리턴 (배열의 경우에는 index)

for ...of

✔️ [Symbol.iterator] 속성을 가지는 collection만 대상으로 함
✔️ Iterable object이지만, prototype chain에 의한 Iterable은 대상에서 제외
→ Array, Map, Set, String, TypedArray, arguments 등
✔️ value를 리턴

---

map()

기존 배열을 이용해, 새로운배열을 생성 할 때 사용한다
콜백 함수를 인자로 받아 배열의 요소에 대해서 실행한 결과 값을 반환한다
새로운 배열을 변수에 저장하여 사용

let newArr=arr.map(function callback (현재값 [, index [, array]] ) {
// return newArr를 위한 요소
}[,thisArg)



var square = [1, 2, 3, 4, 5].map(function(element, index, array) {
	return element * element;
});

console.log(square); // [ 1, 4, 9, 16, 25 ]

filter

배열에서 주어진 특정 조건을 통과한 여러 요소를 새로운 배열로 반환
find메소드와 동일하게 boolean값을 반환하는 함수를 인자로 받는다,기본값은 false이고 return값이 true일 경우 그 요소를 반환하고 false일 경우 반환하지 않는다(빈 배열 요소를 반환하지 않는다)

let filtered = [12, 5, 8, 130, 44].filter(function(element, index, array) {
	return (element >= 10);
});

console.log(filtered); // [ 12, 130, 44 ]

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(element) {
  return element % 2 == 0;
});
// 2, 4

let arr = [
  {name: 'Ben', sex: 'male', age: 28},
  {name: 'Lisa', sex: 'female', age: 27},
  {name: 'Jane', sex: 'female', age: 25}
];

let filteredAge = arr.filter(element => element.age > 26);
console.log(filteredDistances);

let arr = [0, , , 1, , , , , 2, , , , 3];
let newArr = arr.filter(function() { return true; });
// 0, 1, 2, 3
let newArr1 = arr.filter(function(el) { return el; });
//  1, 2, 3

find

배열에서 하나의 요소를 선택할 때 사용, 이 메소드는 특정한 조건을 확인하는 함수를 인자로 받아, 조건을 만족하는 맨 처음 요소를 반환한다. 따라서 인자에 넘겨지는 함수는 true 혹은 false 를 반환하여야 한다.

const  arr = [
  {name: 'Ben', sex: 'male', age: 28},
  {name: 'Lisa', sex: 'female', age: 27},
  {name: 'Jane', sex: 'female', age: 25}
];

function isFemale(element) { 
  return element.sex === 'female';
}

console.log(arr.find(isFemale)); // {name: 'Lisa', sex: 'female', age: 27}

reduce

arr.reduce(callback[, initialValue])

callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 가짐

-accumulator : 누적값. 콜백의 반환값을 누적. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값임

-currentValue : 현재값,처리할 현재 요소

-currentIndex (Optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작

-array (Optional) : reduce()를 호출한 배열

initialValue (Optional) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류 발생

배열을 사용해서 함수를 실행한 뒤 그 결과로 파생되는 하나의 값을 리턴할 때 사용한다.
함수에서 반환되는 값은 acc에 저장되며 다음 배열에 대해 reducer함수가 다시한번 실행될 때 사용된다,crr은 acc의 다음 배열 값을 받는다.

// Syntax 예제
const newArr = arr.reduce(<reducerFunction>, initVal);
function reducerFunction (acc, crr, idx, src) {
  return acc + crr; 
}

// 실에제
const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((acc, cur, idx) => { return acc += cur; }, 0);
console.log(result);  // 15

const arr2 = [1, 2, 3, 4, 5];
const result2 = arr2.reduce((acc, cur, idx) => { return acc += cur; }, 10);
console.log(result2);  // 25

---

정리

1. 반환하는 값 없이 각 element 값에 대해서 일련의 행동을 하려면, forEach
2. 배열의 각 요소에 대해서 실행한 결과 값을 반환하며 새로운 배열을 생성하려면 map
3. 하나의 결과 값을 반환하려면, reduce
4. 특정 조건을 만족하는 하나의 요소를 선택하려면, find
5. 특정 조건을 만족하는 여러개의 요소를 선택하려면, filter

arr.map(),arr.reduce(),array.forEach(),array.filter()은 모두 사본을 반환하며 원래의 배열은 바뀌지 않는다