5. 배열

배열이란

• 값과 인덱스로 참조되어 정렬된 집합입니다.
• 여기서 index는 배열의 위치를 의미합니다.
• 배열의 값은 서로 타입이 다를 수 있으며 비어 있을 수도 있습니다.

 

 

배열 생성

리터럴 표기법 (array literal syntax)

let fruit = ['사과', '바나나', '딸기'];

 

 

생성자 표기법 (array constructor syntax)

let fruit = new Array('사과', '바나나', '딸기');

 

 

배열 접근

[ ](대괄호)를 통해 배열안의 값에 접근할 수 있으며 index는 0부터 시작합니다.

let fruit = ['사과', '바나나', '딸기'];

console.log(fruit[0]);  // "사과"
console.log(fruit[1]);  // "바나나"
fruit[2] = '포도';
console.log(fruit[2]);  // "포도"

 

 

배열의 속성 및 메서드

length - 배열의 길이

let fruit = ['사과', '바나나', '딸기'];

console.log(fruit.length); // 배열의 길이
console.log(fruit[fruit.length - 1]); // 배열의 마지막 항목 가져오기

 

 

push - 배열 끝에 항목 추가하기

let fruit = ['사과', '바나나', '딸기'];
fruit.push('포도');
fruit.push('오렌지');

console.log(fruit);  // ['사과', '바나나', '딸기', '포도', '오렌지']

 

 

forEach - 배열의 항목을 순환하며 처리하기

let fruit = ['사과', '바나나', '딸기'];

fruit.forEach(function (item, index, array) { //값, index, array
  console.log(item, index, array);
});

 

 

pop - 배열 끝에 항목 제거하기

let fruit = ['사과', '바나나', '딸기'];
fruit.pop();

console.log(fruit);   // ['사과', '바나나']

 

 

shift - 배열 앞에 항목 제거하기

let fruit = ['사과', '바나나', '딸기'];
fruit.shift();

console.log(fruit);   // ['바나나', '딸기']

 

 

unshift - 배열 앞에 항목 추가하기

let fruit = ['사과', '바나나', '딸기'];
fruit.unshift('포도');
fruit.unshift('오렌지');

console.log(fruit);  // ['오렌지', '포도', '사과', '바나나', '딸기']

 

 

indexOf - 배열 안에서 index 찾기

let fruit = ['사과', '바나나', '딸기'];
let index = fruit.indexOf('사과');

console.log(index);  // 0

 

 

splice - 인덱스 위치에있는 항목 제거하기

let fruit = ['사과', '바나나', '딸기', '포도', '오렌지'];
fruit.splice(0, 1);

console.log(fruit);  // ['바나나', '딸기', '포도', '오렌지']

 

 

구조 분해 할당 (Distructuring assignment)

• 배열이나 객체의 속성값을 개별 변수에 담을 수 있게 하는 표현식 입니다.

 

일반 - 배열 항목을 개별 변수에 담을 때

let fruit = ['사과', '바나나', '딸기'];
let apple = fruit[0];
let banana = fruit[1];
let strawberry = fruit[2];

console.log(apple, banana, strawberry);  // 사과 바나나 딸기

 

 

구조 분해 할당 - 배열 항목을 개별 변수에 담을 때

let fruit = ['사과', '바나나', '딸기'];
let [apple, banana, strawberry]  = fruit;

console.log(apple, banana, strawberry); // 사과 바나나 딸기

let fruit = ['사과', '바나나', '딸기', '포도', '오렌지'];
let [apple, ...other]  = fruit;

console.log(apple);   // 사과
console.log(other);  // ['바나나', '딸기', '포도', '오렌지']

 

 

전개 구문(Spread syntax)

•  전개구문은 ... 표기법을 사용하여 값 말고도 배열안의 항목을 펼치는 방식으로 할당할 수 있습니다.

let arr = [1, 'a', 2, 'b'];
let spread = [...arr, 3, 'c'];

console.log(spread);  // (6) [1, 'a', 2, 'b', 3, 'c']


function array(...temp) {  //함수가 파라미터를 배열로 받을 수 있다
  console.log(temp);
}

array(1, 2, 3);  // (3) [1, 2, 3]

 

 

배열 복사

• 배열은 객체이기 때문에 참조값을 갖고 있어서 이 값을 다른 배열에 할당하면 같은 참조값을 갖기 때문에 하나의 배열을 변경하면 다른 배열도 함께 변경이 됩니다. 이를 얕은 복사라고 합니다.
• 이러한 문제를 해결하기 위해 깊은 복사를 사용합니다.

 

얕은 복사

let fruit = ['오렌지', '포도', '사과', '바나나', '딸기'];
let copy = fruit;
copy.pop();                        // 끝에 항목 제거

console.log(fruit);   // ['오렌지', '포도', '사과', '바나나']
console.log(copy);   // ['오렌지', '포도', '사과', '바나나']

 

 

깊은 복사 - 전개 구문

let fruit = ['오렌지', '포도', '사과', '바나나', '딸기'];
let copy = [...fruit];
copy.pop();                        // 끝에 항목 제거

console.log(fruit);   // ['오렌지', '포도', '사과', '바나나', '딸기']
console.log(copy);   // ['오렌지', '포도', '사과', '바나나']

 

 

깊은 복사 - Array.from

let fruit = ['오렌지', '포도', '사과', '바나나', '딸기'];
let copy = Array.from(fruit);
copy.pop();                        // 끝에 항목 제거

console.log(fruit);   // ['오렌지', '포도', '사과', '바나나', '딸기']
console.log(copy);   // ['오렌지', '포도', '사과', '바나나']

 

 

깊은 복사 - slice

let fruit = ['오렌지', '포도', '사과', '바나나', '딸기'];
let copy = fruit.slice();
copy.pop();                        // 끝에 항목 제거

console.log(fruit);   // ['오렌지', '포도', '사과', '바나나', '딸기']
console.log(copy); // ['오렌지', '포도', '사과', '바나나']