1. map

어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때가 있다. 그 때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공 Array.map() 메소드를 사용하면 된다. Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해준다. 다시 말하자면 콜백 함수는 배열의 각 요소에 실행된다.

아래의 예시코드를 보면

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

이제 이 배열에 각 요소에 2를 곱해야한다고 했을때 for문을 사용할수도 있지만 Array.map()메소드를 사용하면 동일한 결과를 얻을 수 있다.

// for문
let arr = [1,2,3,4];
for(let i = 0; i<arr.length; i++){
	arr[i] * 2;
}

console.log(arr); // [2,4,6,8]


// map 메소드
let arr = [1,2,3,4];
let newArr = arr.map(function(num){
	return num * 2;
});

console.log(newArr); // [2, 4, 6, 8]

1-1 객체 배열에서 map()을 사용하는 방법

다음과 같이 map() 메소드를 사용하여 배열을 순환하며 처리해서 company 및 carName 값을 결합할 수 있다.

let cars = [
  {company : "kia", carName: "k5"},
  {company : "hyundai", carName: "sonata"},
  {company : "ssangyong", carName: "tivoli"}
];

let newArr = cars.map(function(element){
    return `${element.company} ${element.carName}`;
})

console.log(newArr); // ["kia k5", "hyundai sonata", "ssangyong tivoli"]

2. filter

filter는 해석 그대로 걸러주는 역할을 하는데, 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result); // Array ["exuberant", "destruction", "present"]

filter를 사용하는 방법은 callback함수를 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 Boolean 값인 true 또는 false 값을 반환하는 함수를 등록하는 것이다.

const numbers = [1];

numbers.filter((number, index, source) => {

    // number: 요소값
    // index: source에서 요소의 index
    // source: 순회하는 대상

    console.log(number);
    // 1

    console.log(index);
    // 0

    console.log(source);
    // [1]

    return number > 3;
});

filter는 원시적인 값만 사용할 수 있는 것이 아니라, 객체를 사용해 true를 판별할 수 있습니다. 즉 filter는 javascript에서 사용할 수 있는 모든 형태의 값을 참(true) 또는 거짓(false)으로 분류해 원하는 조건을 만족하는 새로운 배열을 반환할 수 있다. 또한 다른 함수와의 조합성도 좋아 map, reduce와 같은 다른 함수와 함께 자주 쓰인다. 예를 들어 위의 코드는 "300000 이상을 가진 사람들은?"이지만 map을 활용하면 "300000 이상을 가진 사람들의 이름은?"도 만들 수 있다.

const guys = [
    { name: 'YD', money: 500000 },
    { name: 'Bill', money: 400000 },
    { name: 'Andy', money: 300000 },
    { name: 'Roky', money: 200000 }
];

const rich = guys.filter(man => man.money > 300000);

console.log(rich);
// [{name: "YD", money: 500000}], [{name: "Bill", money: 400000}]
//fliter 메소드만 이용하여 300000 이상을 가진 사람들만 구함
---------------------------------------------------------------------------------------------
const guys = [
    { name: 'YD', money: 500000 },
    { name: 'Bill', money: 400000 },
    { name: 'Andy', money: 300000 },
    { name: 'Roky', money: 200000 }
];

const richNames = guys.filter(man => man.money > 300000)
    .map(man => man.name)

console.log(richNames);
// ["YD", "Bill"]
// map 메소드와 조합해서 사용하여 300000 이상을 가진 사람들의 이름만 구함

3. splice

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months); // > Array ["Jan", "Feb", "March", "April", "June"]

months.splice(3, 2, 'May');
console.log(months); // > Array ["Jan", "Feb", "March", "May"]

  구문 : array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start
배열의 변경을 시작할 인덱스이다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다. 음수인 경우 배열의 끝에서부터 요소를 세어나간다

deleteCount
배열에서 제거할 요소의 수이다. deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거한다. deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다. 이 때는 최소한 하나의 새로운 요소를 지정해야 한다.

item1, item2, ...
배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.

아래 예시 코드를 보고 다시한번 알아보도록 하겠다.

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가


var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);

// myFish is ["parrot", "anemone", "sturgeon"]
//2번 인덱스에서 두 개 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);

// myFish is ["angel", "clown", "sturgeon"]
//-2번 인덱스에서 한 개 요소 제거

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// myFish is ["angel", "clown"]
//2번 인덱스를 포함해서 이후의 모든 요소 제거