자바스크립트 배열 내장 함수와 예시

1. 배열 반복

자바스크립트에는 배열을 반복하며 작업할 수 있는 여러 가지 내장 함수들이 있습니다. 아래 예시에서는 가장 많이 사용되는 세 가지 함수를 살펴보겠습니다.

1.1 forEach()

forEach 함수는 배열의 모든 요소를 반복하며, 각 요소마다 지정된 함수를 실행합니다. 이 함수는 개별적인 요소에 대한 작업을 수행할 때 유용합니다.

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

numbers.forEach(function(number) {
  console.log(number);
});

이 예제에서는 숫자 배열의 각 요소를 콘솔에 출력하고 있습니다. forEach 함수를 사용하여 배열을 반복하며, 각 요소를 콘솔에 차례대로 출력합니다.

1.2 map()

map 함수는 배열의 모든 요소를 반복하고, 각 요소에 대해 지정된 함수를 실행한 결과를 새로운 배열로 반환합니다. 이 함수는 기존 배열의 값을 변경하지 않고 새로운 배열을 만들어야 할 때 유용합니다.

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

const squareNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squareNumbers);

이 예제에서는 숫자 배열의 각 요소를 제곱하여 새로운 배열을 생성하고 있습니다. map 함수를 사용하여 배열을 반복하며, 각 요소를 제곱한 결과를 새로운 배열에 저장한 후 출력합니다.

1.3 filter()

filter 함수는 배열의 모든 요소를 반복하고, 각 요소에 대해 지정된 조건을 만족하는 경우만 새로운 배열로 반환합니다. 이 함수는 배열에서 특정 조건에 맞는 요소들만 추출할 때 유용합니다.

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

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

console.log(evenNumbers);

이 예제에서는 숫자 배열에서 짝수만 추출하여 새로운 배열을 생성하고 있습니다. filter 함수를 사용하여 배열을 반복하며, 각 요소가 짝수인지 확인한 후 짝수인 경우만 새로운 배열에 저장한 후 출력합니다.

2. 배열 변형

자바스크립트에는 배열을 변형하는 내장 함수들도 있습니다. 아래 예시에서는 가장 많이 사용되는 세 가지 함수를 살펴보겠습니다.

2.1 sort()

sort 함수는 배열의 요소를 정렬합니다. 기본적으로는 문자열 형태로 정렬되며, 숫자를 정렬할 때는 정렬 순서를 지정하는 함수를 사용해야 합니다.

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

numbers.sort();

console.log(numbers);

이 예제에서는 숫자 배열을 정렬하고 있습니다. sort 함수를 사용하여 배열을 정렬하였으며, 결과를 콘솔에 출력합니다.

2.2 reverse()

reverse 함수는 배열의 요소를 역순으로 정렬합니다.

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

numbers.reverse();

console.log(numbers);

이 예제에서는 숫자 배열을 역순으로 정렬하고 있습니다. reverse 함수를 사용하여 배열의 순서를 역으로 바꾼 후, 결과를 콘솔에 출력합니다.

2.3 reduce()

reduce 함수는 배열의 각 요소에 대해 지정된 함수를 실행하고, 하나의 값으로 줄여서 반환합니다. 이 함수를 사용하여 배열의 합계나 곱셈 등을 구할 수 있습니다.

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

const sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);

console.log(sum);

이 예제에서는 숫자 배열의 합계를 구하고 있습니다. reduce 함수를 사용하여 배열을 반복하며, 각 요소를 누적 합계에 더한 후 결과를 출력합니다.

3. 배열 검색

자바스크립트에는 배열에서 특정 요소를 검색하는 내장 함수들도 있습니다. 아래 예시에서는 가장 많이 사용되는 세 가지 함수를 살펴보겠습니다.

3.1 includes()

includes 함수는 배열에 특정 요소가 포함되어 있는지를 검사하고, 존재 여부를 불리언 값으로 반환합니다.

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

const includesNumber = numbers.includes(3);

console.log(includesNumber);

이 예제에서는 숫자 배열에 3이 포함되어 있는지를 확인하고 있습니다. includes 함수를 사용하여 배열에 3이 있는지를 검사한 후, 결과를 콘솔에 출력합니다.

3.2 indexOf()

indexOf 함수는 배열에서 특정 요소의 인덱스를 찾습니다. 요소가 배열에 여러 개 존재할 경우, 첫 번째로 일치하는 요소의 인덱스를 반환합니다.

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

const index = numbers.indexOf(3);

console.log(index);

이 예제에서는 숫자 배열에서 3의 인덱스를 찾고 있습니다. indexOf 함수를 사용하여 배열에서 3을 찾은 후, 인덱스를 출력합니다.

3.3 find()

find 함수는 배열에서 지정된 조건을 만족하는 첫 번째 요소를 찾아 반환합니다.

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

const number = numbers.find(function(number) {
  return number > 3;
});

console.log(number);

이 예제에서는 숫자 배열에서 3보다 큰 첫 번째 요소를 찾고 있습니다. find 함수를 사용하여 배열을 반복하며, 조건을 만족하는 첫 번째 요소를 반환합니다.

4. 배열 변환

자바스크립트에는 배열을 다른 타입으로 변환하는 내장 함수들도 있습니다. 아래 예시에서는 가장 많이 사용되는 세 가지 함수를 살펴보겠습니다.

4.1 join()

join 함수는 배열의 모든 요소를 문자열로 변환하고, 변환된 요소들을 지정된 구분자로 연결합니다.

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

const result = numbers.join('-');

console.log(result);

이 예제에서는 숫자 배열의 요소들을 하이픈(-)으로 연결한 문자열을 생성하고 있습니다. join 함수를 사용하여 배열의 요소들을 하이픈으로 연결한 후, 결과를 콘솔에 출력합니다.

4.2 toString()

toString 함수는 배열의 모든 요소를 문자열로 변환합니다.

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

const result = numbers.toString();

console.log(result);

이 예제에서는 숫자 배열의 요소들을 문자열로 변환하고 있습니다. toString 함수를 사용하여 배열의 요소들을 문자열로 변환한 후, 결과를 콘솔에 출력합니다.

4.3 split()

split 함수는 문자열을 지정된 구분자를 기준으로 분할하여 배열로 반환합니다.

const str = '1-2-3-4-5';

const result = str.split('-');

console.log(result);

이 예제에서는 문자열을 하이픈(-)으로 분할하여 배열로 만들고 있습니다. split 함수를 사용하여 문자열을 하이픈으로 분할한 후, 결과를 콘솔에 출력합니다.

요약

이 블로그에서는 자바스크립트 배열의 내장 함수들과 각 함수의 예시를 다루었습니다. 배열을 반복하고 변형하며 검색하고 변환하는 방법을 배웠습니다. 아래의 내장 함수를 요약하면 다음과 같습니다:

forEach(): 배열의 각 요소에 대해 지정된 함수를 실행
map(): 배열의 각 요소에 대해 지정된 함수를 실행하고, 새로운 배열 반환
filter(): 배열의 요소 중 지정된 조건을 만족하는 요소만 추출하여 새로운 배열 반환
sort(): 배열의 요소를 정렬
reverse(): 배열의 요소를 역순으로 정렬
reduce(): 배열의 요소를 하나의 값으로 줄여 반환
includes(): 배열에 특정 요소가 포함되어 있는지 검사
indexOf(): 배열에서 특정 요소의 인덱스를 찾음
find(): 배열에서 지정된 조건을 만족하는 첫 번째 요소를 반환
join(): 배열의 모든 요소를 문자열로 변환하고, 구분자로 연결
toString(): 배열의 모든 요소를 문자열로 변환
split(): 문자열을 구분자를 기준으로 분할하여 배열 반환

이러한 내장 함수들은 배열을 다루는 작업에서 매우 유용합니다. 이 블로그를 통해 다양한 예시와 함께 각 함수의 사용법에 대해 배웠으니, 이제 자유롭게 자바스크립트 배열을 다룰 수 있을 것입니다.