filter(), map() / spread

📌 filter()

filter는 배열에서 조건을 주고, 조건이 참인 요소들을 모아 새로운 배열로 반환

❗️ 하지만 중복값을 제거해주지는 않는다

const student = [
  {name: "뚱이", age: 5},
  {name: "스폰지밥",age: 4},
  {name: "다람이",age: 6},
  {name: "집게사장",age: 10}
]
const result = student.filter((con,idx,arr) => con.age>4 && idx>1)	
// 다람이, 집게사장

filter() ()안에는 순서대로 (요소, 인덱스, 배열) => (필터조건) 이 들어간다.

❗️()안 (요소, 인덱스, 배열)의 모든 요소는 필수가 아니고 찾으려는 조건에 따라 다르다.

위의 예시는 result에 age가 4보다 높고 indexNumber가 1보다 큰 배열의 값만 추출하여 넣어 준것.

📌 map()

map 은 함수를 사용해 배열내의 각각의 요소에 대해 한번씩 순서대로 호출해 그 함수의 반환값으로 새로운 배열로 반환

const student = [
  {name: "뚱이", age: 5},
  {name: "스폰지밥",age: 4},
  {name: "다람이",age: 6},
  {name: "집게사장",age: 10}
]
const resultName = student.map((con,idx,arr)=>`${con.name} 씨`)
// ["뚱이 씨", "스폰지밥 씨", "다람이 씨", "집게사장 씨"]
const resultAge = student.map((con,idx,arr)=>`${con.age}세`)
// ["5세", "4세", "6세", "10세"]

위의 예시에서는 이름 뒤에 "~씨"를 붙여 이름만들 뽑아 resultName 에 넣어주었고
나이만 뽑아서 나이 뒤에 "~세"를 붙여 resultAge 에 넣어주었다

📌 filter,map 혼용

filter 와 map 을 같이 쓰면 위의 예시에서 다람이와 집게사장에게만 "~씨", "~세"를 붙여주는것이 가능하다.

const student = [
  {name: "뚱이", age: 5},
  {name: "스폰지밥",age: 4},
  {name: "다람이",age: 6},
  {name: "집게사장",age: 10}
]
student.filter((con,idx,arr) => con.age>4 && idx>1).map((con,idx,arr)=>`${con.name} 씨`)
// ["다람이 씨", "집게사장 씨"]
student.filter((con,idx,arr) => con.age>4 && idx>1).map((con,idx,arr)=>`${con.age}세`)
// ["6세","10세"]

📌 spread

위에서 사용한 예제들은 특정 값만을 뽑아 새로운 배열로 만들어 주는것이였는데, spread를 사용하면 기존 배열형태를 유지하며 뽑아낼 수 있다

student.filter((con,idx,arr) => con.age>4 && idx>1).map(con => {
  return {
	...con,
  	name: con.name+' 씨'
	}
})

// [{name:"다람이 씨", age:6 }, {name:"집게사장 씨", age:10 }]

spread 란

spread 는 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리해준다

따라서 연결이나 복사 등의 용도로 사용하기 좋다

예시를 들자면,

let arr = [1,2,3,4,5]
let arr2 = [...arr,6,7,8,9,10]
// arr2에는 [1,2,3,4,5,6,7,8,9,10] 이 담기게 된다.

let str = "ABC D EFG"
let str2 = [...str]
// str2에는 ["A","B","C"," ","D"," ","E","F","G"] 가 담긴다.

아래 예시를 보면 배열병합이 더 편한것을 알 수 있다.

let arr = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr, ...arr2]
// [1,2,3,4,5,6]
let arr4 = [0,...arr,...arr2,7,8,9]
// [0,1,2,3,4,5,6,7,8,9]

배열을 복사 할 때에도 기존배열은 건들지 않고 새로운 배열을 만들 수 있다.

let arr = ["뚱이","징징이"]
let arr2 = [...arr]
arr2.push("다람이")
// arr2 = ["뚱이","징징이","다람이"]
// arr = ["뚱이","징징이"]

❗️ 하지만 sprea를 사용하여 배열을 복사 할 때 배열 내 객체를 복사하는것이 아니라 참조하는 것이기에(얕은 복사) 객체를 변경하는 경우 원본배열, 새로운배열 모두 값이 변하게 된다.

const arr = [{name:"스폰지밥",age:4}]
const arr2 = [...arr]
arr2[0].name="물고기"
console.log(arr)
//[{name:"물고기",age:4}]
console.log(arr2)
//[{name:"물고기",age:4}]

📌 객체의 경우

객체를 복사하거나 업데이트를 할 때도 요긴하다.

let a = {name:"퐁퐁",age:5}
a = {...a, school:"바다초"}
console.log(a)
// {name:"퐁퐁", age:5, school:"바다초"}