JavaScript 입문(2) - 모던 자바스크립트 | 김민준

[출처 : https://learnjs.vlpt.us]

Array.forEach()

배열 안에 있는 모든 원소들을 모두 출력

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

for (let i = 0; i < superheroes.length; i++) {
  console.log(superheroes[i]);    // '아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'
}

superheroes.forEach(hero => {
  console.log(hero);             // '아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'
});

forEach 함수의 파라미터로는, 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어줍니다. 이 함수의 파라미터 hero는 각 원소를 가르키게 됩니다.

이렇게 함수형태의 파라미터를 전달하는 것을 콜백함수 라고 부릅니다. 함수를 등록해주면, forEach 가 실행을 해주는 거죠.

---

Array.map()

배열 안의 각 원소를 변환 할 때 사용 되며, 이 과정에서 새로운 배열이 만들어집니다

const array = [1, 2, 3, 4, 5, 6, 7, 8];

// forEach 사용한 구문
const squared = [];
array.forEach(n => {
  squared.push(n * n);
});

// map 사용한 구문
const square = n => n * n;
const squared = array.map(square);

console.log(squared);    // [1, 4, 9, 16, 25, 36, 49, 64];

map 함수의 파라미터로는 변화를 주는 함수를 전달해줍니다. 이를 변화함수라고 부르도록 하겠습니다.

현재 우리의 변화함수 square 는 파라미터 n 을 받아와서 이를 제곱해줍니다.

array.map 함수를 사용 할 때 square 를 변화함수로 사용함으로서, 내부의 모든 값에 대하여 제곱을 해서 새로운 배열을 생성하였습니다.

 

변화 함수를 꼭 이름을 붙여서 선언 할 필요는 없습니다. 코드를 다음과 같이 작성해도 됩니다.

const squared = array.map(n => n * n);
console.log(squared);

---

Array.findIndex() 와 Array.find()

만약에 배열 안에 있는 값이 숫자, 문자열, 또는 불리언이라면 찾고자하는 항목이 몇번째 원소인지 알아내려면 indexOf 를 사용하면 됩니다. 하지만, 배열 안에 있는 값이 객체이거나, 배열이라면 indexOf 로 찾을 수 없습니다.

const todos = [
  {id: 1, text: '자바스크립트 입문', done: true},
  {id: 2, text: '함수 배우기', done: true},
  {id: 3, text: '객체와 배열 배우기', done: true},
  {id: 4, text: '배열 내장함수 배우기', done: false}
];

// Array.findIndex()
const index = todos.findIndex(todo => todo.id === 3);
console.log(index);    // 2

// Array.find()
const index = todos.find(todo => todo.id === 3);
console.log(index);    // {id: 3, text: '객체와 배열 배우기', done: true}

Array.findIndex() 와 Array.find()은 가장 첫 번째로 찾은 항목만 반환한다.

---

Array.filter()

 

const tasksNotDone = todos.filter(todo => todo.done === false);
console.log(tasksNotDone);    // [{id: 4, text: '배열 내장 함수 배우기', done: false}];

filter 함수에 넣는 파라미터는 조건을 검사하는 함수를 넣어주며, 이 함수의 파라미터로 각 원소의 값을 받아오게 됩니다.

---

Array.splice()

배열에서 특정 항목을 제거할 때 사용합니다. 기존의 배열이 수정된다.

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
const spliced = numbers.splice(index, 2);

console.log(numbers);  // [10, 20]
console.log(spliced);  // [30, 40]

splice 를 사용 할 때 첫번째 파라미터는 어떤 인덱스부터 지울지를 의미하고 두번째 파라미터는 그 인덱스부터 몇개를 지울지를 의미합니다.

---

Array.slice()

splice 랑 조금 비슷한데요, 배열을 잘라낼 때 사용하는데, 중요한 점은 기존의 배열이 수정되지 않는다.

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지

console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]

slice 에는 두개의 파라미터를 넣게 되는데 첫번째 파라미터는 어디서부터 자를지, 그리고 두번째 파라미터는 어디까지 자를지 를 의미합니다.

---

Array.pop()

Array.shift() 

배열에서 첫번째 원소를 추출해줍니다. (추출하는 과정에서 배열에서 해당 원소는 사라집니다.)

const numbers = [10, 20, 30, 40];
const value = numbers.shift();

console.log(value);    // 10
console.log(numbers);  // [20, 30, 40]

Array.pop()

배열에서 맨 마지막 요소 추출합니다. (추출하는 과정에서 배열에서 해당 원소는 사라집니다.)

const numbers = [10, 20, 30, 40];
const value = numbers.pop();

console.log(value);    // 40
console.log(numbers);  // [10, 20, 30]

---

Array.unshift()

배열의 맨 앞에 새 원소를 추가합니다. 의 반대입니다.

const numbers = [10, 20, 30, 40];
numbers.unshift(5);

console.log(numbers);    // [5, 10, 20, 30, 40]

---

Array.concat()

여러개의 배열을 하나의 배열로 합쳐줍니다. 대상이 되는 배열에 변화를 주지 않는다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const concated = arr1.concat(arr2);  // [...arr1, ...arr2]와 같음
console.log(concated);    // [1, 2, 3, 4, 5, 6]
console.log(arr1);        // [1, 2, 3]

---

Array.join()

배열 안의 값들을 문자열 형태로 합쳐줍니다.

const array = [1, 2, 3, 4, 5];

console.log(array.join()); // 1,2,3,4,5
console.log(array.join(' ')); // 1 2 3 4 5
console.log(array.join(', ')); // 1, 2, 3, 4, 5

Array.join()의 파라미터는 문자열을 어떻게 구분할 지를 정하는 세퍼레이터이다.

---

Array.reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

 

리듀서 함수는 네 개의 인자를 가집니다.

 

 1. 누산기accumulator (acc)

 2. 현재 값 (cur)

 3. 현재 인덱스 (idx)

 4. 원본 배열 (src)

 

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

 

arr.reduce(callback[, initialValue])

 

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

  - accumulator : 누산기accmulator는 콜백의 반환값을 누적합니다.

    콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.

  - currentValue : 처리할 현재 요소.

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

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

 

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

 

만약 여러분이 주어진 배열에 대하여 총합을 구해야 하는 상황이 왔다고 가정해봅시다.

const numbers = [1, 2, 3, 4, 5];

// Array.forEach()를 사용
let sum = 0;
numbers.forEach(n => {
  sum += n;
});

// Array.reduce()를 사용
let sum = array.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum);    // 15

reduce 함수에는 두개의 파라미터를 전달합니다. 첫번째 파라미터는 accumulator 와 current 를 파라미터로 가져와서 결과를 반환하는 콜백함수이구요, 두번째 파라미터는 reduce 함수에서 사용 할 초깃값입니다.

여기서 accumulator 는 누적된 값을 의미합니다.

 

방금 작성한 함수를 다음과 같이 수정해보세요.

const numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((accumulator, current) => {
  console.log({ accumulator, current });
  return accumulator + current;
}, 0);

console.log(sum);    // 15

이 코드의 실행 결과는 다음과 같습니다.

배열을 처음부터 끝까지 반복하면서 우리가 전달한 콜백 함수가 호출이 되는데요, 가장 처음엔 accumulator 값이 0 입니다. 이 값이 0인 이유는 우리가 두번째 파라미터인 초깃값으로 0을 설정했기 때문입니다.

처음 콜백 함수가 호출되면, 0 + 1 을 해서 1이 반환됩니다. 이렇게 1일 반환되면 그 다음 번에 콜백함수가 호출 될 때 accumulator 값으로 사용됩니다.

콜백함수가 두번째로 호출 될 땐 1 + 2 를 해서 3이되고, 이 값이 세번째로 호출될 때의 accumulator 가 됩니다.

그래서 쭉 누적돼서 결과물 15가 나타나는 것 입니다.

 

reduce 를 사용해서 평균도 계산 할 수 있습니다. 평균을 계산하려면, 가장 마지막 숫자를 더하고 나서 배열의 length 로 나누어주어야 합니다.

const numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(sum);    // 3

위 코드의 reduce 에서 사용한 콜백함수에서는 추가 파라미터로 index 와 array 를 받아왔습니다. index 는 현재 처리하고 있는 항목이 몇번째인지 가르키고, array 는 현재 처리하고 있는 배열 자신을 의미합니다.