[JavaScript] 자주 쓰이는 자바스크립트 Array 함수 5개 1탄 (push, forEach, filter, map, reduce)

자바스크립트의 배열(Array)은 요소들을 저장하는 기본적인 데이터 구조입니다. 자바스크립트에서는 배열을 효율적으로 가공하기 위해 많은 내장함수를 제공합니다. 이 글에서는 자주 쓰이는 중요한 Array 함수들 5개 push(), forEach(), filter(), map(), reduce()와 예시를 소개하겠습니다.

1. push()

1) 현재 배열의 끝에 요소를 추가합니다.
2) 요소가 추가된 배열을 리턴합니다.

예시1) 한 개의 요소를 특정 배열에 추가하기

let colors = ['red', 'green', 'blue'];
colors.push('yellow');

console.log(colors); 

// Output: 
//["red", "green", "blue", "yellow"]

예시2) 두 개 이상의 요소를 특정 배열에 추가하기

let numbers = [1, 2, 3];
numbers.push(4, 5); 

console.log(numbers); 

// Output: 
//[1, 2, 3, 4, 5]

2. forEach()

1) 현재 배열의 모든 요소를 콜백함수와 함께 순회합니다.
2) 이 때 콜백함수는 순회하고 있는 현재 요소의 값, 현재 요소의 인덱스, 해당 배열을 인자로 사용합니다.
3) 각각의 요소에 콜백함수가 실행된 값이 리턴됩니다.
*forEach()는 새로운 배열을 생성하는 것이 아니기 때문에 결과 값을 보기 위해서는 console.log 혹은 push() 메서드를 콜백함수로 사용하여야합니다.

예시1) 현재의 요소 값만 인자로 받아 배열 순회하기

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit) {
  console.log(fruit);
});
// Output:
// "apple"
// "banana"
// "cherry"

fruits.forEach(function(fruit) {
	console.log("Sweet " + fruit);
});
// Output:
// "Sweet apple"
// "Sweet banana"
// "Sweet cherry"

예시2) 현재 요소 값, 현재 인덱스, 해당 배열을 인자로 받아 배열을 수정하기

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

numbers.forEach(function(number, index, array) {
  array[index] = number * 2;
});

console.log(numbers);
// Output:
// [2, 4, 6, 8, 10]

예시3) 화살표 함수를 사용하여 각 요소를 제곱하기

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

numbers.forEach(number => {
  console.log(number * number);
});
// Output:
// 1
// 4
// 9
// 16
// 25

3. filter()

1) 현재 배열의 모든 요소를 콜백함수와 함께 순회합니다.
2) 이 때 콜백함수는 boolean 값을 리턴해야만 합니다.
3) 이 때 콜백함수는 순회하고 있는 현재 값을 인자로 사용합니다.
4) 모든 요소에 콜백함수를 실행한 결과가 true를 리턴하는 요소들로 새로운 배열을 생성합니다.

예시1) 숫자 배열 중 홀수 값만 골라 홀수 배열 만들기

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

const oddNumbers = numbers.filter(function(number) {
  return number % 2 !== 0;
});

console.log(oddNumbers);
// Output:
// [1, 3, 5]

예시2) 유저 리스트 중 성인 유저만 필터링하기
(객체 배열을 필터링하는 예시)

const users = [
  { name: '김감자', age: 25 },
  { name: '박고구마', age: 17 },
  { name: '이당근', age: 30 },
  { name: '나양파', age: 16 }
];

const adults = users.filter(function(user) {
  return user.age >= 18;
});

console.log(adults);
// Output:
// [
//   { name: '김감자', age: 25 },
//   { name: '박고구마', age: 30 }
// ]

예시 3) 화살표 함수와 string.length 로 필터링하기

const words = ['JavaScript', 'Python', 'Ruby', 'Java', 'C#', 'Swift', 'TypeScript', 'PHP'];

const filteredWords = words.filter(word => word.length > 5);

console.log(filteredWords);
// Output:
// ['JavaScript', 'Python', 'TypeScript']

4. map()

1) 현재 배열의 모든 요소를 콜백함수와 함께 순회합니다.
2) 이 때 콜백함수는 순회하고 있는 현재 값을 인자로 사용합니다.
3) 모든 요소에 콜백함수를 실행한 결과값으로 새로운 배열을 생성합니다.

예시1) 특정 배열의 모든 요소에 2배가 되는 배열 만들기

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers);
// Output: [2, 4, 6, 8, 10]

예시2) 유저의 이름만 담긴 배열 만들기 (객체의 속성을 추출하기)

const users = [
  { name: '김감자', age: 25 },
  { name: '박고구마', age: 30 },
  { name: '이당근', age: 20 }
];

const names = users.map(user => user.name);

console.log(names);
// Output: ['김감자', '박고구마', '이당근']

예시3) String 타입의 값의 배열을 Number 타입의 값의 배열로 만들기

const strings = ['1', '2', '3', '4', '5'];
const numbers = strings.map(str => parseInt(str));

console.log(numbers);
// Output: [1, 2, 3, 4, 5]

5. reduce()

1) 콜백함수와 초기값(누진값)을 인자로 받는 메서드 입니다.
=> reduce(function('누진값', '현재값'){},'초기값')
2) 현재 배열의 모든 요소를 콜백함수와 함께 좌측에서 우측으로 순회합니다.
3) 이 때 콜백함수는 누진 값과 순회하고 있는 현재 값을 인자로 사용합니다.
4) 이 때 누진 값은 현재 값 이전 값에 콜백함수를 실행시킨 후 리턴한 값이 저장됩니다.
5) 모든 요소에 콜백함수를 실행한 후 마지막 요소의 누진 값을 리턴합니다.

예시1) 배열의 모든 값을 더한 값을 추출하기

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);

console.log(sum);
// Output: 15

예시2) 상품의 총합을 추출하기

const products = [
  { name: 'Product 1', price: 10 },
  { name: 'Product 2', price: 20 },
  { name: 'Product 3', price: 30 }
];

const totalPrice = products.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue.price;
}, 0);

console.log(totalPrice);
// Output: 60

예시3) 배열에 포함된 단어가 몇개있는지 확인하고 객체로 만들기

const words = ['apple', 'banana', 'cherry', 'apple', 'cherry', 'cherry', 'banana', 'apple'];

const wordCounts = words.reduce((accumulator, currentValue) => {
  if (currentValue in accumulator) {
    accumulator[currentValue]++;
	//만약 현재 값이 누진 값 객체 안에 속성으로 있다면 해당 속성 값을 찾아 1 더하기
  } else {
    accumulator[currentValue] = 1;
	// 만약 현재 값이 누진 값 객체 안에 속성으로 지정이 안되어있다면 현재 값을 객체 속성으로 추가하고 1 넣기
  }
  return accumulator;
  	//누진 값 리턴하기
}, {});
	//초기 값은 {}객체로 세팅하기

console.log(wordCounts);
// Output: { apple: 3, banana: 2, cherry: 3 }

여기까지 자주 쓰이는 Array 함수 5가지 설명 1탄을 마치고 2탄에서는 pop(), shift(), unshift(), slice(), splice() 설명으로 돌아오겠습니다.

혹, 이해가 어려운 예시나 틀린 예시가 있다면 댓글로 알려주시면 감사드리겠습니다.