다양한 배열 메소드

📌  find

배열에서 조건(return 우측의 연산자)에 만족하는 가장 먼저 발견된 것 하나를 찾아내는 메소드

 

👇🏻 사용방법

const numbers = [22, 5, 43, 7, 13];

const num = numbers.find((num) => {
  return num > 30;
});
console.log(num); // 43

num이 30보다 클 때라는 조건을 넣어주고 콘솔로 찍어보았을 때 43이 나오는 걸 알 수 있습니다.

* numbers의 배열 인덱스 0번부터 num으로 들어가 맞는 조건을 찾아줍니다.

 

📌  filter

배열에서 조건에 만족하는 요소만 필터링해주는 메소드

 

👇🏻 사용방법

const ages = [12, 33, 27, 8];

const result = ages.filter((age) => {
  return age > 20;
});
console.log(result); // 33, 27

20살 이상의 나이만 보고 싶을 때 filter함수를 이용할 수 있습니다.

 

📌  map

map은 forEach와 같이 전체 배열에 접근하여 반복문을 실행합니다. 하지만 가장 큰 다른 점은 map함수는 새로운 배열을 만들어준다는 특징이 있습니다. 그래서 리액트에서는 불변성을 지켜주기 위해 forEach를 사용하지 않고 map을 사용합니다.

 

👇🏻 사용방법

const numbers = [1, 2, 3, 4, 5];

const result = numbers.map((num) => {
  return num * 3;
});
console.log(result); // [3, 6, 9, 12, 15]

map함수에서는 원본 배열의 원소와 일대일 mapping이 진행되기 때문에 원본 배열과 mapping후 배열의 길이는 항상 같습니다.

 

📌  sort

배열의 정렬을 가능하게 해주는 메소드

 

👇🏻 사용방법

const numbers = [2, 4, 1, 5, 3];
numbers.sort();

console.log(numbers); // [1, 2, 3, 4, 5]

기존의 배열을 변경시켜 정렬합니다.

 

오름차순, 내림차순 정렬 방법

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

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

 

객체 나이로 내림차순 정리하기

const daysix = [
  {
    name: "박성진",
    age: 31,
    gender: "남",
  },
  {
    name: "김원필",
    age: 29,
    gender: "남",
  },

  {
    name: "강영현",
    age: 31,
    gender: "남",
  },

  {
    name: "윤도운",
    age: 28,
    gender: "남",
  },
];

daysix.sort((a, b) => {
  return b.age - a.age;
});

console.log(daysix);