-배열 메서드- (find,filter,map,sort,),Spread Operator (…) 23.11.10

 

오늘은 자바스크립트 베이직반 수업이있어서 간단하게 정리해본다

자주쓰는 배열 메소드에대해 알아보았는데 순수 무의식에서 자동으로 나오지가 않아서 좀더 자주봐야겠다 벌써 배운지가 좀 된거같은데

손에 익지가 안는다 뭔가 이쯤 하면 자동으로척척 나올거같았는데

역시 좀더 노력해봐야겠다

 

 

 

 

 

---

find

• 배열에서 조건(return 우측의 연산자)에 만족하는 가장 먼저 발견된 것 하나만 찾을 수 있음.
• 변수에 담아서 사용.

const 숫자배열 = [1, 2, 3, 4, 5, 6];

const 사보다큰숫자하나 = 숫자배열.find((숫자) => {
	return 숫자 > 4;
});
console.log(사보다큰숫자하나)
 //  결과값 : 5

// 추가 로직 없이 return 하면 중괄호 없애고 return 없애면 됨
const 사보다큰숫자하나 = 숫자배열.find((숫자) => 숫자 > 4);

 

---

filter

• 배열에서 조건(return 우측의 연산자)에 만족하는 요소만 필터링
• 새로운 배열을 만들어 줌 (기존 배열은 그대로 둔다)

const ages = [32, 33, 16, 40];

const result = ages.filter((age) => {
	return age > 30;
});

console.log(result)
//결과값 : [32,33,40]

 

find와는 다르게 모두 찾아서 새로운 배열을 뱉어주는게 특징

---

map

• forEach와 똑같이 전체 배열 접근
• forEach와 다른 점: 새로운 배열을 만들어줌 → 변수에 담기 가능
• ⇒ 이 부분은 상당히 중요. 리액트에서 forEach를 쓰지 않고 map을 쓰는 이유
• 각 요소가 바뀌었으면 하는 형태를 return 우측에 작성하기

리액트에 들어서면서 꽤나 많이쓰이는 메소드 이다.

const 동물배열 = ["사자", "호랑이", "기린", "코끼리"];

const 동물배열 = 배열.map((아무거나 넣어도 괜찮아요여긴) => 아무거나 넣어도 괜찮아요여긴 + "인형");

console.log(동물인형배열);
 실제 찍히는 결과// ["사자인형", "호랑이인형", "기린인형", "코끼리인형"]

 

이런식으로 배열 뒤쪽에 특정 문자열을 추가할수도있고 좀더 응용하면

const products = [
  {
    브랜드: "수아레",
    상품명: "케이블 카라 반팔 니트 - 6 Color",
    가격: 39900,
    평점: 5,
    후기개수: 2997,
    좋아요수: 31352,
  },
  {
    브랜드: "커버낫",
    상품명: "에센셜 어쩌고",
    가격: 34300,
    평점: 5,
    후기개수: 45021,
    좋아요수: 156057,
  },
  {
    브랜드: "소버먼트",
    상품명: "컷 헤비 어쩌고",
    가격: 36600,
    평점: 5,
    후기개수: 5540,
    좋아요수: 31922,
  },
];

const 십프로할인된상품들 = products.map((product) => {
	return {
		브랜드: product.브랜드,
    상품명: product.상품명,
    가격: product.가격 * 0.9,
    평점: product.평점,
    후기개수: product.후기개수,
    좋아요수: product.좋아요수,
	}
})

 

이런식으로 배열안에있는 객체들의 특정 값만을 수정할수도있다

---

sort

• 배열 정렬 가능
• 오름차순 정렬
• 기존 배열을 변경시킴

const korean = ["다", "나", "가"]

korean.sort();

 

알파벳이랑 한글등 문자는 제대로 배열해주는데 숫자는 안먹힌다

const numbers = [111, 22, 3333, 12]

numbers.sort();
//결과값 [12,22,111,3333 이 나올거같죠? 사실 안나와요]

 

비교로직을 추가해주면 숫자도 가능하다

// 오름차순
numbers.sort((a, b) => {
	return a - b 
});

// 내림차순
numbers.sort((a, b) => {
	return b - a
});

 

실제 예시

const products = [
  {
    브랜드: "수아레",
    상품명: "케이블 카라 반팔 니트 - 6 Color",
    가격: 39900,
    평점: 5,
    후기개수: 2997,
    좋아요수: 31352,
  },
  {
    브랜드: "커버낫",
    상품명: "에센셜 어쩌고",
    가격: 34300,
    평점: 5,
    후기개수: 45021,
    좋아요수: 156057,
  },
  {
    브랜드: "소버먼트",
    상품명: "컷 헤비 어쩌고",
    가격: 36600,
    평점: 5,
    후기개수: 5540,
    좋아요수: 31922,
  },
];

products.sort((a, b) => {
	return a.가격 - b.가격
})

 

---

4. Spread Operator (…)

자바스크립트의 특이한 문법: 점 세 개 (…)

spread 의 뜻: 펼치다, 뿌리다…

 

배열사용예시들

-양쪽 대괄호 [ ] 제거해줍니다.

let a = [1, 2, 3]
console.log(...a) // 1 2 3

 

-새로운 배열을 만들 수 있습니다.

let a = [1, 2, 3]
let b = [...a] // b는 새로운 배열

 

-두 개의 배열을 합칠 수 있습니다.

let a = [1, 2, 3]
let b = [4, 5, 6]

let c = [...a, ...b] // [1, 2, 3, 4, 5, 6]
console.log(c)

 

사용하는 이유

저번에 알아본 불변성과 관련이있는데 객체 타입의 특이한 복사 방식 때문이다. (자세한건 저번에 적어둔 불변성TIL 참고하기) 추후 사용할

리액트에서도 문제가 생긴다.

let a = [1, 2, 3]
let b = [...a]    /결과값은 다르다/ let b = a

a[0] = 100;
console.log(a)
console.log(b)  
//이런식으로하면  a를변경해도 b에 0번째 배열에 영향이 가지않는다 

 

객체사용예시들

• 양쪽 중괄호 { } 를 제거해줍니다.
• console.log로 바로 확인하면 에러 남

let a = { a: 1 , b: 2 }
console.log(...a) 
// Uncaught TypeError: Spread syntax requires 
// ...iterable[Symbol.iterator] to be a function
//    at <anonymous>:1:9
// (익명) @ VM2572:1

console.log({...a})

 

새로운 객체를 만들 수 있습니다.

let a = { a: 1 , b: 2 }
let b = { ...a }

console.log(b) 

 

두 객체를 합칠 수 있습니다.

let a = { a: 1, b: 2 } 
let b = { c: 3, d: 4 }

let c = {...a, ...b}
console.log(c)

 

key(키)가 겹치면 뒤의 키 & 값으로 대체됩니다.

let a = { a: 1, b: 2 }
let b = { ...a, a: 3 }

console.log(a)

 

실제 사용예시

const 투두 = {
  id: 1,
  할일: "8시기상",
  완료여부: false,
};

// 여기에 코드를 작성해주세요.
const newTodo = { ...투두, 완료여부: true };

console.log(투두);
console.log(newTodo);
// 결과
// { id: 1, '할일': '8시기상', '완료여부': false }
// { id: 1, '할일': '8시기상', '완료여부': true }

 

 

---

추가로 간단한 응용문제들

forEach 응용

const 객체를묶어논배열 = [
  {
    이름: "kim",
    나이: 20,
    성별: "남",
    직업: "튜터",
    담당반: "A",
  },

객체를묶어논배열.forEach((그배열) => {
  console.log(`${그배열.이름}의 담당반은 ${그배열.담당반}입니다.`);
});

// 결과
/*kim님의 담당반은 A입니다.

 

 

맵(MAP),spread(...) 을 이용한 객체 수정

const 사람들 = [
  {
    이름: "김철수",
    나이: 18,
    성별: "남",
  },
  {
    이름: "김길동",
    나이: 19,
    성별: "남",
  },
  {
    이름: "김유리",
    나이: 22,
    성별: "여",
  },
  {
    이름: "김맹구",
    나이: 23,
    성별: "남",
  },
];

const 나이10살더먹은사람들 = 사람들.map((사람) => {
  return {
    이름: 사람.이름,
    나이: 사람.나이 + 10,
    성별: 사람.성별,
  };
});
// 화살표 함수 이용해서 짧게쓴 버젼 
const 나이10살더먹은사람들1 = 사람들.map((사람) => ({ //map를 이용해 새로운 배열을 만든후
  ...사람, //  ...스프레드를 이용해 완전히 풀어준뒤 바꾸는 key value부분 수정하면 모두적용된
  나이: 사람.나이 + 10,
}));

console.log(나이10살더먹은사람들);

// 결과  //새로운 객체 생성
[
  { '이름': '김철수', '나이': 28, '성별': '남' },
  { '이름': '김길동', '나이': 29, '성별': '남' },
  { '이름': '김유리', '나이': 32, '성별': '여' },
  { '이름': '김맹구', '나이': 33, '성별': '남' }
]