JS연습하기1(for문, map, forEach, filter메서드 연습)

JS기본학습1장

 

-data

const infoList = [
        {
          name: '국연수',
          age: 29,
          desc: '당근마켓 개발자',
        },
        {
          name: '엔제이',
          age: 31,
          desc: '인프런 프론트엔드 개발자',
        },
        {
          name: '최웅',
          age: 32,
          desc: '인프런 백엔드 개발자',
        },
      ]

: infoList는 배열로 객체를 받는 data

 

1.for문

for (let i = 0; i < infoList.length; i++) {
	console.log(
    	`이 사람의 이름은 ${infoList.name}이고, 나이는 ${infoList.age}살이고, ${infoList.desc}입니다.`,
        )
    }

이러면 에러발생

 

왜? => for문 첫번째 ${infoList.name}에서 받고 싶은건 '국연수' => infoList는 배열이고 그 안에는 객체가 있음

infoList.name의 경우 i 가 어느곳을 말하는지 특정하지 않았기 때문에

콘솔창에는 "이 사람 이름은 undefined이고, 나이는 undefined살이고, undefined입니다."

라고 나오게 된다!

 

for (let i = 0; i < infoList.length; i++) {
          console.log(
            `이 사람 이름은 ${infoList[i].name}이고, 나이는 ${infoList[i].age}살이고 ${infoList[i].desc}입니다.`,
          )
        }

따라서 다음과 같이 infoList[i]식으로 i자리를 특정해주기!

 

 

2.map

infoList.map((i) => {
	return console.log(
     `이 사람의 이름은 ${infoList[i].name}이고, 나이는 ${infoList[i].age}살이고, ${infoList[i].desc}입니다.`)})

에러발생!!!!!!

계속하는 실수인데 map, forEach의 경우  infoList data를 쓸거라는걸 맨 처음부분 infoList.map에서 명시해서 ()안에 적어둔 i로만 받아야한다!

=> 

infoList.map((i) => {
	return console.log(
     `이 사람의 이름은 ${i.name}이고, 나이는 ${i.age}살이고, ${i.desc}입니다.`)})

 

3.forEach

infoList.forEach((i)=>{
	console.log(
    `이 사람 이름은 ${i.name}이고, 나이는 ${i.age}살이고 ${i.desc}입니다.`,)})

map과 forEach의 차이는 => return 을 할 수 있다/없다!

return을 해서 변수지정하거나 배열을 만들거나... 할때는 map을 사용하자

 

 

4.filter

앞의 메서드들이 전체 반복이었다면 filter는 특정 조건에 해당하는 경우만 걸러내는 메서드.

위 data에서 30대만 찾는 조건으로 filte를 사용한다면

 

const overThirty = infoList.filter((i) => i.age>=30)
console.log(overThirty)

콘솔에 length가 2인 array로 나옴