📖 [JS] 배열 변형 메서드

728x90

filter 메서드

기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환

let arr1 = [
	{name: "kim", bobby: "game"},
    {name: "serin", hobby: "game"},
    {name: "sam", hobby: "football"}
];

const gamePeople = arr1.filter((item) => {
	if(item.hobby === "game") return ture;
});

// const gamePeople = arr1.filter((item) => item.hobby === "game");

console.log(gamePeople); // >> (2) hobby:game을 가진 요소 출력

filter 메서드는 웹 서버를 개발 할 때, 특정 조건에 의해서 검색하는 기능이나,

카테고리별 필터 기능을 만드는데 사용됩니다.

map 메서드

map 메서드는 자주 사용하는 메서드입니다.

배열의 모든 요소를 순회하면서, 각각 콜백 함수를 실행하고

그 결과값들을 모아서 새로운 배열로 반환해주는 메서드입니다.

let arr2 = [1, 2, 3];

arr2.map((item, idx, arr) => {
	console.log(idx, item); >> 0 1 / 1 2 / 2 4
    return item * 2;

});

// 원본 배열의 값들을 변형한 새로운 배열을 생성할 수 있다.

const mapResult1 = arr2.map((item, idx, arr) => {});
console.log(mapResult1); >> [2, 4, 6]

이번에는 map 메서드를 좀 더 실용적으로 이용할 수 있는 사례를 알아봅시다.

map 메서드를 이용해서 arr1 배열에 있는 객체 값들에서 name property에 있는 name값들만 따로 뽑아서

새로운 배열로 추출하는 기능을 만들어볼 수 있습니다.

let arr1 = [
    {name: "kim", bobby: "game"},
    {name: "serin", hobby: "game"},
    {name: "sam", hobby: "football"}
];

const gamePeople = arr1.filter((item) => item.hobby === "game");
console.log(gamePeople);


let arr2 = [1, 2, 3];
const mapResult1 = arr2.map((item, idx, arr) => {
	return item * 2;
});

let names = arr1.map((item) => item.name);

let names 라는 변수를 만들고 arr1에서 map 메서드를 호출하고 똑같이 callback 함수를 전달한 다음,

item이라는 매개변수를 통해서 배열의 각 요소를 순회하면서 item의 name만 반환하도록 설정하였습니다.

이렇게 하면 arr1이라는 배열을 순회하면서 각각 item에 name property의 값들만 모아서 새로운 배열로

map 메서드가 반환을 시켜주게 됩니다.

sort 메서드

배열을 사전순으로 정렬하는 메서드

let arr3 = ["b", "a", "c"];
arr3.sort(); >> ['a','b','c']

만약 숫자값으로 이루어진 배열이면 sort() 메서드가 정상적으로 적용이 되지 않는다.

그 이유는 숫자의 대소 비교가 아니라 '사전 순'으로 정렬하기 떄문입니다.

숫자의 대소 관계를 기준으로 적용하고 싶은 경우에는

sort() 메서드르 호출하면서 비교 기준을 설정하는 콜백함수를 사용해야한다.

let arr3 = [10, 3, 5];
arr3.sort((a, b) => {
	if(a>b) { // b가 a 앞에 와라  
    return 1; -> b, a 배치
    } else if (a < b){ // a가 b 앞에 와라
    return -1; // -> a, b 배치
    } else { // 두 값의 자리를 바꾸지 마라
    return 0; // a, b 
    }
});

console.log(arr3);

join 메서드

배열의 모든 요소를 하나의 문자열로 합쳐서 반환하는 메서드

let arr5 = ["hi", "im", "kim"];
const joined = arr5.join(""); // 소괄호 안에 구분자를 넣을 수 있습니다.
console.log(joined);