📌

배열은 여러 개의 값을 순서대로 저장하는 리스트 형태의 데이터 구조입니다.

◼ 생성 방법

1. 기본 생성

let fruits = ["사과", "바나나", "오렌지"];

2. 크기 지정

// 크기가 5인 배열을 생성
let number = new Array(5);

console.log(number); // [ <5 empty items> ]

◼ 요소 접근

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]); // 사과
console.log(fruits[1]); // 바나나
console.log(fruits[2]); // 오렌지

◼ 배열 메서드

1. 변경 메서드

변경 메서드는 배열 자체를 변경하는 메서드입니다. 원본 배열을 수정하기 때문에 주의해서 사용해야 합니다.

push()

배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

let fruits = ["사과", "바나나"];
console.log(fruits); // [ "사과", "바나나" ]

fruits.push("오렌지");
console.log(fruits); // [ "사과", "바나나", "오렌지" ]

pop()

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

let fruits = ["사과", "바나나"];
console.log(fruits); // [ "사과", "바나나" ]

fruits.pop();
console.log(fruits); // [ "사과" ]

shift()

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

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits); // [ "사과", "바나나", "오렌지" ]

fruits.shift();
console.log(fruits); // [ "바나나", "오렌지" ]

unshift()

배열의 앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits); // [ "사과", "바나나", "오렌지" ]

fruits.unshift("포도");
console.log(fruits); // [ "포도", "사과", "바나나", "오렌지" ]

splice()

splice(pos, deleteCount, ...items)
pos부터 deleteCount개의 요소를 지우고, items을 추가하여 배열의 내용을 변경합니다.

let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도");

console.log(fruits); // [ "사과", "포도", "오렌지" ]

sort()

배열의 요소를 정렬합니다. 기본적으로 요소를 문자열로 취급하여 정렬합니다.

let fruits = ["바나나", "사과", "오렌지"];
fruits.sort();
console.log(fruits); // ["사과", "바나나", "오렌지"]

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b); // 숫자 정렬
console.log(numbers); // [1, 2, 3, 4, 5]

※연관 게시물 : 🔗 sort()

2. 비변경 메서드

비변경 메서드는 배열을 변경하지 않고, 새로운 배열을 반환하거나 값을 반환하는 메서드입니다.

concat()

두 개 이상의 배열을 결합하여 새로운 배열을 반환합니다.

let fruits = ["사과", "바나나"];
let moreFruits = ["체리", "오렌지"];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ["사과", "바나나", "체리", "오렌지"]

slice()

slice([start[, end])
start부터 end 바로 앞까지의 요소를 복사해 새로운 배열 생성합니다.

let fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 2);

console.log(slicedFruits); // [ "바나나" ]

join()

배열의 모든 요소를 문자열로 결합합니다.

let fruits = ["사과", "바나나", "오렌지"];
let fruitString = fruits.join(", ");
console.log(fruitString); // "사과, 바나나, 오렌지"

includes()

배열에 특정 요소가 포함되어 있는지 확인하고, 불리언 값을 반환합니다.

let fruits = ["사과", "바나나", "체리"];
console.log(fruits.includes("바나나")); // true
console.log(fruits.includes("오렌지")); // false

indexOf()

배열에서 특정 요소를 찾고, 그 요소의 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환합니다.

let fruits = ["사과", "바나나", "체리"];
console.log(fruits.indexOf("바나나")); // 1
console.log(fruits.indexOf("오렌지")); // -1

find()

기존에 있었던 값을 가공해서 새로운 값을 반환합니다.
조건에 부합하는 첫번째 아이템만 반환합니다.

let numbers = [4, 1, 5, 3, 2];

numbers.find(function (item) {
    return item > 3;
}); // 4

map()

기존에 있었던 값을 가공해서 새로운 값을 반환합니다.
항상 원본의 길이만큼 return 됩니다. 그 자리가 비어있을 경우 undefined가 반환합니다.

let numbers = [4, 1, 5, 3, 2];

numbers.map(function (item) {
    return item;
}); // [4, 1, 5, 3, 2]

filter()

배열의 각 요소에 대해 주어진 함수를 호출한 결과가 참인 요소만 모아 새로운 배열을 반환합니다.

let numbers = [4, 1, 5, 3, 2];

numbers.filter(function (item) {
    return item !== 5;
}); // [4, 1, 3, 2]

3. 순회 메서드

forEach()

주어진 함수를 배열 요소 각각에 대해 실행합니다.

forEach 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 한 번씩 실행하는 메서드로 새로운 배열을 반환하지 않고, 기존 배열을 변경하지도 않는다.

let numbers = [4, 1, 5, 3, 2];

numbers.forEach(function (item) {
    console.log(item);
}); // 4 1 5 3 2

콜백함수
매개변수 자리에 함수를 넣는 것
위 예시에서 콜백함수는 function (item) {}입니다.