알아두면 좋은 배열 내장함수

uoayop·2021년 3월 6일
JavaScript
1

JavaScript

목록 보기
17/24
post-thumbnail

JavaScript

배열 내장함수

1. for each

배열 안의 모든 요소를 반복적으로 호출하고 싶을 때 사용한다.

const heros = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

// 익명함수를 매개변수로 넣어주고, 
// 익명함수의 매개변수에는 heros.foreach를 통해 가져온 hero를 넣어줌
heros.forEach(function (hero) {
  console.log(hero);
});

//화살표 함수 이용하기
heros.forEach(hero => {
  console.log(hero);
});

2. map

배열 안의 모든 원소를 다른 형태로 변환하고 싶을 때 사용한다.

const array = [1,2,3,4,5,6,7,8];

// square는 화살표 함수로 n을 받으면 n*n을 리턴한다.
const square = n => n*n;
//array.map으로 각 요소에 접근해서 square함수를 적용해준다.
const squared = array.map(square);

//따로 함수를 정의해주지 않고, map의 매개변수로 주어도 된다.
const squared2 = array.map(n => n*n);

console.log(squared);
// 출력 : [1, 4, 9, 16, 25, 36, 49, 64]
console.log(squared2);
// 출력 : [1, 4, 9, 16, 25, 36, 49, 64]

3. indexOf / find / findIndex / fileter

배열의 요소 중 무언가를 찾고 싶을 때 사용하는 함수들이다.

  • indexOf : 찾고싶은 요소의 인덱스를 반환해준다.
const heros = ['원더우먼', '닥터 스트레인지', '아이언맨'];

const index = heros.indexOf('아이언맨');
console.log(index);
//출력 : 2

  • find : 찾고 싶은 요소의 객체를 반환해준다.

  • 주의할 점은 find의 매개변수가 ⭐️함수 라는 것이다.

    조건(함수)에 맞는 요소가 반환된다.

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '리액트 배우기',
    done: false
  },
  {
    id: 4,
    text: '객체와 배열 배우기',
    done: true
  }
];

const find = todos.find(todo => todo.id === 3);
console.log(find);
//출력 : {id: 3, text: "리액트 배우기", done: false}
  • findIndex : 찾고싶은 요소의 인덱스를 반환해준다.
  • indexOf와 결과는 같지만, find처럼 특정 조건(함수)를 정의해서 조건을 만족하는 요소의 인덱스를 반환해준다.
const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '리액트 배우기',
    done: false
  },
  {
    id: 4,
    text: '객체와 배열 배우기',
    done: true
  }
];

const index = todos.findIndex(todo => todo.id===3);
console.log(index);
// 출력 : 2
  • filter : 배열 요소 중 특정 조건을 만족하는 요소들을 리스트로 묶어서 반환한다.
  • find와 findIndex는 가장 먼저 조건을 만족하는 한가지 요소만 찾기때문에, 배열 요소 중 조건을 만족하는 모든 요소를 찾고 싶을 땐 filter를 사용한다.
const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '리액트 배우기',
    done: false
  },
  {
    id: 4,
    text: '객체와 배열 배우기',
    done: true
  }
];

const findall = todos.filter(todo => todo.done === true);
console.log(findall);

// 출력:

image

4. Splice, Slice

  • splice : 배열에서 특정 지점을 제외시키고 싶을 때 사용한다.

    • ⭐️ 원본 배열까지 바뀐다

    splice(index, n) : index부터 n개를 삭제하겠다.

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

console.log("splice:", numbers.splice(1, 2));
//1번 인덱스에서 2개 삭제하겠다
//출력 : splice: [2,3]

console.log("numbers:", numbers);
//출력 : numbers: [1,4]

  • slice : 배열에서 특정 지점 전까지 가져오고 싶을 때 사용한다.

    • ⭐️ 원본 배열에 영향을 주지 않는다.

    slice(start, end+1) : start 인덱스부터 end 인덱스까지 배열을 가져온다.

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

console.log("slice:", numbers.slice(1, 3));
//1번 인덱스부터 2번 인덱스까지 가져온다.
// 출력 : slice: [2,]
console.log("numbers:", numbers);
// 출력 : numbers: [1,2,3,4]

5. shift / pop / unshift / push

  • shift : 첫번째 원소를 배열에서 추출해준다.
    • 파이썬 deque 모듈의 leftpop() 와 같다.
const numbers = [1, 2, 3, 4];

const val = numbers.shift();
console.log(val);
//출력: 1

console.log(numbers);
//출력: [2,3,4]
  • pop : 마지막 원소를 배열에서 추출해준다.
    • 원본 배열에 영향을 준다.
const numbers = [1, 2, 3, 4];

const val = numbers.pop();
console.log(val);
//출력: 4

console.log(numbers);
//출력: [1,2,3]
  • unshift : 배열의 맨 처음 인덱스에 요소를 추가해준다.
    • 원본 배열에 영향을 준다.
const numbers = [1, 2, 3, 4];

const val = numbers.unshift(5);
console.log("unshift:",val);
//출력: 5

console.log(numbers);
//출력: [5,1,2,3,4]
  • push : 배열의 맨 마지막 인덱스에 요소를 추가해준다.
    • 원본 배열에 영향을 준다.
const numbers = [1, 2, 3, 4];

const val = numbers.push(5);
console.log("push:", val);
//출력: 5

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

image

  • unshift& shift 와 push & pop 이렇게 쌍으로 기억하면 될 것 같다!

5-1. concat / spread / join

  • concat : 배열 간 합쳐주는 내장 함수
    • 원본 배열에 영향을 주지 않는다.
const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7];

const arr3 = arr1.concat(arr2);

console.log("concat:",arr3);
//출력: concat: [1,2,3,4,5,6,7]
console.log("arr1+arr2:",arr1 + arr2);
//출력: arr1+arr2: 1,2,3,45,6,7
  • push(+)/pop(-) & unshift(+),shift(-)와 함께 기억해두자.
    image
  • spread : concat과 같은 역할을 한다.
const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7];

const arr3 = [...arr1, ...arr2];

console.log("spread:", arr3);
//출력: spread: [1, 2, 3, 4, 5, 6, 7]
  • join : 배열 안의 요소들을 하나의 문자열로 합쳐줄 때 사용한다.
    • concat 과 느낌이 비슷하지만 헷갈리지 말자!
const arr1 = [1, 2, 3, 4];

const arr3 = arr1.join();
console.log(arr3);
//출력 : 1,2,3,4 

// join의 매개변수는 숫자 사이의 연결 요소가 된다.
const arr4 = arr1.join(" * ");
console.log(arr4);
//출력 : 1 * 2 * 3 * 4

6. reduce

  • reduce : 배열에 있는 모든 값을 이용해서 연산을 해야할 때 유용하다.
  • reduce((accumulator,current,index,array) => 계산식, accumulator 초기값)
    • accumulator: 누적된 값, current : 리스트의 각 요소가 한개씩 가져와짐
    • index: current의 인덱스 값 ,array: reduce의 대상 배열 = 자기 자신
// [모든 배열의 합 구하기]
const numbers = [1, 2, 3, 4, 5];

//reduce((accumulator, current) => 계산식, accumulator 초기값)
const sum = numbers.reduce((accumulator, current) => accumulator + current , 0);

console.log(sum);
//[배열의 평균 구하기]
const numbers = [1, 2, 3, 4, 5];

const avg = numbers.reduce((accumulator, current,index,array) => {
  if (index===numbers.length-1){
   return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(avg);
//[배열 속 각 알파벳 개수 세기]
const alphabets = ['a','a','a','b','c','c','d','e'];

const count = alphabets.reduce((acc,current) => {
  // acc객체에 current 값이 있으면~
  if (acc[current]){
    acc[current]+=1;
  }
  else{
    acc[current]=1;
  }
  return acc;
  //acc의 초기값을 빈 객체로 선언해줌 
},{});

console.log(count);

7. includes

배열 안에 요소가 있는지 확인해서 있으면 true, 없으면 false를 반환해준다.

  • 파이썬의 in과 같은 역할이다.
function isAnimal(text) {
  const animal = ["고양이", "개", "거북이", "너구리"];
  return animal.includes(text);
}

// 이렇게 화살표 함수로 간단하게 나타낼 수도 있다.
const isAnimal2 = (text) => ["고양이", "개", "거북이", "너구리"].includes(text);


console.log(isAnimal("개"));
//출력: true
console.log(isAnimal2("냐옹이"));
//출력: false
profile
uoayop
slow and steady wins the race 🐢
이전 포스트

동작 방식 - 엔진 & 호출 스택

다음 포스트

프로토타입

0개의 댓글