[자바스크립트] javascript array (자바스크립트 배열) 정리 2

최근 배열 위주로 코딩을 많이 해야하는 상황을 접하며 생각보다 모르고 있던 ES5 스펙의 Array 메서드들이 많이 있음을 알게 되었습니다. 

ECMA Script6의 새로운 스펙들이 하나 둘 최신 브라우저에 적용되고 있는 상황에서 기존 ES5에 이미 구현되어 있는 배열의 메서드들 조차도 제대로 파악하고 있지 못하는 사람들을 위해 for 문으로 돌리기 쉬운 몇 가지 메서드들을 정리해보겠습니다.

Array 객체에서 제공하고 있는, 배열 전체를 돌며 어떤 작업을 할 때 유용한 다양한 메소드들을 하나씩 살펴보도록 하겠습니다. 배열 작업을 할 때 for문이 먼저 생각나는 사람이라면 꼭 보시면 좋을 것 같습니다.

join()

.join()은 배열의 원소들을 연결하여 하나의 값으로 만듭니다.

arr 배열에 있는 원소들을 하나의 값으로 만듭니다. 원소들의 구분은 콤마(,)로 하는데요. 원소들의 구분을 다른 문자로 하려면 () 안에 원하는 문자를 넣습니다.

filter()

이번에 살펴볼 메소드는 filter 메소드입니다. 배열에서 특정 케이스만 필터링해 추출해서 새로운 배열로 만들고 싶을 때 매우 좋은 메소드입니다.

배열 전체를 돌 때, 요소마다 콜백 함수를 실행하여 이 콜백함수의 인자는 다른 모든 메소드와 동일한 순서의 인자를 갖습니다. 첫번째 인자는 현재 배열 요소의 값이고, 두번째 인자는 현재 배열요소의 위치입니다. 물론 0부터 시작하죠. 세번째 인자는 현재 돌고 있는 배열 자체를 가리킵니다.

map()

다음으로 살펴볼 메소드는 map 메소드입니다. 배열 전체를 돌며 배열 값을 사용해서 “또 다른 배열”을 만들고 싶을 때 매우 적합한 메소드입니다. 원본 배열은 건들지 않고 그 값들만을 활용해서 새로운 배열을 만들 필요가 있을 때 매우 유용합니다.

 

배열 전체를 돌 때, 요소마다 콜백 함수를 실행하여 이 콜백함수의 인자는 다른 모든 메소드와 동일한 순서의 인자를 갖습니다. 첫번째 인자는 현재 배열 요소의 값이고, 두번째 인자는 현재 배열요소의 위치입니다. 물론 0부터 시작하죠. 세번째 인자는 현재 돌고 있는 배열 자체를 가리킵니다.

 

메소드 수행 후 새로운 배열을 리턴합니다.

아래 예시를 참고하시면 이해하시기 쉬울겁니다.

forEach()

다음으로 살펴볼 메소드는 forEach 메소드입니다. 배열 전체를 돌며 해당 배열의 요소에 직접 어떤 작업을 수행하고 싶을 때 적합한 메소드입니다.

 

배열 전체를 돌 때, 요소마다 콜백 함수를 실행하여 이 콜백함수의 인자는 다른 모든 메소드와 동일한 순서의 인자를 갖습니다. 첫번째 인자는 현재 배열 요소의 값이고, 두번째 인자는 현재 배열요소의 위치입니다. 물론 0부터 시작하죠. 세번째 인자는 현재 돌고 있는 배열 자체를 가리킵니다.

 

메소드 수행 후 undefined 를 리턴합니다.

 

아래의 예를 천천히 살펴보면 forEach 메소드가 어떤식으로 동작하는지 알 수 있습니다.

some()

이번에 소개할 메소드는 some 메소드입니다. 배열 요소 중에서 하나라도 특정 조건을 만족하는지 알고 싶을 때 매우 적합한 메소드입니다.

배열 전체를 돌 때, 요소마다 콜백 함수를 실행하여 이 콜백함수의 인자는 다른 모든 메소드와 동일한 순서의 인자를 갖습니다. 첫번째 인자는 현재 배열 요소의 값이고, 두번째 인자는 현재 배열요소의 위치입니다. 물론 0부터 시작하죠. 세번째 인자는 현재 돌고 있는 배열 자체를 가리킵니다.

메소드 수행 중 콜백에서 한번이라도 true 값을 리턴하면 바로 메소드 수행을 중단하고 true를 리턴하며, 전체 요소를 다 돌때까지 콜백에서 true를 리턴하지 않으면 false를 리턴합니다.

아래의 예를 천천히 살펴보면 some 메소드가 어떤식으로 동작하는지 알 수 있습니다.

every()

이번에 소개할 메소드는 every 메소드입니다. 배열의 모든 요소가 특정 조건을 만족하는지 알고 싶을 때 매우 적합한 메소드입니다.

배열 전체를 돌 때, 요소마다 콜백 함수를 실행하여 이 콜백함수의 인자는 다른 모든 메소드와 동일한 순서의 인자를 갖습니다. 첫번째 인자는 현재 배열 요소의 값이고, 두번째 인자는 현재 배열요소의 위치입니다. 물론 0부터 시작하죠. 세번째 인자는 현재 돌고 있는 배열 자체를 가리킵니다.

메소드 수행 중 콜백에서 한번이라도 false 값을 리턴하면 바로 메소드를 중단하고 false를 리턴하며, 전체 요소를 다 돌때까지 콜백에서 false를 리턴하지 않으면 true를 리턴합니다. some 메소드와 유사하지만 반대의 기능을 하죠.

아래의 예를 천천히 살펴보면 every 메소드가 어떤식으로 동작하는지 알 수 있습니다.

reduce()

마지막으로 살펴볼 메소드는 reduce 메소드입니다. 배열의 요소들을 하나씩 돌며, 이전 콜백의 리턴값을 previous item으로 넘겨받아 어떤 작업을 수행하고 싶을 때 매우 적합한 메소드입니다.

배열 전체를 돌 때, 요소마다 콜백 함수를 실행하며 이 콜백함수의 인자는 다른 모든 메소드와 조금 다른 인자를 가지고 있습니다. 첫번째 인자는 이전 콜백 함수에서 리턴한 값이고, 두번째 인자는 현재 배열 요소의 값이고, 세번째 인자는 현재 배열요소의 위치(index)입니다. 물론 0부터 시작하죠. 네번째 인자는 현재 돌고 있는 배열 자체를 가리킵니다.

그리고 다른 메소드와 달리 콜백 함수 뒤에 인자를 하나 더 줄 수 있는데, 이 인자는 첫 콜백함수에 previous item으로 주입될 값입니다.

아래의 예를 천천히 살펴보면 reduce 메소드가 어떤식으로 동작하는지 알 수 있습니다.

지금까지 Array 객체에서 기본적으로 제공하고 있는 메소드들 중 잘 알려지지 않았지만 매우 유용하게 사용할 수 있는 메소드들에 대해서 알아보았습니다.