ES5 Array method

자바와 자바스크립트의 관계는 햄과 햄버거, 인도와 인도네시아, 사자와 바다사자 같은 존재라 처음 접하는 사람들은 두 언어가 비슷할거란 기대를 하게되지만, 일부 문법외엔 완전히 다른 언어라는 사실때문에 멘붕에 빠지게된다. 하지만 오늘 포스팅할 내용은 그래도 비슷한 문법덕을 톡톡히 볼 수 있는 내용이니 그래도 좀 가볍게 볼 수 있을 것 같다.

1. Array in JavaScript

Array API에 들어가기전에 간략하게 JavaScript의 Array에 대해서 알아보고 가자. Java의 배열은 물리적인 메모리를 순차적으로 할당하게된다. 동적인 크기의 변경은 허용되지 않으며 물리적으로 순차적 할당을 하기때문에 인덱스로 값을 찾아가는 랜덤 액세스(Random Access) 방식에서 탁월한 성능을 보장한다. 다만 JavaScript의 배열은 Linked List 형태로 구현되어있고 사이즈 변경도 얼마든지 가능하다. 특히나 존재하지않는 인덱스에 엑세스를 하게되어도 예외를 뱉지않는 관대함을 보여주게 되는데, 이런 관대함은 많은 정적언어 개발자들이 JavaScript를 혐오하게되는 원인이 되기도 한다.

이외에도 JavaScript 의 배열은 shift, unshift, pop, push 등의 API를 기본적으로 제공해주어 편리하게 자료구조로 이용할 수 있다.

2. ES5에 추가된 method들

이번에 알아볼 메서드들은 ES5부터 추가된 Array의 메서드들이다. EcmaScript 2015(ES6) 이상은 아직 지원하는 브라우저가 많지 않고, 문법 자체가 크게 변하기때문에 러닝 커브(learning curve)도 가파르다. ES5에 추가된 유용한 문법들도 잘 모르고 사용하지 못하는 경우가 많기때문에 이번 포스팅에선 ES5를 기준으로 포스팅한다. 특히나 ES5에 추가된 Array 메서드들은 사용법부터 메서드 명칭까지 Java8의 Stream API와 유사한 부분이 많아 Java8을 공부하거나, ES5를 공부했다면 반대편도 손쉽게 익힐 수 있을 것 이다. 1+1까진 안되더라도 1+0.7정도는 될 수 있을거라 예상한다.

2-1. Array.prototype.filter

* 반복문을 내부 반복으로 숨겨 배열을 필터링할때 사용함

* Java Stream의 filter와 동일

* stream과 한가지 다른점은 stream은 중간 연산이라는것이 존재했지만 자바스크립트엔 그런거없음.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter(function(num, idx){
    return num % 2 == 0;
});

2-2. Array.prototype.map

* 반복문을 내부 반복으로 숨겨 배열 요소를 변환할때 사용함

* Java Stream의 map와 동일

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function(num, idx){
    return num * 2;
});

2-3. Array.prototype.forEach

* 반복문을 내부 반복으로 숨겨 배열 요소를 순회할때 사용함

* Java Stream의 forEach와 동일

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].forEach(function(num, idx){
    console.log(num);
});

2-4. Array.prototype.some

* 반복문을 내부 반복으로 숨겨 배열 요소중 하나라도 만족하는게 있는지 확인

* Java Stream의 anyMatch와 동일

* stream과 마찬가지로 short curcuit 최적화 지원

var result = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].some(function(num, idx){
    return num === 3;
});

2-5. Array.prototype.every

* 반복문을 내부 반복으로 숨겨 배열 요소 전부가 만족하는지 확인

* Java Stream의 allMatch와 동일

var result = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].every(function(num, idx){
    return num < 20;
});

2-6. Array.prototype.reduce

* 배열 요소들의 결과값을 뽑아낼때 사용

* java stream의 reduce와 유사

var result = [10, 20, 30, 40, 50].reduce(function(num1, num2){
    return num1 + num2;
}, 10);

2-7. Array.prototype.reduceRight

* reduce로 값을 가져올때 역순으로 가져온다.

var result = [10, 20, 30, 40, 50].reduceRight(function(num1, num2){
    return num1 - num2;
});

2-8. Array.prototype.indexOf

* 인자로 전달된 요소가 있는 인덱스를 반환한다. 요소가 없으면 -1을 반환한다.

var result = [10, 20, 30, 40, 50].indexOf(10);

2-9. Array.prototype.lastIndexOf

* 요소가 존재하는 마지막 인덱스를 반환한다. 요소가 없으면 -1을 반환한다.

var result = [10, 20, 30, 40, 50].lastIndexOf(10);