자바스크립트 11. 배열메소드(2)

계속해서 메소드를 기록해보자!

첫 번째로 기록해볼 메소드는 forEach이다.

forEach는 반복문과 마찬가지고 반복적인 기능을 수행할 때 사용한다. 하지만 for문 처럼 초기화, 조건식, 증감문을 작성하지 않아도 된다.

let arr = [1, 2, 3, 4]; 

let result1 = [];
for (let i = 0; i < arr.length; i++) {
 return result1.push(arr[i])
};
console.log(result1); // [1, 2, 3, 4]

let result2 = [];
arr.forEach(function (el) {
 return result2.push(el)
});
console.log(result2); // [1, 2, 3, 4]

두개의 코드다 두개의 빈배열에 push를 사용해서 채워 넣는 코드를 작성해 보았다. forEach가 뭔가 for문보다 조금 간략하게 작성이 되는 느낌이 든다. (개 인 차 이 취 향 존 중)

 

 

두번째로는 filter이다. 

영어의 뜻 그대로 여과하고, 거르다의 의미처럼 주어지는 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환하게 된다. 코플릿을 풀 때 정말 중요하게 많이 쓰였다!

let obj = [ // 객체가 담겨 있는 배열을 선언한다.
    {name : 'kim', age : 21},
    {name : 'lee', age : 28},
    {name : 'park', age : 24},
    {name : 'choi', age : 29}
]; 

let overHalfFifty = obj.filter(function (el) { // 조건을 통과하지 못한 배열 요소는 그냥 건너 뛴다.
 return el.age > 25;
}):

console.log(overHalfFifty); // [{name : 'lee', age : 28}, {name : 'choi', age : 29}]

이렇게 조건을 나이가 25보다 넘는 사람들만 따로 배열로 반환을 하게 되었다.

 

 

세번째는 map이다.

map은 함수를 각각의 요소에 대해서 한번씩 순서대로 불러서, 그 함수의 반환값으로 새로운 배열을 만들게 된다.

let arr = [0, 1, 2, 3];
let doubleNum = arr.map(function (el) {
 return el * 2;
});
console.log(doubleNum); // [0, 2, 4, 6]

이 코드를 보면 함수는 배열의 요소에 2를 곱한 결과를 새로운 배열로 만들어서 보여주고 있다. 

 

 

네번째로는 reverse이다. 

얘도 뭔가 단어 뜻 그대로 뒤바꾸거나, 뒤집는다는 의미처럼 배열의 순서를 반전하게 된다. 즉 첫 번째 요소는 마지막 요소가 되고, 마지막 요소는 첫번째 요소가 된다.

let arr = ['1', 'e', 'n', '2'];
let result = arr.reverse();
console.log(result); // ['2', 'n', 'e', '1'];

이렇게 배열의 요소를 반전시킬 수 있는 메소드이다.

 

 

다섯번째는 sort이다. 

sort는 기본적으로 각 요소의 유니코드 값에 따라 자동으로 정렬된다. 기본 값은 오름차순이다. (sort는 기존의 배열 데이터가 변경되는 메소드이다.)

let arr = ['zip', 'apple', 'golf', 'dance'];
arr.sort(); // ['apple', 'dance', 'golf', 'zip']

유니코드 순서대로 배열에 있는 요소들이 문자를 정렬한 것을 볼 수 있다.

그럼 숫자인 경우에는 어떻게 될까?

let arr = [3, 17, 52, 11, 2, 475, 2222];
arr.sort(); // [11, 17, 2, 2222, 3, 475, 52]

뭔가 예상 하기로는 [2, 3 , 11, 17, 52, 475, 2222] 이렇게 예상했지만, 전혀 예상과 다른 배열을 반환한다. compareFunction을 작성하지 않으면 유니코드 순으로 무조건 정렬을 하기 때문이다! (유니코드 사전순배열이 되어 버린다.)

그렇다면 우리가 원하는 대소관계를 따져서 오름차순 내림차순으로 만들어 줄 수 있을까?

let arr = [3, 17, 52, 11, 2, 475, 2222];
arr.sort(function (el) {
 return a - b; // compareFuntion 오름차순
}); // [2, 3, 11, 17, 52, 475, 2222]

let arr = [3, 17, 52, 11, 2, 475, 2222];
arr.sort(function (el) {
 return b-a; // compareFuntion 내림차순
}); // [2222, 475, 52, 17, 11, 3, 2]

이런식으로 우리가 원하는 함수를 넣어주어서 조작을 해야한다!!! 

 

 

마지막으로 flat이다.

(군필만 알 수 있는 나라시.... 우린 그렇게 나라시 함수라 부르기로 했ㄷ..... 일본어 잔재에 은어라 쓰면 안됩니다! )

배열이 1차원 배열이어서 단순히 있으면 좋지만, 때로는 배열안의 배열, 또 배열안의 배열안의 배열 이렇게 깊이가 계속 늘어나는 배열도 볼 수 있다. 이때 이 메소드를 사용하면 평탄화 작업을 진행해서 지정한 차수의 하위차수에 속한 배열을 평평하게 만들어 준다.

const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]

const arr4 = [1, [2, [3, 4, [5], 6, [7, [8]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]

마지막 코드에는 Infinity라는 값을 입력하게 되면, 배열의 차수에 상관 없이 무조건 1차원 배열로 반환한다. 그리고 flat메소드는 배열의 구멍을 제거한다.

const arr5 = [1,2, , 4, 5];
arr5.flat() // [1, 2, 4, 5]

이런식으로 배열의 값이 비어 있다면, flat을 활용해서 비어있는 구멍을 제거한 값을 리턴하게 됩니다.

 

다음은 무엇을 기록해볼까