[Javascript] 실무 반복문 map / filter

map()

배열의 각 요소에 대해 동일한 동작을 반복하고 그 결과값을 모은 새 배열을 리턴한다.

간단하게 반복문이라고 생각하면 된다. for를 사용해서 만들 수 있는 함수는 map으로 거의 다 구현이 가능하다.  실무에서 for보다 훨씬 많이 사용한다고 함. (for는 요즘 실무에서는 거의 사용되지 않는다고.)

 

문법

// 1. 일반적인 배열
const classmates = ["철수", "영희", "훈이"]

classmates.map((el) => (`${el}어린이`))
// `${el}어린이` 는 (el) + "어린이" 와 동일하다.
// el은 element의 약자

// 2. 배열 안의 객체
const classmates2 = [
  {name : "철수"},
  {name : "영희"},
  {name : "훈이"}
]

classmates2.map((el) => ({name: `${el.name} 어린이`}))
// 이 경우 el은 하나하나의 객체다. 객체 안에서 key가 name인 값을 추출하는 것.

상단의 javascript를 콘솔에 찍어보면 다음과 같은 결과가 나온다.

 

 

 

추가 문법

classmates.map (el => (el.name))
classmates.map ((el) => el.name)

map의 기본 형태가 화살표 문법이기에 상단과 같은 방식의 생략도 가능하다.

// 1. 기본 화살표함수 형태
const add = () => {
    console.log("안녕하세요")
}
add() //안녕하세요

// 2. 이 경우 add2는 100을 반환한다
const add2 = () => {
    return 100
}
const qqq = add2()
qqq //100

// 3. 중괄호 내부에 하나의 return만 있을 경우에는 이런 식의 생략이 가능하다.
const add3 = () => 100

// 4. 그리고 3번의 add3은 이것과 동일하다
const add3 = () => (100)

그런데 el이 객체일 경우, 앞의 괄호는 생략이 가능하지만, 뒤쪽에 있는 괄호는 생략이 불가능하다.

const classmates = [
    { name: "철수" },
    { name: "영희" },
    { name: "훈이" }
]

classmates.map((el) => ({ name: `${el.name} 어린이` }))
// 위와 같은 함수를
classmates.map((el) => { name: `${el.name} 어린이` })
// 이렇게 생략하는 것은 불가능하다.

이유가 무엇인지는 화살표 함수 모양으로 변경해보면 알 수 있다.

const add5 = () => { name: `${el.name} 어린이` }
// 이러한 화살표 함수 모양을 익숙한 모양으로 줄바꿈해보자.

const add5 = () => {
    name: `${el.name} 어린이`
}
// 그러면 객체를 감싸는 중괄호가 함수를 감싸는 중괄호의 역할을 하게 되었다는 것을 알 수 있다.
// 그 때문에 오류가 발생하는 것.

const add5 = () => {
    return { name: `${el.name} 어린이` }
}
const add5 = () => {return { name: `${el.name} 어린이`}
}

// 이렇게 return을 붙여주면 작동한다. 하지만 굳이 이렇게 할 필요가..?
// 그러니 간단하게 '객체를 감싸는 () 괄호는 생략이 불가능하다'고 기억해두자.

 

map을 HTML과 연결

map의 결과를 html과 연결하는 것도 가능하다.

// 1. 소스코드
const classmates = ["철수", "영희", "훈이"]
const aaa = classmates.map((el) => <div>{el}</div>)

// 2. 결과
const classmates = [<div>철수</div>, <div>영희</div>, <div>훈이</div>]

// 3. 이런 식의 응용도 가능하다.
export default function AAA() {
    const aaa = [<div>철수</div>, <div>영희</div>, <div>훈이</div>]
    return <div>{aaa}</div>
}

react에 이런 식으로 입력하면

 

이러한 형태로 html에 들어간다.

 

filter()

filter는 배열 내에서 주어진 조건을 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const ages = [10, 13, 11]
ages.filter((el) => (el >= 10))

//결과
[13, 11]

하나의 배열에 filter와 map을 동시에 쓸 수도 있다.

filter와 map을 응용하면 for문에서 사용하는 break, continue 등을 filter로 대체할 수 있다.

이렇게 되면 for문을 사용할 일이 거의 사라진다.

const classmates = [
    { name: "철수", age: 13 },
    { name: "영희", age: 10 },
    { name: "훈이", age: 11 }
]

classmates
    .filter((el) => (el.age >= 11))
    .map((el) => ({ name: wl.name, age: el.age, school: "다람쥐 초등학교"}))

 

key / index

• key : map의 기능 중 하나로, 반복되는 각각의 엘리먼트에 부여되는 고유한 값이다.
• index : map이 돌아갈때마다 각각의 엘리먼트에 index가 부여된다. 기타 index와 동일하게 0부터 시작하며, 몇번째 실행되는 map인지 알 수 있게끔 해준다. 단, index는 해당 회차를 구분하는 값일 뿐 key처럼 고유한 값은 아니다.