배열 내장 함수

배열 내장 함수

@2024.04.02

forEach

💡

주로 배열 안에 있는 모든 원소를 출력할 때 사용

• forEach 함수의 파라미터로는 각 원소에 대하여 처리하고 싶은 코드를 함수로 제공

• 콜백 함수 : 함수 형태의 파라미터를 전달하는 것

  const numbers = [1, 2, 3, 4, 5];
  
  numbers.forEach(function(number) { // or numbers.forEach(number => {
    console.log(number);
  });
  // 1
  // 2
  // 3
  // 4
  // 5

map

💡

배열 안의 각 원소를 변환할 때 사용하며, 이 과정에서 새로운 배열이 만들어진다.

• map 함수의 파라미터로는 변화를 주는 함수를 전달 (=변화 함수)

const numbers = [1, 2, 3, 4, 5];
// map() 함수 내부에는 현재 요소의 값을 콜백 함수가 실행되며, 
// 각 요소의 값이 number 매개변수로 전달된다. 
const doubled = numbers.map(function(number) {
  return number * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]
----------------------------------------------------------------------------------
const doubled = numbers.map( n => n*2;);
console.log(doubled); // [2, 4, 6, 8, 10]

indexOf

💡

배열에서 주어진 요소의 인덱스 반환

• 주어진 요소가 존재할 시 그 인덱스를 반환하고, 없으면 -1을 반환.

• 객체 배열에서의 사용은 적합하지 않다.

• indexOf() 안에 함수도 들어갈 수 있다.

  const fruits = ['apple', 'banana', 'orange'];
  const index = fruits.indexOf('banana');
  console.log(index); // 1

findIndex

💡

배열에서 주어진 조건을 만족하는 첫 번째 요소의 인덱스 반환

• 주어진 요소가 존재할 시 그 인덱스를 반환하고, 없으면 -1을 반환.

• 배열에 있는 값이 객체이거나, 배열도 찾을 수 있다.

  const students = [
    { id: 1, name: 'John', age: 20 },
    { id: 2, name: 'Alice', age: 22 },
    { id: 3, name: 'Bob', age: 21 }
  ];
  
  // 이름이 'Alice'인 학생의 인덱스 찾기
  const index = students.findIndex(students => students.name === 'Alice');
  console.log(index); // 1
  });
  ----------------------------------------------------------
  const numbers = [10, 20, 30, 40, 50];
  const index = numbers.findIndex(number => number > 30);
  console.log(index); // 출력: 3
  

find

💡

배열에서 주어진 조건을 만족하는 첫 번째 요소 자체를 반환

• 원하는 요소를 찾지 못하면 undefinded 반환.

const students = [
  { id: 1, name: 'John', age: 20 },
  { id: 2, name: 'Alice', age: 22 },
  { id: 3, name: 'Bob', age: 21 }
];

const index = students.find(students => students.name === 'Alice');
console.log(index); //  { id: 2, name: 'Alice', age: 22 }
});
-----------------------------------------------------
const numbers = [10, 20, 30, 40, 50];
const element = numbers.find(number => number > 30);
console.log(element); // 40

indexOf vs findIndex vs find

• 반환하는 값의 형태와 검색하는 방식이 차이가 난다.

• indexOf : 요소의 값을 검색하고 인덱스를 반환

• findIndex : 조건을 함수로 받아 검색하여, 인덱스로 반환

• find : 조건을 함수로 받아 검색하여, 요소 자체를 반환

filter

💡

배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.

• filter 함수에 넣는 파라미터는 조건을 검사하는 함수를 넣어주며,
  이 함수의 파라미터로 각 원소의 값을 받아오게 된다.
  

• filter에 넣어준 함수에서 true를 반환하면 새로운 배열을 추출한다.

  const numbers = [10, 20, 30, 40, 50];
  const filtered = numbers.filter(function(number) {
    return number > 30;
  });
  console.log(filtered); // [40, 50]
  

splice

💡

특정 항목을 제거/추가할 때 사용하며, 기존의 배열을 직접 수정한다.

• 첫 번째 파라미터 : 변경을 시작할 인데스

• 두 번째 파라미터 : 그 인덱스로부터 몇 개를 지울지

• 세 번쨰 파라미터 : 배열에 추가할 요소

  let arr = [1, 2, 3, 4, 5];
  arr.splice(1, 2); // 인덱스 1부터 2개의 요소를 제거
  console.log(arr); // [1, 4, 5]
  
  arr.splice(2, 0, 6, 7); // 인덱스 2에 요소 6과 7을 추가
  console.log(arr); // [1, 4, 6, 7, 5]

slice

💡

배열을 추출 사용하는 함수로, 기존의 배열을 건드리지 않는다.

• 첫 번째 파라미터 : 추출을 시작할 인덱스

• 두 번째 파라미터 : 추출을 끝낼 인덱스

  let arr = [1, 2, 3, 4, 5];
  let slicedArr = arr.slice(1, 4); // 인덱스 1부터 3까지의 요소를 추출
  console.log(slicedArr); // [2, 3, 4]
  
  console.log(arr); // 원본 배열은 변하지 않음 [1, 2, 3, 4, 5]

shift

💡

첫 번째 원소를 배열에서 추출

• 추출하는 과정에서 배열에서 해당 원소는 사라진다.

  const numbers = [10, 20, 30, 40];
  const value = numbers.shift();
  console.log(value); // 10
  console.log(numbers); // [20, 30, 40]

pop

💡

맨 마지막 항목을 추출한다.

• 추출하는 과정에서 배열에서 해당 원소는 사라진다.

  const numbers = [10, 20, 30, 40];
  const value = numbers.pop();
  console.log(value); // 40
  console.log(numbers); // [10, 20, 30]

unshift

💡

배열의 첫 번째 앞에 새 원소를 추가한다.

const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers); // [5, 10, 20, 30, 40]

concat

💡

여러 개의 배열을 하나의 배열로 합쳐준다.

• 각 배열에 변화를 주지 않는다.

  const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];
  const concated = arr1.concat(arr2);
  console.log(concated); //[1, 2, 3, 4, 5, 6]

join

💡

배열 안의 값들을 하나의 문자열로 합쳐준다.

const fruits = ['apple', 'banana', 'orange'];
// 배열의 모든 요소를 쉼표로 구분하여 하나의 문자열로 결합
const result = fruits.join(', ');
console.log(result); // apple, banana, orange
// 배열의 모든 요소를 한칸 띄어서 하나의 문자열로 결합
const result = fruits.join(' ');
console.log(result); // apple banana orange

reduce

💡

배열의 각 요소에 대해 지정된 함수를 실행하고 결괏값 하나를 반환한다


@기본 형식

reduce((accumulator, current, index, array) = > { }, initialValue)

• 배열을 처음부터 끝까지 반복하면서 우리가 전달한 콜백 함수가 호출된다.

• 첫 번째 파라미터 : 콜백 함수
  • accumulator : 콜백 함수의 이전 호출에서 반환된 값이 누적
    → 현재까지의 누산된 결과
    
  • current : 배열에서 처리 중인 현재 요소
  • index : 현재 처리할 요소의 인덱스(선택 옵션)
  • array : reduce()를 호출한 배열 (선택 옵션)

• 두 번째 파라미터 : 초깃값(initialValue)
  • 초깃값을 전달하지 않으면 배열의 첫번째 요소가 초기 누산기 값으로 사용된다.
    
    

  const numbers = [1, 2, 3, 4, 5];
  
  // 콜백 함수 
  // accumulator : 누적 값
  // currentValue : 현재 순회 중인 배열 요소의 값
  // 초깃값 
  const sum 
  = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0 );
  
  console.log(sum); // 15
  

  • 처음 콜백 함수가 호출되면 0 + 1 해서 1이 반환된다.
    이렇게 반환되면 그다음에 콜백 함수가 호출될 때 accumulator 값으로 사용된다.
    (accumulator = 1)
  • 콜백 함수가 두 번째로 호출될 땐 1+2를 해서 3이 되고, 이 값이 세 번째로 호출될 때의 accumulatort 값으로 사용된다.
    
    (accumulator = 3)