배열과 배열 메서드

박재민·2024년 1월 8일
0

TIL

목록 보기
11/49
오늘 배열과 배열 메서드에 대해서 추가적인 특강이 있어서 강의를 들어봤다.
필수는 아니었고 이미 배운 내용들이지만, 복습도 하고 내가 제대로 알고있는지 확인 하기 위해 참여했고 그 내용들을 정리해보고자 한다.

배열 ( list )

  • 배열이란?
    - 여러 값을 하나의 변수에 저장할 수 있는 자료구조
    - 배열에는 순서 (index) 가 존재한다
    - 배열에는 숫자, 문자열, 객체, 또 다른 배열을 저장할 수 있다.
    - 배열은 크기가 고정돼있지 않다.

배열의 기본 사용법

// 배열은 기본적으로 [] 를 사용해서 생성함
const animals = ["rabbit", "rion", "horse"];

// 또 다른 배열 생성은 new Array 를 사용
const animals = new Array ["rabbit", "rion", "horse"];

배열 접근 및 수정

// 배열의 특정 요소에 접근하거나 수정할 땐 index 를 사용함. index 는 0부터 시작
const animals = ["rabbit", "rion", "horse"];
console.log(animals[0]) // "rabbit"

// 배열의 길이 (index 의 개수) 는 length 속성으로 알 수 있다.
console.log(animals.length) // 3

배열 메서드

원본 배열을 수정하는 메서드

  • push(): 배열의 끝에 하나 이상의 요소를 추가하고, 새로운 길이를 반환한다.
  • pop(): 배열의 마지막 요소를 제거하고 그 요소를 반환한다.
  • shift(): 배열의 첫 번째 요소를 제거하고, 그 요소를 반환한다.
  • unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가하고, 새로운 길이를 반환한다.
  • splice(): 배열의 기존 요소를 삭제하거나, 새 요소를 추가하여 배열의 내용을 변경한다.
// push()
const animals = ["rabbit", "rion"];
animals.push('horse'); // ["rabbit", "rion", "horse"]

// pop()
const animals = ["rabbit", "rion", "horse"];
const lastIdx = animals.pop(); // lastIdx: "horse", animals: ["rabbit", "rion" ]

// shift()
const animals = ["rabbit", "rion", "horse"];
const firstIdx = animals.shift(); // firstIdx: "rabbit" , animals: ["rion", "horse"]

// unshift()
const animals = ["rion", "horse"];
animals.unshift("rabbit"); // animals : ["rabbit", "rion", "horse"]

// splice()
const animals = ["rion", "horse"];
animals.splice(1, 1, 'panda'); // animals : ["rabbit", "panda", "horse"]

새 배열을 반환하는 메서드

  • map(): 배열 내의 모든 요소에 대하여 주어진 함수를 호출한 결과를 모아 새 배열을 반환한다.
  • filter(): 주어진 함수의 테스트를 통과하는 모든 요소로 이루어진 새 배열을 반환한다.
  • slice(): 배열의 일부분을 얕은 복사하여 새 배열 객체로 반환한다.
  • concat(): 기존 배열에 다른 배열이나 값들을 합쳐서 새 배열을 만든다.
// map()
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // doubled: [2, 4, 6]

// filter()
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0); // evens: [2, 4]

// slice()
const animals = ["rabbit", "rion", "horse", "cheetah"];
const carnivore = animals.slice(2, 4); // citrus: ['horse', 'cheetah']

// concat()
const animals = ["rabbit", "rion"];
const moreAnimals = animals.concat(['horse', 'panda']);

결과값을 반환하는 메서드

  • reduce(): 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 단일 결과값을 반환한다.
  • find(): 주어진 테스트 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 만족하는 요소가 없으면 undefined를 반환한다.
  • some(): 배열의 어떤 요소라도 주어진 테스트 함수를 만족하면 true를, 모두 만족하지 않으면 false를 반환한다.
  • every(): 모든 요소가 주어진 테스트 함수를 만족하면 true를, 하나라도 만족하지 않으면 false를 반환한다.
  • includes(): 배열이 특정 요소를 포함하고 있는지 여부를 true 또는 false로 반환한다.
  • indexOf(): 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환한다. 없으면 -1을 반환한다.
  • lastIndexOf(): indexOf()와 유사하지만, 배열을 끝에서부터 검색한다.
  • forEach(): 배열의 각 요소에 대해 주어진 함수를 실행한다. 이 메서드는 배열을 순회하면서 각 요소에 대해 지정된 콜백 함수를 한 번씩 호출하고, map()과 달리 항상 undefined를 반환한다.
// reduce
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); 
// sum: 10

// find()
const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(num => num % 2 === 0); // firstEven: 2

// some()
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0); // hasEven: true

// every()
const numbers = [2, 4, 6, 8];
const isAllEven = numbers.every(num => num % 2 === 0); // allEven: true

// includes()
const animals = ['rabbit', 'rion', 'panda'];
const hasRion = animals.includes('rion'); // hasRion: true

// indexOf()
const animals = ['rabbit', 'rion', 'panda'];
const rionIdx = animals.indexOf('rion'); // rionIdx: 1

// lastIndexOf()
const animals = ['rabbit', 'rion', 'rabbit'];
const lastRabbitIdx = animals.lastIndexOf('rabbit'); // lastRabbitIdx: 2

0개의 댓글