배열

🧀 배열

여러 개의 값을 순차적으로 나열한 자료구조.

배열 안에는 요소를 가지고 있고, 각 요소는 배열 안에서 인덱스를 가지고 있다.

인덱스는 0부터 시작하고, 각 요소의 인덱스를 사용하면 요소에 접근할 수 있다.

 

const arr = ['a', 'b', 'c'];

arr[0]; //a
arr[1]; //b
arr[2]; //c

 

🧀 배열 생성

배열은 다양한 방법으로 생성할 수 있다.

 

const array1 = new Array(1, 2);
console.log(array1); //[ 1, 2 ]

const array2 = Array.of(1, 2);
console.log(array2); //[ 1, 2 ]

const array3 = [1, 2];
console.log(array3); //[ 1, 2 ]

const array4 = Array.from(array2); //[ 1, 2 ]
console.log(array4);

 

🧀 배열 요소 참조

배열 요소를 참조할 때는 대괄호를 사용한다.

요소마다 인덱스가 있기 때문에 대괄호에 인덱스를 넣어 사용한다.

만약 존재하지 않는 요소에 접근한다면 undefined가 반환된다.

또한, 배열 요소 전부에 접근하고 싶다면 for문을 사용할 수 있다.

 

const food = ['🍜', '🍕', '🍔'];

console.log(food[1]); //🍕
console.log(food[5]); //undefined

for (let i = 0; i < food.length; i++) {
  console.log(food[i]);
  //🍜
  //🍕
  //🍔
}

 

🧀 배열 요소의 변경

배열에 요소를 추가, 갱신, 삭제할 수 있다.

만약 배열에 요소가 있는 인덱스를 사용하면 요소가 갱신되고,

없는 인덱스를 사용하면 해당 인덱스에 요소가 추가된다.

 

const food = ['🍜', '🍕', '🍔'];
food[1] = '✨'; //[ '🍜', '✨', '🍔' ]
food[5] = '🤪'; //[ '🍜', '✨', '🍔', <2 empty items>, '🤪' ]

 

인덱스는 요소의 위치를 나타내므로 정수 혹은 정수 형태의 문자열을 사용해야 한다.

만약 이외의 값을 사용할 경우 프로퍼티가 생성된다.

 

const food = ['🍜', '🍕', '🍔'];
food[1.234] = '😆';
console.log(food); //[ '🍜', '🍕', '🍔', '1.234': '😆' ]

 

배열 삭제의 경우 delete를 사용해서 삭제할 수 있다.

이는 자바스크립트 배열이 일반적인 배열의 동작을 흉내 낸 '객체'이기 때문에 가능한 것이다.

 

const food = ['🍜', '🍕', '🍔'];
delete food[0];
console.log(food); //[ <1 empty item>, '🍕', '🍔' ]

 

🧀 배열 메서드

자바스크립트 배열에는 다양한 빌트인 메서드가 있다.

배열 자체를 변경하는 메서드가 있고, 새로운 배열을 반환하는 메서드가 있어 주의하며 사용해야 한다.

 

Array.isArray

특정한 오브젝트가 배열인지 확인하는 메서드이다.

배열이 맞다면 true, 아니라면 false를 반환한다.

const food = ['🍜', '🍕', '🍔'];

console.log(Array.isArray(food)); //true
console.log(Array.isArray({})); //false

 

Array.prototype.indexOf

특정한 요소의 위치를 찾을 때 사용하는 메서드이다.

만약 특정한 요소가 여러개라면 첫 번째로 검색된 요소의 인덱스를 반환하고,

요소가 존재하지 않는다면 -1을 반환한다.

 

const food = ['🍜', '🍕', '🍔'];

console.log(food.indexOf('🍎')); //-1
console.log(food.indexOf('🍔')); //2

 

Array.prototype.includes

배열 안에 특정한 요소가 있는지 확인하는 메서드이다.

있다면 true, 없다면 false를 반환한다.

 

const food = ['🍜', '🍕', '🍔'];

console.log(food.includes('🍜')); //true

 

Array.prototype.unshift

배열의 제일 처음으로 요소를 추가하는 메서드이다.

원본 배열을 직접 변경한다.

 

const food = ['🍜', '🍕', '🍔'];

food.unshift('🥘');
console.log(food); //['🥘', '🍜', '🍕', '🍔' ]

 

Array.prototype.push

배열의 제일 마지막으로 요소를 추가하는 메서드이다.

원본 배열을 직접 변경한다.

 

const food = ['🍜', '🍕', '🍔'];

food.push('🥘');
console.log(food); //['🍜', '🍕', '🍔', '🥘' ]

 

Array.prototype.shift

배열의 첫번째 요소를 제거하고 그 요소를 반환한다.

원본 배열을 직접 변경한다.

 

const food = ['🍜', '🍕', '🍔'];
const firstFood = food.shift();
console.log(firstFood); //🍜
console.log(food); // ['🍕', '🍔'];

 

Array.prototype.pop

배열의 마지막 요소를 제거하고 그 요소를 반환한다.

원본 배열을 직접 변경한다.

 

const food = ['🍜', '🍕', '🍔'];
const lastFood = food.pop();
console.log(lastFood); //🍔
console.log(food); //['🍜', '🍕' ];

 

Array.prototype.concat

여러 개의 배열을 붙여주는 메서드이다.

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);

console.log(arr1);
console.log(arr2);
console.log(arr3); //[ 1, 2, 3, 4, 5, 6 ]

 

Array.prototype.splice

원본 배열의 중간에 요소를 추가하거나 제거할 때 사용하는 메서드이다.

원본 배열을 직접 변경한다.

 

const food = ['🍜', '🍕', '🍔'];

const pick = food.splice(1, 1);
console.log(food); //['🍜', '🍔']
console.log(pick); //[ '🍕' ]

//인덱스 1부터 1개의 요소 제거하고, 그 자리에 🍟, 🥤 삽입
food.splice(1, 1, '🍟', '🥤');
console.log(food); //[ '🍜', '🍟', '🥤' ]

 

Array.prototype.slice

원본 배열을 잘라 새로운 배열을 만드는 메서드이다.

 

const food = ['🍜', '🍕', '🍔'];

const pick = food.slice(0, 2);
console.log(pick); //[ '🍜', '🍕' ]
console.log(food); //['🍜', '🍕', '🍔']; //원본 배열엔 변화가 없다

 

Array.prototype.reverse

원본 배열의 순서를 반대로 뒤집는 메서드이다.

 

const arr = [1, 2, 3, 4, 5, 6]

const reverseArr = arr.reverse();
console.log(reverseArr); //[ 6, 5, 4, 3, 2, 1 ]

 

Array.prototype.join

원본 배열의 모든 요소를 문자열로 변환하고, 인수로 받은 구분자로 문자열을 연결하여 반환하는 메서드이다.

 

const arr = [1, 2, 3, 4, 5];
const joinArr = arr.join(' ');
console.log(joinArr); //1 2 3 4 5

const joinArr2 = arr.join('');
console.log(joinArr2); //12345

 

Array.prototype.flat

중첩 배열을 하나의 배열로 평탄하게 만드는 메서드이다.

깊이의 기본값은 1이다.

 

let arr = [
  [1, [2, 3]],
  [4, [5, 6]],
];

console.log(arr.flat()); //[ 1, [ 2, 3 ], 4, [ 5, 6 ] ]
console.log(arr.flat(2)); //[ 1, 2, 3, 4, 5, 6 ]

 

Array.prototype.fill

인수로 받은 특정한 값으로 원본 배열을 다 채우는 메서드이다.

원본 배열을 직접 변경한다.

 

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

arr.fill(0); 
console.log(arr); //[ 0, 0, 0, 0, 0, 0 ]

//인수로 전달받은 '!'를 인덱스 1부터 3 이전까지 채운다.
arr.fill('!', 1, 3);
console.log(arr); //[ 0, '!', '!', 0, 0, 0 ]

 

🧀 배열 고차 함수

고차 함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.

 

Array.prototype.sort

배열의 요소를 정렬한다.

기본적으로 오름차순으로 정렬한다.

원본 배열을 직접 변경한다.

 

const texts = ['javaScript', 'css'];
texts.sort();
console.log(texts); //[ 'css', 'javaScript' ]

 

다만, 숫자 정렬의 경우 주의가 필요하다.

배열의 요소를 일시적으로 문자열로 변환해 정렬하기 때문이다.

 

const numbers = [0, 1, 5, 3, 10];
numbers.sort();
console.log(numbers); //[ 0, 1, 10, 3, 5 ]

 

따라서 숫자를 정렬할 때는 비교 함수를 인수로 전달해야 한다.

비교 함수의 반환값이 0보다 작으면 오름차순, 0보다 크면 내림차순으로 정렬한다.

 

const numbers = [0, 1, 5, 3, 10];
numbers.sort((a, b) => a - b);
console.log(numbers); //[ 0, 1, 3, 5, 10 ]

 

Array.prototype.forEach

for문 대신 사용할 수 있다.

내부에서 반복문을 통해 배열을 순회하면서 콜백 함수를 반복 호출한다.

 

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

numbers.forEach((numbers) => answer.push(numbers * 2));

console.log(answer); //[ 2, 4, 6 ]

 

Array.prototype.find

배열을 순회하면서 조건에 맞는 첫 번째 요소를 반환한다.

 

const food = [
  { name: 'pizza', emoji: '🍕' },
  { name: 'sushi', emoji: '🍣' },
  { name: 'ramen', emoji: '🍜' },
];

const answer = food.find((value) => value.name === 'pizza');
console.log(answer); //{ name: 'pizza', emoji: '🍕' }

 

Array.prototype.findIndex

배열을 순회하면서 조건에 맞는 첫번째 요소의 인덱스를 반환한다.

 

const food = [
  { name: 'pizza', emoji: '🍕' },
  { name: 'sushi', emoji: '🍣' },
  { name: 'ramen', emoji: '🍜' },
  { name: 'sushi', emoji: '🐟' },
];

const answer = food.findIndex((value) => value.name === 'sushi');
console.log(answer); //1

 

Array.prototype.map

for문 대신 사용할 수 있다.

내부에서 반복문을 통해 배열을 순회하면서 콜백 함수를 반복 호출한다.

콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.

 

 

const numbers = [1, 2, 3];
const answer = numbers.map((number) => number * 2);

console.log(answer); //[ 2, 4, 6 ]

 

Array.prototype.flatMap

map을 통해 생성된 배열을 평탄화한다.

 

const numbers = [1, 2, 3];
let answer = numbers.map((number) => [1, 2, 3]);
//[ [ 1, 2, 3 ], [ 1, 2, 3 ], [ 1, 2, 3 ] ]

answer = numbers.flatMap((number) => [1, 2, 3]);
console.log(answer); /**
[
  1, 2, 3, 1, 2,
  3, 1, 2, 3
] */

 

Array.prototype.some

배열을 순회하면서 부분적으로 조건에 맞는지 확인한다.

단 한번이라도 참이면 true, 그렇지 않다면 false를 반환한다.

 

const food = [
  { name: 'pizza', emoji: '🍕' },
  { name: 'sushi', emoji: '🍣' },
  { name: 'ramen', emoji: '🍜' },
];

const result = food.some((item) => item.name === 'pizza');
console.log(result); //true

 

Array.prototype.every

배열을 순회하면서 전체적으로 조건에 맞는지 확인한다.

모두 참이면 true, 그렇지 않다면 false를 반환한다.

 

const food = [
  { name: 'pizza', emoji: '🍕' },
  { name: 'sushi', emoji: '🍣' },
  { name: 'ramen', emoji: '🍜' },
];

const result = food.every((item) => item.name === 'pizza');
console.log(result); //false

 

Array.prototype.filter

배열을 순회하면서 콜백함수를 반복 호출한다.

콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.

원본 배열은 변경되지 않는다.

 

const food = [
  { name: 'pizza', emoji: '🍕' },
  { name: 'sushi', emoji: '🍣' },
  { name: 'ramen', emoji: '🍜' },
  { name: 'sushi', emoji: '🐟' },
];

const result = food.filter((item) => item.name === 'sushi');
console.log(result); //[ { name: 'sushi', emoji: '🍣' }, { name: 'sushi', emoji: '🐟' } ]

 

Array.prototype.reduce

배열을 순회하면서 콜백 함수를 반복 호출한다.

콜백 함수의 반환값을 다음 순회에 콜백 함수의 첫 번째 인수로 전달한다.

 

첫 번째 인수로 콜백 함수, 두 번째 인수로 초기값을 전달받는다.

 

const result = [1, 2, 3, 4, 5].reduce((sum, value) => (sum += value), 0);
console.log(result); //15