Array 함수 #1. 반복문
1. forEach와 map
let input = [0,1,2,3,4];
input.forEach(() => { console.log("forEach. 5번 출력됨.") });
input.map(() => { console.log("map. 5번 출력됨.") });forEach와 map은 매개변수로 콜백 함수 하나를 받는다.
그리고 배열을 순회하면서 배열의 원소들을 탐색할 때마다 (원소를 마주할 때마다) 해당 함수를 실행한다.
let input = ['a','b','c','d'];
input.forEach((x, y, z) => {
console.log("value : " + x);
console.log("index : " + y);
console.log("array : " + z);
});
input.map((x, y, z) => {
console.log("value : " + x);
console.log("index : " + y);
console.log("array : " + z);
});forEach와 map이 실행할 콜백 함수는 세 개의 인자를 가질 수 있다.
첫 번째는 탐색한 배열 원소의 값, 두 번째는 탐색한 배열 원소의 인덱스, 세 번째는 탐색하고 있는 배열 자체를 의미한다.
그래서 로그를 확인하면 위와 같이 출력된 것을 확인할 수 있다.
여기까지는 forEach와 map이 동일한 기능을 하고 있음을 알 수 있는데, 그렇다면 차이점은 뭘까?
let input = [0,1,2,3,4];
let output1 = input.forEach(x => { return x + 3 }); // undefined
let output2 = input.map(x => { return x + 3 } ); // [3,4,5,6,7]map과 forEach와 다른 점. map은 탐색한 배열 원소를 저장할 수 있다는 것이다.
map은 콜백 함수의 return 결과값들로 새로운 배열을 구성한 뒤 최종적으로 리턴한다.
forEach와 map 함수의 원형을 보면 바로 알 수 있다.
어떤 배열을 가공해서 새로운 배열을 리턴 받고자 한다면 map을 쓰고,
새로운 배열을 리턴받을 필요 없이, 어떤 작업을 실행하는데 배열을 참조만 하는 상황이면 forEach를 쓰면 될 것 같다.
2. for vs forEach와 map
forEach와 map을 쓰는 가장 큰 이유는 for에 비해서 코드량을 줄일 수 있고 가독성을 향상시킬 수 있기 때문일 것이다.
그리고 for문을 사용하면 순회를 시작할 인덱스, 순회 종료 조건을 정의해야 하는데 이 부분에서 실수가 나올 수 있다.
(예를 들어, i < 10과 i <= 10 에서 실수할 가능성)
다만 forEach와 map은 배열의 모든 원소를 순회할 때까지 종료되지 않으며
for문에서는 사용할 수 있었던 break와 continue를 사용할 수 없다는 제한이 있다.
3. forEach에서 어떻게 하면 순회를 중단할 수 있을까?
(1) forEach에서 return 쓰기
let input = [0,1,2,3,4];
let numbers = [];
input.forEach(x => {
if (x < 2) numbers.push(x);
else return;
});
console.log(numbers);위의 코드를 실행하면 로그는 [0,1]이 찍히는데 예상한 대로 찍혔다고 볼 수 있다.
그렇다면 return으로 break를 완벽히 대체할 수 있을까? 정답은 아니다.
let input = [0,1,2,3,4];
let numbers = [];
input.forEach(x => {
if (x == 2) return;
numbers.push(x);
});
console.log(numbers);위의 코드는 [0,1]이 아닌 [0,1,3,4] 로그를 출력한다.
그렇다. forEach에서의 return은 break가 아닌 continue와 같은 기능을 한다고 볼 수 있다.
(2) try/catch 추가 정의하기
let input = [0,1,2,3,4];
let loopBreak = new Error('Break');
try {
input.forEach(x => {
if (x == 2) throw loopBreak;
});
}
catch(e) {
if (e != loopBreak) throw loopBreak;
}이 방법은 정말 억지로 break를 대체하기 위해 try/catch를 쓰는 모양이고 코드 가독성에서도 좋아 보이지 않는다.
4. some
forEach에서 순회를 종료하는 방법에 대해 구글링을 하다 보면 some으로 대체할 수 있다는 얘기들도 있다.
Array 메서드 #2에서 설명할 함수라 여기서는 짧게 정리하고 가면,
some은 배열을 순회하면서 특정 조건을 만족하는 원소가 존재하는지 확인할 수 있는 함수다.
let input = [0,1,2,3,4];
if (input.some(x => { if(x % 2 == 0) return true })){
console.log("짝수 있음")
}보통은 이런 식으로 사용할 수 있는데, some 함수는 첫 번째 return true에서 배열의 순회가 종료되는 특징이 있다.
let input = [0,1,2,3,4];
let numbers = [];
input.some(x => {
if (x == 2) return true;
numbers.push(x);
});
console.log(numbers);forEach에서 return을 사용하는 예시 코드에서 forEach를 some으로, return을 return true로 바꿨다.
이 코드의 결과는 성공적으로 [0,1]이 출력된다. return true가 break의 역할을 했다고 볼 수 있다.
하지만, 그렇다고 해서 forEach 대신 some을 쓰는 게 맞을까?
some이라는 함수 자체는 배열에 특정 조건을 만족하는 원소가 있는지 확인하는 함수로서의 인식이 일반적이다.
위의 코드는 numbers에 어떤 원소들이 담기는지 확인하는 것에 좀 더 포커싱이 맞춰져 있는 것 같다.
어떤 함수를 일반적이지 않은 의도로 사용하는 것도 코드 가독성을 해치는 큰 요인이다.
5. for-of
let input = [0,1,2,3,4];
let numbers = [];
for (const x of input){
if (x == 2) break;
numbers.push(x);
}
console.log(numbers);for-of 는 ES6에 추가된 비교적 최신 문법이다. (for가 ES1, forEach가 ES5에 추가되었다)
생김새는 forEach와 비슷하면서, 그 안에서 for문처럼 break와 continue를 자유롭게 사용할 수 있다.
forEach는 세 개의 인자(원소의 값, 원소의 인덱스, 배열 전체)를 이용해 콜백 함수를 정의할 수 있었는데, for-of 에서도 가능하다.
let input = ['a','b','c','d'];
for (const x of input) console.log(x); // a,b,c,d
for (const x of input.keys()) console.log(x); // 0,1,2,3
for (const [key, value] of input.entries()) console.log(key, value); // 0 a, 1 b, 2 c, 3 dfor-of 문법은 위 처럼 사용할 수 있다.
단점이라면 타입스크립트 타겟 버전이 ES6 이전이라면 위 코드를 사용할 수 없다.
tsconfig.json 파일을 열어서 compilerOptions에 "downlevelIteration": true를 추가해줘야한다.
알다시피 타입스크립트에서 작성한 코드는 컴파일시 자바스크립트로 변환이 되는데,
forEach, map, some 등의 함수는 거의 원문 그대로 변환이 되는 반면에
위의 for-of 코드는 굉장히 많은 양의 코드로 변환이 된다.
var input = ['a', 'b', 'c', 'd'];
try {
for (var input_1 = __values(input), input_1_1 = input_1.next(); !input_1_1.done; input_1_1 = input_1.next()) {
var x = input_1_1.value;
console.log(x);
} // a,b,c,d
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (input_1_1 && !input_1_1.done && (_a = input_1.return)) _a.call(input_1);
}
finally { if (e_1) throw e_1.error; }
}
try {
for (var _d = __values(input.keys()), _e = _d.next(); !_e.done; _e = _d.next()) {
var x = _e.value;
console.log(x);
} // 0,1,2,3
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
}
finally { if (e_2) throw e_2.error; }
}
try {
for (var _f = __values(input.entries()), _g = _f.next(); !_g.done; _g = _f.next()) {
var _h = __read(_g.value, 2), key = _h[0], value = _h[1];
console.log(key, value);
} // 0 a, 1 b, 2 c, 3 d
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_g && !_g.done && (_c = _f.return)) _c.call(_f);
}
finally { if (e_3) throw e_3.error; }
}실제로 확인해보면 타입스크립트에서 작성한 위의 4줄의 코드가 자바스크립트로 위와 같이 변환된다.
(끔찍)
결론은, forEach와 map이 아무리 for에 비해 코드를 짧게 쓸 수 있고 가독성이 좋더라도
for문의 강력한 break, continue 기능을 대체하기 어렵기 때문에 break와 continue를 사용해야 하는 상황에는 for문을 쓰는 것이 적절하다.