자바스크립트의 배열(Array)은 요소들을 저장하는 기본적인 데이터 구조입니다. 자바스크립트에서는 배열을 효율적으로 가공하기 위해 많은 내장함수를 제공합니다. 이 글에서는 자주 쓰이는 중요한 Array 함수들 5개 push()
, forEach()
, filter()
, map()
, reduce()
와 예시를 소개하겠습니다.
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]
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
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']
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]
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()
설명으로 돌아오겠습니다.
혹, 이해가 어려운 예시나 틀린 예시가 있다면 댓글로 알려주시면 감사드리겠습니다.