JavaScript 배열 메소드 사용하는 방법: 반복 메소드

소개

JavaScript에서 배열 데이터 유형은 요소 목록으로 구성됩니다. JavaScript 개발자가 배열을 다루기 위해 사용할 수 있는 많은 유용한 내장 메서드들이 있습니다. 원본 배열을 수정하는 메서드를 변경자(mutator) 메서드라고 하고, 새로운 값을 반환하거나 표현하는 메서드를 접근자(accessor) 메서드라고 합니다.

배열 메서드의 세 번째 유형인 반복(iteration) 메서드는 배열의 각 항목에 대해 하나씩 작동하는 메서드입니다. 이러한 메서드들은 루프와 밀접하게 관련되어 있습니다. 이 튜토리얼에서는 반복 메서드에 중점을 둘 것입니다.

이 튜토리얼을 최대한 활용하기 위해서는 배열 생성, 인덱싱, 수정 및 루핑에 대한 몇 가지 이해가 필요합니다. 이 내용은 JavaScript에서 배열 이해하기 튜토리얼에서 볼 수 있습니다.

이 자습서에서는 배열을 순환하고 각 항목에 함수를 수행하며 배열의 원하는 결과를 필터링하고 배열 항목을 단일 값으로 줄이고 값을 또는 인덱스를 찾기 위해 반복 방법을 사용할 것입니다.

화살표 함수 이해하기

이 자습서 전반에 걸쳐 많은 예제에서는 등호 다음에 더 큰 부등호로 표시되는 JavaScript 화살표 함수 표현식을 사용할 것입니다: =>.

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // 실행할 코드
}

example();

작성 시점에서의 JavaScript 최신 버전은 다음 구문으로 화살표 함수의 사용을 허용합니다:

var example = () => {
  // 실행할 코드
}

example();

어느 경우에도 괄호에 매개 변수를 포함할 수 있습니다. 매개 변수가 하나만 있는 경우 괄호를 생략할 수 있습니다. 다음과 같이:

var example = parameter1 => {
  // 실행할 코드
}

이 자습서의 예제를 통해 화살표 함수 구문을 사용할 것입니다. JavaScript에서 함수에 대해 더 읽고 이해하려면 Mozilla Developer Network의 함수 참조를 읽으십시오.

forEach()

forEach() 메서드는 배열의 각 요소마다 함수를 호출합니다.

다음 배열을 fish 변수에 할당하겠습니다:

let fish = [ "piranha", "barracuda", "cod", "eel" ];

forEach()를 사용하여 fish 배열의 각 항목을 콘솔에 인쇄할 수 있습니다.

// 배열의 각 항목을 출력합니다
fish.forEach(individualFish => {
	console.log(individualFish);
})

이렇게 하면 다음 출력을 받게 됩니다:

Output
piranha
barracuda
cod
eel

이를 수행하는 다른 방법은 for 루프 키워드를 사용하고 배열의 length 속성과 비교하는 것입니다.

// 배열의 길이만큼 루프를 실행합니다
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

위의 코드는 forEach() 메서드를 사용하는 것과 동일한 출력을 생성합니다. 배열과 함께 사용하기 위해 명시적으로 설계된 반복 방법으로서, 특히 이 특정 작업에 대해 forEach()는 더 간결하고 직관적입니다.

map()

map() 메서드는 배열의 각 요소에 대한 함수 호출 결과로 새 배열을 생성합니다.

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// 배열의 각 항목을 출력합니다.
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

map()을 사용하여 배열의 각 항목의 값을 변경할 수도 있습니다. 이를 보여주기 위해 fish 배열의 각 항목 끝에 s를 추가하여 각 단어를 복수로 만들겠습니다.

// fish 배열의 모든 항목을 복수로 만듭니다.
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

원래의 fish 변수는 변경되지 않았지만, pluralFish는 이제 원래 변수의 수정된 버전을 포함합니다.

filter()

filter() 메서드는 주어진 테스트의 결과를 통과한 요소로 새 배열을 생성합니다.

우리는 특정 문자로 시작하는 항목만 포함하는 새로운 배열을 반환하기 위해 filter()를 사용할 수 있습니다. 이를 위해 우리는 배열의 각 문자열 항목에서 첫 번째 항목(또는 문자)을 호출하기 위해 문자열 색인을 활용할 수 있습니다.

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// "s"로 시작하는 모든 항목을 새 리스트로 필터링
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

배열에서 0 인덱스에서 s가 있는지 테스트하고 결과를 새 변수에 할당했습니다.

filter()는 반복 방법이며 원래 배열을 변형시키지 않습니다.

reduce()

reduce() 메소드는 배열을 단일 값으로 줄입니다.

이는 주로 숫자와 함께 사용되며, 배열에서 모든 숫자의 합을 찾는 등의 경우에 일반적으로 볼 수 있습니다.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// 모든 숫자 값의 합 구하기
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

reduce()는 문자열 및 다른 데이터 유형과 함께 사용할 수도 있습니다. reduce()에 의해 반환되는 값은 숫자, 문자열, 배열 또는 다른 데이터 유형일 수 있습니다. reduce()는 원래 배열을 변형시키지 않는 반복 방법입니다.

find()

find() 메서드는 주어진 테스트를 통과하는 배열의 첫 번째 값을 반환합니다.

예를 들어, 우리는 해양 생물의 배열을 생성할 것입니다.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

그런 다음 배열 내의 어떤 생물이 조류류인지를 테스트하기 위해 find() 메서드를 사용할 것입니다.

// 주어진 값이 조류류인지 확인합니다.
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

isCephalopod() 함수에서 테스트를 통과한 첫 번째 항목은 문어이므로, 이 값이 반환되는 첫 번째 값입니다.

find() 메서드는 많은 값을 포함하는 배열과 작업하는 데 도움이 될 수 있습니다.

findIndex()

findIndex() 메서드는 주어진 테스트를 통과하는 배열의 첫 번째 인덱스를 반환합니다.

find() 메서드의 seaCreatures 예제를 사용할 수 있습니다.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

isCephalopod 테스트를 사용하여, 첫 번째 일치 항목의 값 대신 인덱스 번호를 찾을 것입니다.

// 주어진 값이 조류류인지 확인합니다.
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

문어는 테스트와 일치하는 첫 번째 항목이며, 인덱스는 1이므로 인덱스 번호가 반환됩니다.

테스트가 만족되지 않으면 findIndex()는 -1을 반환합니다.

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

findIndex() 메서드는 많은 항목을 포함하는 배열을 다룰 때 특히 유용합니다.

결론

이 튜토리얼에서는 JavaScript의 주요 내장 반복 배열 메서드를 검토했습니다. 반복 메서드는 배열의 모든 항목에 작용하며 종종 새로운 기능을 수행합니다. 배열을 반복하고 각 항목의 값을 변경하고 배열을 필터링하고 축소하며 값을 찾고 인덱스를 찾는 방법에 대해 살펴보았습니다.

배열의 기본을 검토하려면 Javascript에서 배열 이해하기를 참조하십시오. 자바 스크립트 구문에 대한 자세한 정보는 “자바 스크립트에서 구문과 코드 구조 이해하기” 튜토리얼을 참조하십시오.