Returing과 Mutating 차이점 (정리 중)

returning과 mutating의 차이를 보자. 아래의 push 메소드는 기존의 배열을 mutating 하고, 값도 return한다.

let pets = [
    {name: "Meowsalot", species: "cat", age: 2},
  {name: "Barksalot", species: "dog", age: 3},
  {name: "Purssloud", species: "cat", age: 8}
]

pets.push({name: "Puppster", species: "dog", age: 1})

console.log(pets);

returing은 새로운 배열을 반환하는 것이고 mutating은 기존의 배열을 변화시키거나 수정하는 것이다.

 

그러나 push와 다르게 mutating하지 않는 메소드가 있다. 리턴만하는 메소드 map 과 filter가 그것이다. map과 filter는 기존의 배열을 변화시키지 않고 새로운 배열을 리턴한다.

map

map은 각 배열 요소를 차례로 반환하는 고차 함수다.

let pets = [
    {name: "Meowsalot", species: "cat", age: 2},
  {name: "Barksalot", species: "dog", age: 3},
  {name: "Purssloud", species: "cat", age: 8}
]

pets.push({name: "Puppster", species: "dog", age: 1})

let ourPets = pets.map(nameOnly);

function nameOnly(x) {
    return x.name;
}

console.log(ourPets);

fliter

filter는 map과 유사한 고차함수로 배열을 돌지만 true 혹은 false 를 값에 따라 true일 경우에는 이를 배열에 추가 false 일 경우에는 추가하지 않는다는 차이가 있다.

let pets = [
    {name: "Meowsalot", species: "cat", age: 2},
  {name: "Barksalot", species: "dog", age: 3},
  {name: "Purssloud", species: "cat", age: 8}
]

pets.push({name: "Puppster", species: "dog", age: 1})

function nameOnly(x) {
    return x.name;
}

let dogs = pets.filter(dogsOnly);

function dogsOnly(y) {
  return y.species == "dog" 
}

let babyDogs = pets.filter(dogsOnly).filter(babyDogsOnly).map(nameOnly)

function babyDogsOnly(z) {
  return (z.age < 3)
}

console.log(dogs);
console.log(babyDogs);