[Javascript] 원본 배열은 변경하지 않고 참조만 하는 Array 메소드

 

 

🎡 Array.prototype 메소드

 

모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받습니다.

이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있습니다.

 

1. 원본 배열을 변경하는 메소드

2. 원본 배열은 변경하지 않고 참조만 하는 메소드

3. 원본 배열을 반복적으로 참조하는 메소드

 

 

 

---

 

💖 자바스크립트 원본 배열은 변경하지 않고 참조만 하는 Array.prototype  메소드

 

메소드	설명
join()	배열의 모든 요소를 하나의 문자열로 반환함.
slice()	전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 만든 새로운 배열을 반환함.
concat()	해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환함.
toString()	해당 배열의 모든 요소를 하나의 문자열로 반환함.
toLocaleString()	해당 배열의 모든 요소를 하나의 문자열로 반환함.
indexOf()	전달받은 값과 동일한 배열 요소가 처음으로 등장하는 위치의 인덱스를 반환함.
lastIndexOf()	전달받은 값과 동일한 배열 요소가 마지막으로 등장하는 위치의 인덱스를 반환함.

 

 

 

 

---

 

✨ 원본 배열은 변경하지 않고 참조만 하는 메소드 Array.prototype 메소드

다음 메소드는 원본 배열을 직접 변경하지는 않고, 참조만 하는 메소드입니다.

 

1. join()

2. slice()

3. concat()

4. toString()

 

 

 

 

---

🔊 join() 메소드

 

array.join(separator(필수));

 

원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 값,

즉 구분자(separator)로 연결한 문자열을 반환합니다.

구분자(separator)는 생략 가능하며 기본 구분자는 입니다.

 

인수로 전달받은 문자열은 배열 요소 사이를 구분 짓는 구분자로 사용됩니다.

만약 인수를 전달받지 않으면 기본값으로 쉼표(,)를 구분자로 사용합니다.

 

 

[파라미터]

- separator : 필수 입력값, 배열의 원소를 하나의 문자열로 결합할 때 원소와 원소 사이에 위치할 문자열

 

 

[리턴값]

string

 

 

const arr = [1, 2, 3, 4];

// 기본 구분자는 ','이다.
// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 기본 구분자 ','로 연결한 문자열을 반환
let result = arr.join();
console.log(result); // '1,2,3,4';

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 빈문자열로 연결한 문자열을 반환
result = arr.join('');
console.log(result); // '1234'

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 구분자 ':'로 연결한 문자열을 반환
result = arr.join(':');
console.log(result); // '1:2:3:4'

 

 

 

 

---

 

🔊 slice() 메소드

 

array.slice(start(필수), end(필수))

 

인자로 지정된 배열의 부분을 복사하여 반환합니다. 원본을 수정하지 않는다

 

원본 배열은 변경되지 않는다.전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 새로운 배열을 반환합니다.

 

인수로 종료 인덱스가 전달되지 않으면 마지막 배열 요소까지 모두 추출합니다.

 

 

[파라미터]

- number : 필수 입력값, 추출 구간의 시작점

- end: 필수 입력값, 추출 구간의 종료점, 생략하면 배열의 끝점까지를 추출 구간으로 지정

 

 

[리턴값]

array, 시작점과 종료점 사이의 추출구간에 해당하는 원소를 담고 있는 배열

 

 

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

// items[0]부터 items[1] 이전(items[1] 미포함)까지 반환
let res = items.slice(0, 1);
console.log(res); // [ 'a' ]

// items[1]부터 items[2] 이전(items[2] 미포함)까지 반환
res = items.slice(1, 2);
console.log(res); // [ 'b' ]

// items[1]부터 이후의 모든 요소 반환
res = items.slice(1);
console.log(res); // [ 'b', 'c' ]

// 인자가 음수인 경우 배열의 끝에서 요소를 반환
res = items.slice(-1);
console.log(res); // [ 'c' ]
res = items.slice(-2);
console.log(res); // [ 'b', 'c' ]

// 모든 요소를 반환 (= 복사본(shallow copy) 생성)
res = items.slice();
console.log(res); // [ 'a', 'b', 'c' ]

 

 

🎁 slice 메소드에 인자를 전달하지 않으면 원본 배열의 복사본을 생성하여 반환한다. 이때 원본 배열의 각 요소를 얕은 복사(shallow copy)하여 새로운 복사본을 생성한다.

const todos = [
{ id: 1, content: 'HTML', completed: false },
{ id: 2, content: 'CSS', completed: true },
{ id: 3, content: 'Javascript', completed: false }
];

// shallow copy
const _todos = todos.slice();
// const _todos = [...todos];
console.log(_todos === todos); // false

// 배열의 요소는 같다. 즉, 얕은 복사되었다.
console.log(_todos[0] === todos[0]); // true

 

 

🎁 이를 이용하여 arguments, HTMLCollection, NodeList와 같은 유사 배열 객체(Array-like Object)를 배열로 변환할 수 있다.

function sum() {
  // 유사 배열 객체 => Array
  const arr = Array.prototype.slice.call(arguments); // [1, 2, 3]
 
  const arr0 = [].slice.call(arguments); // [1, 2, 3]
 
  // Spread 문법
  const arr1 = [...arguments]; // [1, 2, 3]
 
  // Array.from 메소드는 유사 배열 객체를 복사하여 배열을 생성한다.
  const arr2 = Array.from(arguments); // [1, 2, 3]
 
}
 
console.log(sum(1, 2, 3));

 

 

 

 

---

 

🔊 concat() 메소드

 

array.concat(valueN(필수))

 

인수로 전달된 값들(배열 또는 값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.

인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가한다.

원본 배열은 변경되지 않는다.

 

 

[파라미터]

- valueN : 필수 입력값, 결합할 배열

 

 

[리턴값]

string 과 valueN을 결합한 Array

 

 

const arr1 = [1, 2];
const arr2 = [3, 4];

// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
// 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가한다.
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]

// 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
result = arr1.concat(3);
console.log(result); // [1, 2, 3]

// 배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
result = arr1.concat(arr2, 5);
console.log(result); // [1, 2, 3, 4, 5]

// 원본 배열은 변경되지 않는다.
console.log(arr1); // [1, 2]

 

 

 

 

 

---

 

🔊 toString() 메소드

 

array.toString()

 

해당 배열의 모든 요소를 하나의 문자열로 반환합니다. 이때 배열 요소의 사이에는 자동으로 쉼표(,)가 삽입됩니다.

 

 

[리턴값]

string, 배열의 원소를 콤마로 구분한 문자열

 

 

// toString의 기본적인 동작
const numbers = ['one', 'two', 'three', 'four', 'five'];
alert(numbers.toString());
alert(numbers);
 
 
// prototype을 이용하면 객체의 toSting을 재정의(overriding)할 수 있다.
// 다음 코드는 배열의 toString을 오버로딩해서 alert의 표시 값을 변경할수 있다.
Array.prototype.toString = function(){
    const str = '';
    for(var i = 0; i < this.length; i++){
        str += i +':'+ this[i]+'\n';
    }
    return str;
}
const numbers = ['one', 'two', 'three', 'four', 'five'];
alert(numbers.toString());
alert(numbers);