JavaScript Array Method - 한입 크기로 잘라 먹는 리액트 (212)

JS 배열 함수

1. forEach

배열의 요소에 순차적으로 접근

2. map, return

배열의 각 요소에 대해 콜백 함수 실행, 콜백 함수에서 return 사용 가능, 리턴한 값을 요소로 생성된 새로운 배열을 리턴

3. includes

=== 연산을 통해 배열에 특정 값이 있는지 확인하여 boolean 타입 리턴

4. indexOf

배열에 특정 값이 있으면 인덱스 리턴, 없으면 -1 리턴

5. findIndex

특정 속성을 갖는 요소의 인덱스 리턴, 중복된 값이 있으면 가장 앞에 있는 요소의 인덱스 리턴

6. find

특정 속성을 갖는 요소 자체를 리턴

7. filter

배열에서 특정한 조건을 만족하는, 즉 콜백 함수가 true를 리턴하는 모든 요소를 배열로 리턴

8. slice(start, end)

배열의 인덱스를 통해 자른 배열을 리턴

9. sort

원본 배열을 문자열 기준으로 사전순 정렬하여 리턴

10. join

배열의 각 요소를 합쳐서 문자열로 리턴, 구분자 사용 가능

 

const numList = [0, 1, 3, 2, 10, 30, 20];

let num = 3;

const objList = [
  { num: 1, color: 'red' },
  { num: 2, color: 'black' },
  { num: 3, color: 'blue' },
  { num: 4, color: 'green' },
  { num: 5, color: 'blue' },
];

let charList = ['나', '다', '가'];

const strList = ['Cade', '안녕하세요', '또오셨군요'];

// 1. forEach
numList.forEach((elem) => console.log(elem * 2));

// 2. map, return
const newList = numList.map((elem) => {
  return elem * 2;
});

// 상동
// const newList = [];
// numList.forEach((elem) => newList.push(elem * 2));

console.log(newList);

numList.forEach((elem) => {
  if (elem == num) {
    console.log(true);
  }
});

// 3. includes
console.log(numList.includes(num));

// 4. indexOf
console.log(numList.indexOf(num));

// 5. findIndex
console.log(
  objList.findIndex((elem) => {
    return elem.color === 'green';
  })
);

// console.log(objList.findIndex((elem) => elem.color === 'green')); // 상동

const idx = objList.findIndex((elem) => elem.color === 'blue');
console.log(objList[idx]);

// 6. find
const elm = objList.find((elem) => elem.color === 'blue');
console.log(elm);

// 7. filter
console.log(objList.filter((elem) => elem.color === 'blue'));

// 8. slice(start, end)
console.log(objList.slice(0, 2));

console.log(objList1.concat(objList2));

// 9. sort
console.log(charList.sort());
console.log(numList.sort());

// 비교 함수 작성
const compare = (a, b) => {
  if (a > b) {
    return 1; // 오름차순
    // return -1; // 내림차순
  }
  if (a < b) {
    return -1; // 오름차순
    // return 1; // 내림차순
  }
  return 0;
};
numList.sort(compare);
console.log(numList);

// 10. join
console.log(strList.join(', '));

 

 

 

출처: https://inf.run/3Kzd

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의