💭배열(array)이란?

• 하나의 변수 안에 여러 데이터 값을 저장할 때 사용
• 여러 개의 변수를 사용하지 않고도 데이터를 관리, 조작하는 것이 가능하여 효율적

배열의 특징

• 배열을 사용할 때는 [ ] 대괄호 안에 작성
• 배열 안에 있는 값들은 요소(element)라고 함
• 각 요소들은 순서가 있는데 이는 index 순서라고 하며, 순서는 0부터 시작

1. 동적 크기 : 배열의 크기가 고정되어 있지 않고 필요에 따라 늘리고 줄이는 것이 가능
2. 다양한 타입 허용 : 숫자, 문자열, 객체 등 다양한 타입의 요소를 함께 저장
3. 배열 메소드 : 배열은 다양한 내장 메소드를 제공하여 데이터를 쉽게 조작하는 것이 가능

📌예시

const arr_1 = [0, 2, 4, 6, 8];

const arr_2 = ['apple', 'banana', 'melon'];

const arr_3 = ['apple', 'banana', 'melon', 4, 6];

const arr_4 = [1, 'apple', true];

const arr_5 = [[1, 2, 3], ['apple', 'banana']];

const arr_6 = [
    {id : 1, name : 'pear'},
    {id : 2, name : 'pineapple'},
    {id : 3, name : 'grape'},
];

💭배열 속성

length

: 배열의 길이(요소의 개수)

const arr = [0, 2, 4, 6, 8];
console.log(arr.length);  // => 5

💭배열 메소드

1. unshift

: 배열의 첫 위치에 요소를 추가

const arr = [0, 2, 4];
arr.unshift('apricot');
console.log(arr);  // => ['apricot', 0, 2, 4]

2. push

: 배열의 마지막 위치에 요소를 추가

const arr = [0, 2, 4];
arr.push('durian');  
console.log(arr);  // => [0, 2, 4, 'durian']

3. shift

: 배열의 첫 위치에 있는 요소를 제거

const arr = [0, 2, 4];
arr.shift();
console.log(arr);  // => [2, 4]

4. pop

: 배열의 마지막 위치에 있는 요소를 제거

const arr = [0, 2, 4];
arr.pop();
console.log(arr);  // => [0, 2]

5. splice

• 배열의 특정위치에 요소를 추가하거나 삭제하여 부분적으로 변환
• 원본 배열 자체를 수정

splice(index number, 삭제할 요소 개수, 배열에 추가할 요소);

1) 인덱스 1번 자리에서 0개의 요소를 삭제하고 kakao를 추가

const arr = [0, 2, 4];
arr.splice(1, 0, 'kakao');  
console.log(arr);  // => [0, 'kakao', 2, 4]

2) 인덱스 0번 자리에서 1개의 요소를 삭제하고 pineapple을 추가

const arr = [0, 2, 4];
arr.splice(0, 1, 'pineapple');  
console.log(arr);  // => ['pineapple', 2, 4]

6. slice

• 배열의 특정부분을 잘라서 복사본을 새로운 배열로 반환
• 원본 배열 자체는 수정되지 않음

slice(start index number, end index number);

※ start index number : 0을 시작으로 하는 추출 시작점에 대한 인덱스

• 생략하면 0번 인덱스부터 자르기 시작
• 음수는 배열의 끝에서부터의 길이를 나타냄
• 배열의 길이보다 큰 경우에는 빈 배열을 반환

※ end index number : 추출 종료점에 대한 인덱스

• slice로 새롭게 반환된 배열은 end index 요소가 제외되고 추출
• 음수는 배열의 끝에서부터의 길이를 나타냄
• 생략되거나, 배열의 길이보다 크면 배열의 끝까지 추출

1) 2번 인덱스부터 끝까지 추출

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));  // => ['camel', 'duck', 'elephant']

2) 2번 인덱스부터 4번 인덱스까지 추출

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2, 4));  // => ['camel', 'duck']

3) 2번 인덱스부터 배열의 끝에서 두번째 요소까지 추출

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2, -1));  // => ['camel', 'duck']

7. split

: 문자열을 구분자(분리자)를 이용하여 배열로 분리

split('구분자', 최대 배열의 크기);

const str = 'apple, banana, kiwi, cherry';
console.log(str.split(',', 3));  // => ['apple', 'banana', 'kiwi']
console.log(str.split());  // => ['apple, banana, kiwi, cherry']

8. concat

: 다수의 배열을 결합해 새로운 배열 반환

arr.concat(arr1, arr2, ...);

const arr1 = ['bear', 'lion'];
const arr2 = ['hippo', 'monkey'];

console.log(arr1.concat(arr2));  
// => ['bear', 'lion', 'hippo', 'monkey']

9. join

: 배열 안에 있는 요소를 하나의 문자열로 결합

const arr1 = [2, 4, 6];
const arr2 = ['a', 'b', 'c'];

console.log(arr1.join());  // => 2,4,6
console.log(arr2.join());  // => a,b,c
console.log(arr2.join(''));  // => abc
console.log(arr2.join('-'));  // => a-b-c

10. reverse

: 배열의 요소를 역순으로 반환

const arr = [0, 2, 4];
arr.reverse();
console.log(arr);  //  => [4, 2, 0]

11. toString

: 배열을 문자열로 변환

const arr = [0, 2, 4];

console.log(arr.toString());  // => 0, 2, 4
console.log(typeof arr.toString());  // => string

12. includes

: 배열 안에 요소의 포함 여부 반환

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

console.log(str.includes('d'));  // => false
console.log(str.includes('a'));  // => true