• 원본 배열을 수정하지 않음
• 얕은 복사

1. concat

• 배열에 다른 배열이나 값을 이어붙인 결과를 반환

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = [true, false];

const arr4 = arr1.concat(arr2);
console.log(arr4);	// [1, 2, 3, 'a', 'b', 'c']

const arr5 = arr1.concat(arr2, 3);
console.log(arr5);	// [1, 2, 3, 'a', 'b', 'c', 3]

const arr6 = arr1.concat('ABC', arr2, arr3, 100);
console.log(arr6);	// [1, 2, 3, 'ABC', 'a', 'b', 'c', true, false, 100]

// ⭐️ 원본 배열들에는 변화 없음
console.log(arr1, arr2, arr3);	// [1, 2, 3] ['a', 'b', 'c'] [true, false]

• 해당 배열 뒤로 인자로 하나 이상 주어진 다른 배열이나 값을 이어붙인 결과를 반환

2. slice

• 인자로 주어진 범주의 값을 잘라 반환

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const arr2 = arr1.slice(3);
const arr3 = arr1.slice(3, 7);

console.log(arr2, arr3);	// [4, 5, 6, 7, 8, 9] [4, 5, 6, 7]

// 원본에는 변화 없음
console.log(arr1);	// [1, 2, 3, 4, 5, 6, 7, 8, 9]

3. flat

• 인자로 주어진 깊이만큼 배열을 펼쳐 반환

const orgArr = [
  1, 2,
  [3, 4],
  [5, [6, [7, 8]]]
];

// 인자가 없으면 1을 넣은 것과 같음
const arr0 = orgArr.flat();
const arr1 = orgArr.flat(1);
console.log('N:', arr0);	//	[1, 2, 3, 4, 5, [6, [7, 8]]]
console.log('1:', arr1);	//	[1, 2, 3, 4, 5, [6, [7, 8]]]

const arr2 = orgArr.flat(2);
const arr3 = orgArr.flat(3);
console.log('2:', arr2);	//	[1, 2, 3, 4, 5, 6, [7, 8]
console.log('3:', arr3);	//	[1, 2, 3, 4, 5, 6, 7, 8]

// 원본에는 변화 없음
console.log('org:', orgArr);	// [1, 2, [3, 4], [5, [6, [7, 8]]]]

앝은 복사

const orgArr = [
  1, { x: 2 }, [{ x: 3 }, {x: 4}], 5
];

const arr1 = orgArr.concat(6);
const arr2 = orgArr.slice(0, 3);
const arr3 = orgArr.flat();

orgArr[0] = 0;
orgArr[1].x = 20;
orgArr[2][0].x = 30;

console.log(orgArr);	// [1, {x: 20}, [{x: 30}, {x: 4}], 5]
console.log(arr1);	// [1, {x: 20}, [{x: 30}, {x: 4}], 5, 6]
console.log(arr2);	// [1, {x: 20}, [{x: 30}, {x: 4}]]
console.log(arr3);	// [1, {x: 20}, [{x: 30}, {x: 4}], 5]