Array 메소드

Array.prototype 메소드

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

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

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

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

1. push()

2. pop()

3. shift()

4. unshift()

5. reverse()

6. sort()

7. splice()

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

1. push() 메소드

push() 메소드는 하나 이상의 요소를 배열의 가장 마지막에 추가합니다.

원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어나게 되며, 요소를 성공적으로 추가하면 배열의 총 길이를 반환합니다.

ex)

let arr = [1, true, "JavaScript"];
arr.length;		  // 3
arr.push("자바스크립트");

arr.length;  		  // 4
arr;  // [1,true,JavaScript,자바스크립트]

arr.push(2, "거짓");
arr.length;               // 6
arr; 	 // [1,true,JavaScript,자바스크립트,2,거짓]

2. pop() 메소드

pop() 메소드는 배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환합니다.

따라서 pop() 메소드를 실행할 때마다 배열의 길이는 1씩 줄어들게 됩니다.

ex)

let arr = [1, true, "JavaScript", "자바스크립트"];
arr.length;  // 4
arr.pop();   // 자바스크립트

arr.length;  // 3
arr.pop();   // JavaScript

arr.length); // 2
arr;	     // [1,true]

3. shift() 메소드

shift() 메소드는 pop() 메소드와는 달리 배열의 가장 마지막 요소가 아닌 첫 요소를 제거하고, 그 제거된 요소를 반환합니다.

따라서 shift() 메소드도 실행할 때마다 배열의 길이가 1씩 줄어들게 됩니다.

ex)

var arr = [1, true, "JavaScript", "자바스크립트"];
arr.length;  // 4
arr.shift(); // 1

arr.length;  // 3
arr.shift(); // true

arr.length;  // 2
arr;         // [JavaScript,자바스크립트]

4. unshift() 메소드

unshift() 메소드는 하나 이상의 요소를 배열의 가장 앞에 추가합니다.

원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어나게 되며, 요소를 성공적으로 추가하면 배열의 총 길이를 반환합니다.

ex)

var arr = [1, true, "JavaScript"];
arr.length;                  // 3
arr.unshift("자바스크립트");

arr.length;                  // 4
arr;              // [자바스크립트,1,true,JavaScript]
arr.unshift(2, "거짓");

arr.length;                  // 6
arr;        // [2,거짓,자바스크립트,1,true,JavaScript]

5. reverse() 메소드

reverse() 메소드는 배열 요소의 순서를 전부 반대로 교체합니다.

즉, 가장 앞에 있던 요소가 가장 뒤에 위치하며, 가장 뒤에 있던 요소는 가장 앞에 위치하게 됩니다.

ex)

let arr = [1, true, "JavaScript", "자바스크립트"];
arr.reverse(); // [자바스크립트,JavaScript,true,1]]

6. soft() 메소드

sort() 메소드는 해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬합니다.

이 메소드는 배열 요소를 모두 문자열로 보고 정렬하므로, 숫자나 불리언과 같은 타입의 요소들은 잘못 정렬될 수도 있습니다.

ex)

let strArr = ["로마", "나라", "감자", "다람쥐"]; // 한글은 ㄱ,ㄴ,ㄷ순으로 정렬됨.
let numArr = [10, 21, 1, 2, 3];                  // 숫자는 각 자릿수 별로 비교된 후 정렬됨.
strArr.sort(); // [감자,나라,다람쥐,로마]
numArr.sort(); // [1,10,2,21,3]

7. splice() 메소드

splice() 메소드는 기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경합니다.

첫 번째 인수는 새로운 요소가 삽입될 위치의 인덱스이며, 두 번째 인수는 제거할 요소의 개수입니다.

그 이후의 인수들은 모두 배열 요소로서 지정된 인덱스부터 차례대로 삽입됩니다.

이 메소드는 배열에서 제거된 요소를 배열의 형태로 반환하며, 아무 요소도 제거되지 않았으면 빈 배열을 반환합니다.

ex)

var arr = [1, true, "JavaScript", "자바스크립트"];
// 인덱스 1의 요소부터 2개의 요소를 제거한 후, false와 "C언어"를 그 자리에 삽입함.
var removedElement = arr.splice(1, 2, false, "C언어");
arr;            // [1,false,C언어,자바스크립트]
removedElement; // [true,JavaScript]

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

1. join()

2. slice()

3. concat()

4. toString()

1. join() 메소드

join() 메소드는 배열의 모든 요소를 하나의 문자열로 반환합니다.

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

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

ex)

let arr = [1, true, "JavaScript"];
arr.join();      // 1,true,JavaScript
arr.join(' + '); // 1 + true + JavaScript
arr.join(' ');   // 1 true JavaScript
arr.join('');    // 1trueJavaScript

2. slice() 메소드

slice() 메소드는 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 새로운 배열을 반환합니다.

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

ex)

let arr = [1, true, "JavaScript", "자바스크립트"];
arr.slice(1, 3); // [true,JavaScript]
arr.slice(1);    // [true,JavaScript,자바스크립트 ]

3. concat() 메소드

concat() 메소드는 해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환합니다.

ex)

let arr = [1, true, "JavaScript"];
arr.concat([2, false, "문자열"]); // [1,true,JavaScript,2,false,문자열]
arr.concat([2], [3, 4]);         // [1,true,JavaScript,2,3,4] -> 2개 이상의 배열도 한 번에 합칠 수 있음.
arr.concat("다섯", [6, 7]);       // [1,true,JavaScript,다섯,6,7] -> 값과 배열도 한 번에 합칠 수 있음.

4. toString() 메소드

toString() 메소드는 해당 배열의 모든 요소를 하나의 문자열로 반환합니다.

이때 배열 요소의 사이에는 자동으로 쉼표(,)가 삽입됩니다.

ex)

let arr = [1, true, "JavaScript"];
arr.toString(); // '1,true,JavaScript'