JavaScript 기본 #4 배열 내장 함수

#11 배열 내장 함수

< forEach >

: 배열 순회

const arr = [1, 2, 3, 4];

for (let i=0; i < arr.length; i++) {
  console.log(arr[i]);
} //1 2 3 4

arr.forEach((elm) => 
  console.log(elm)
); //1 2 3 4

arr.forEach((elm) => 
  console.log(elm * 2)
); //2 4 6 8

/* 같은 코드
arr.forEach(function (elm) {
  console.log(elm);
});
*/

 

< map >

: 원본 배열의 모든 요소를 순회하면서 연산을 한 후 return 값 반환

arr = [1, 2, 3, 4];
const newArr = [];

arr.forEach((elm) => {
  newArr.push(elm * 2);
}

const newArr2 = arr.map((elm) => {
  return elm * 2;
});

 

< includes, indexOf >

- includes: 주어진 요소가 배열에 존재하는 지 확인

- indexOf : includes + 존재하면 인덱스 출력 / 존재하지 않으면 -1 출력

const arr = [1, 2, 3, 4];
let number = 3;

arr.forEach((elm) => {
  if (elm === number) {
    console.log(true);
  }
});

console.log(arr.includes(number)); //true
console.log(arr.indexOf(number)); //2

 

< findIndex, find >

- findIndex: 복잡한 객체 배열에서 인덱스 반환

- find: 찾는 element를 반환

const arr = [
  { color: "red" },
  { color: "orange" },
  { color: "yellow" },
  { color: "green" }, 
];

const index = arr.findIndex((elm) =>
  elm.color === "green"
)); //3

const element = arr.find((elm) =>
  elm.color === "green"
)); //green

 

< filter >

: 배열 필터링

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "orange" },
  { num: 3, color: "yellow" },
  { num: 4, color: "green" }, 
];

console.log(arr.filter((elm) =>
  elm.color === "green"
)); //{ num: 4, color: "green" }

 

< slice, concat >

- slice: 배열 자르기

- concat: 배열 합치기

//배열 자르기
const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "orange" },
  { num: 3, color: "yellow" },
  { num: 4, color: "green" }, 
];

console.log(arr.slice(0, 2)); 
//{ num: 1, color: "red" }, { num: 2, color: "orange" }, { num: 3, color: "yellow" }


//배열 합치기
const arr1 = [
  { num: 1, color: "red" },
  { num: 2, color: "orange" }
];
const arr2 = [
  { num: 3, color: "yellow" },
  { num: 4, color: "green" }, 
];

console.log(arr1.concat(arr2)); 
//{ num: 1, color: "red" }, { num: 2, color: "orange" }, { num: 3, color: "yellow" }, { num: 4, color: "green" }

 

< sort >

: 배열 정렬

let chars = ["나", "다", "라", "가"];

chars.sort(); //["가", "나", "다", "라"]

let nums = [0, 3, 20, 2, 5, 14];

nums.sort(); //[0, 14, 2, 20, 3, 5] 사전식이므로 비교 함수 만들어야 함

const compare = (a, b) => {
  if (a > b) {
    return 1;
  }
  if (a < b) {
    return -1;
  }
  return 0;
}
nums.sort(compare); //[0, 2, 3, 5, 14, 20]

 

< join >

: 배열 내의 모든 요소를 문자열 형태로 합치기

const arr = ["이정환", "님", "안녕하세요"];

console.log(arr[0], arr[1], arr[2]); //비효율
console.log(arr.join()); //이정환,님,안녕하세요
console.log(arr.join(" ")); //이정환 님 안녕하세요

 

---

이정환님의 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지"를 참고하여 작성하였습니다.