TIL 16 | JavaScript Array copy

Create new array - arr.concat(), arr.slice()

const hangeul = ['가', '나', '다', '라', '마'];
const hangeul2 = hangeul;
console.log(hangeul2); // ["가", "나", "다", "라", "마"]
hangeul2[2] = '사과'; 
console.log(hangeul); 
/* ["가", "나", "사과", "라", "마"] - hangeul2의 요소를 수정하였더니 
hangeul의 요소가 수정되었다. 결국 객체처럼 hangeul, hangeul2 모두 참조값임을 알 수 있다.*/

• 배열은 객체와 마찬가지로 단순히 변수에 복사하고자 하는 객체를 할당할 경우, 참조값만 늘어나게 된다. (배열은 근본적으로 객체의 한 종류이기 때문이다.)

• 이를 위해 원본 배열은 변경하지 않으며 메소드의 반환값으로 새로운 배열을 리턴하는, 간단히 말해 배열 복제(?)의 기능을 하는 arr.concat(), arr.slice()를 살펴보자 (물론 각 메소드 본연의 기능은 복제가 아니지만, 복제와 같은 기능도 수행한다고 말할 수 있다.)

1. arr.concat()

const num1 = [1, 2, 3, 4, 5];
const num2 = num1.concat(6, 7, 8);
console.log(num2); //[1, 2, 3, 4, 5, 6, 7, 8]
num2[0] = 10; // num2의 첫번째 값을 10으로 바꿈
console.log(num1) // [1, 2, 3, 4, 5]
console.log(num2) // [10, 2, 3, 4, 5, 6, 7, 8]

const num1 = [1, 2, 3, 4, 5];
const num2 = num1.concat(); // 인자 없이 적용
console.log(num2); // [1, 2, 3, 4, 5]
num2[0] = 10; // num2의 첫번째 값을 10으로 바꿈
console.log(num1) // [1, 2, 3, 4, 5]
console.log(num2) // [10, 2, 3, 4, 5] // 

• arr.concat() 메소드는 인자(())로 주어진 값들을 기존 배열에 합쳐서 새로운 배열을 반환한다. (본연의 기능은 합치기)

• 위의 첫 번째 예제처럼 concat을 통해 num1에 6,7,8의 값을 추가하여 num2에 할당하였으며, num2의 값을 수정해도 num1의 값이 바뀌지 않는 것을 알 수 있었다. (새로운 배열 생성)

• 물론 병합?과 달리 복제는 배열의 값이 같은 새로운 배열을 만들어야 한다. 때문에 concat() 메소드에 인자 없이 적용할 경우, 두 번째 예제처럼 배열 값이 복사되는 것을 알 수 있다.

2. arr.slice()

const num1 = [1, 2, 3, 4, 5];
const num2 = num1.slice(0,2);
console.log(num2); // [1, 2] 잘라서 새로운 배열 생성
num2[0] = 10; // num2의 첫번째 값을 10으로 바꿈
console.log(num1) // [1, 2, 3, 4, 5]
console.log(num2) // [10, 2]

const num1 = [1, 2, 3, 4, 5];
const num2 = num1.slice(); // 인자 없이 적용
console.log(num2); // [1, 2, 3, 4, 5]
num2[0] = 10; // num2의 첫번째 값을 10으로 바꿈
console.log(num1) // [1, 2, 3, 4, 5]
console.log(num2) // [10, 2, 3, 4, 5] // 

• arr.concat() 메소드는 인자((start index, end index + 1))로 원하는 부분만 잘라내어 새로운 배열 값을 반환한다.

• concat()과 마찬가지로 복제가 본연의 기능은 아니지만, 인자 값을 주지 않을 경우 2번째 예제처럼 복제를 하는 것을 알 수 있다.

Searching - arr.indexOf(), arr.includes()

1. Find index of elements - arr.indexOf()

const fruits = ['사과', '바나나', '딸기', '키위'];
console.log(fruits.indexOf('사과')) // 0
console.log(fruits.indexOf('키위')) // 3

• 배열 내 해당하는 요소의 index 값을 출력해준다.

2. Find elements - arr.includes()

const fruits = ['사과', '바나나', '딸기', '키위'];
console.log(fruits.includes('사과')) // true
console.log(fruits.includes('키위')) // true
console.log(fruits.includes('수박')) // false

• 배열 내 해당하는 요소가 있는 지에 대한 여부를 boolean 값으로 출력한다. (true, false)