[JavaScript] 자바스크립트의 배열 순회 방법 종류/특징

이번 포스트는 반복문 자체에 대한 정리가 아닌 '배열 순회'에만 초점을 두어 모든 반복문을 언급하지는 않는다.

 

 

배열에서 특정 값을 찾기 위해, 또는 배열 데이터를 가공하기 위해 배열을 순회해야한다.

 

순회하는 방법에는 여러가지가 있는데, 평소에는 for 또는 forEach만을 사용했었다가, reduce를 비롯한 여러 다른 Functional하게 사용할 수 있는 메소드들이 있어서 자세히 들여다 보려고 한다.

 

---

1. for

배열 순회에 있어 가장 기본적인 방법이라고 할 수 있다.

const array = [1, 2, 3, 4];
for(var i = 0; i < array.length; i++) {
	// Do something!
}

보통 배열의 0에서부터 length만큼 index를 증가 또는 감소 시키면서 배열을 순회한다.

이 방법만 이용하더라도 거의 모든 방식의 배열 순회가 가능하다.

 

 

---

2. for of (+  for in)

for of 문은 ES6에서 추가된 컬렉션 전용 반복문이다. for of를 사용하기 위해서는 컬렉션 객체가 Symbol.iterator 속성을 가지고 있어야한다.

var iterable = [1, 2, 3];
for(var value of iterable) {
	// Do something!
}

 

추가로 오브젝트의 속성을 순회하는 for in 문이 있는데, 배열의 순회를 중점적으로 따져보는 포스트이니 따로 구분해서 적지는 않고 for of와 함께 기재했다.

 

for in에 대해 간단하게 알아보자면, 모든 객체에 대해 사용이 가능하고, 각 property의 key를 순회한다는 것이다. 그리고 순회하는 대상 property들은 enumerable이 true로 셋팅된 열거형 속성들이 해당된다. 내장 메소드를 비롯한 내장 프로퍼티들은 비 열거형이라서 반복되지 않는다고 한다.

var obj = { a: 1, b: 2, c: 3};
for(var key in obj) {
	// Do something!
}

---

3. forEach

다음은 forEach다. Array 타입의 내장 함수이므로 Array 타입에서만 사용할 수 있다. 배열의 요소를 하나씩 순회하면서 callback 함수를 수행한다.

const array = [1, 2, 3, 4];
const callback = (value, index, array) => {
	// Do something!
}

array.forEach(callback);

callback 함수의 인자로는 현재 값(value), 현재 인덱스(index), 그리고 전체 배열(array)이 넘어온다.

forEach의 특징은 return이 없다는 것이다. break를 할 수 없다는 것인데, 편법으로 return false를 이용하기도 한다.

리턴이 없으니 false라는 값이 리턴되지는 않고 그저 callback 함수를 끝내는 용도, 하지만 어쨌든 배열을 끝까지 순회하기는 한다.

 

---

4. reduce

오늘 포스트를 적겠다고 생각하게 된 이유중 하나가 reduce에 대해 정리하기 위해서였다.

reduce 는 두번째 매개변수인 초기 값에서부터 각 콜백 함수가 return하는 값이 다음 callback 함수의 previousValue로 전달된다. 마지막 callback 함수의 return이 reduce 함수의 return value가 된다.

const array = [1, 2, 3]
const callback = (prev, current, currentIndex, array) => {
	return prev + current; // 값 누적
}

const resultOfReduce = array.reduce(callback, initValue);
console.log(resultOfReduce); //  6 출력(1 + 2 + 3)

reduce는 왼쪽에서 오른쪽 방향으로 진행하고 역순으로 진행을 원한다면 reduceRight 함수를 이용하면 된다.

 

5. every, some, find

이번에 언급할 메소드들은 배열을 검사하는 용도로 사용한다.

 

every는 이름 그대로 배열의 모든 요소가 판별식에 대해 참인지 여부를 반환한다.

callback 함수는 할당된 값이 있는 인덱스 에서만 실행되며, 빈 배열에서 호출할 경우에는 항상 true를 반환한다.

const array = [1, 2, 3, 4];
const array2 = [1, 2, 3, 'a'];
const empty = [];

const isNumber = (value) => { typeof(value) == 'number' };

array.every(isNumber); // true
array2.every(isNumber); // false
empty.every(isNumber); // 빈 배열은 항상 true

 

some은 배열의 한 요소라도 판별식에 대해 참인지 여부를 반환한다.

빈 배열에서 호출하는 경우 무조건 false를 반환한다.

array.some(isNumber); // true
array2.some(isNumber); // true
empty.some(isNumber); // 빈 배열은 항상 false

 

find는 판별 함수를 만족하는 첫 번째 요소의 값 또는 undefined(만족하지 않을 경우)를 반환한다.

findIndex는 판별 함수를 만족하는 첫 번째 요소의 인덱스 또는 undefined를 반환한다.  

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);
console.log(found); // 12

 

정렬을 위한 sort 함수는 다른 포스트에서 다뤄볼 예정이다.