JS 배열

구조 분해 할당

• 구조 분해 할당 문법은 배열이나 객체의 속성을 해체 하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식을 말한다.

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

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

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

const fruits = ['사과', '바나나', '딸기', '수박'];
const [apple, ...others]  = fruits;
console.log(apple);  // 사과
console.log(others); // ['바나나', '딸기', '수박']

Spread syntax (전개구문)

• Spread는 펼치다라는 뜻으로, Spread syntax는 배열을 할당할 때 참조 값을 할당 하는게 아닌 배열안의 항목을 펼치는 방식으로 할당할 수 있다.

let arr = [1, 'two', 3, 'four'];
let numberArr = [...arr, 5, 'six'];
console.log('numberArr: ', numberArr);
// [출력]
// numberArr:  (6) [1, 'two', 3, 'four', 5, 'six']

Rest parameters

• 나머지 매개변수 구문(Rest parameters)를 사용하면 함수가 무한한 수의 파라미터를 배열로 받을 수 있다.

function printFruits(...fruits) {
	console.log('fruits: ', fruits);
}
function printTitleAndFruits(title, ...fruits) {
	console.log('title:' , title);
	console.log('fruits: ', fruits);
}
printFruits('사과', '바나나', '딸기');
printFruits('사과', '바나나', '딸기', '포도');
printTitleAndFruits('과일출력', '사과', '바나나', '딸기', '포도');

배열 복사하기

• 배열은 객체이기 때문에 당연히 참조 값을 가지고 있고 얇은 복사 를 할 경우에는 하나의 배열을 변경하면 다른 배열도 같은 메모리 참조 값을 가지고 있기 때문에 결국에는 함께 변경이 된다

const fruits = ['오렌지', '포도', '사과', '바나나', '딸기'];
const copy = fruits;
copy.pop();                        // 끝에 항목 제거
console.log('fruits: ', fruits);   // ['오렌지', '포도', '사과', '바나나']
console.log('copyFruits: ', copy); // ['오렌지', '포도', '사과', '바나나']

• 전개 구문을 사용해서 deep copy 문법을 사용하면 해당 원본에 값만 가져오기 때문에 하나의 배열을 변경해도 별개로서 존재한다.

const fruits = ['오렌지', '포도', '사과', '바나나', '딸기'];
const copy = [...fruits];
copy.pop();                        // 끝에 항목 제거
console.log('fruits: ', fruits);   // ['오렌지', '포도', '사과', '바나나', '딸기']
console.log('copyFruits: ', copy); // ['오렌지', '포도', '사과', '바나나']

• 혹은 Array.from () 메서드를 이용해도 된다.

const fruits = ['오렌지', '포도', '사과', '바나나', '딸기'];
const copy = Array.from(fruits);
copy.pop();                        // 끝에 항목 제거
console.log('fruits: ', fruits);   // ['오렌지', '포도', '사과', '바나나', '딸기']
console.log('copyFruits: ', copy); // ['오렌지', '포도', '사과', '바나나']