[JavaScript]배열의 요소를 추가하는 방법

JavaScript에서 배열의 요소를 추가하는 방법을 정리합니다.

 

기존 배열을 변경하는 push, unshift, splice 함수 그리고 length 프로퍼티를 사용하여 요소를 추가하는 방법

기존 배열을 변경하지 않고 새로운 배열을 생성하는 concat 함수와 spread( ... ) 연산자를 사용하여 요소를 추가하는 방법이 존재합니다.

 

목차

1. push 함수를 사용하여 배열의 마지막 위치에 요소를 추가
2. unshift 함수를 사용하여 배열의 첫 번째 위치에 요소를 추가
3. splice 함수를 사용하여 배열 요소를 추가
4. length 속성을 사용하여 배열 요소를 추가
5. concat 함수를 사용하여 배열 요소를 추가
6. spread 연산자를 사용하여 배열 요소를 추가

---

push 함수를 사용하여 배열의 마지막 위치에 요소를 추가

push 함수는 배열의 마지막에 요소를 추가합니다.

반환 값은 추가 후 배열의 length입니다.

var arr = ['A', 'B', 'C', 'D'];

console.log('*****push 함수 호출 전 배열의 길이*****');
console.log(arr.length); 
// 4

var pushResult = arr.push('E');

console.log('*****push 함수 호출 후 배열의 길이*****');
console.log(arr.length); 
// 5

console.log('*****arr의 값*****');
console.log(arr);
// ["A", "B", "C", "D", "E"]

console.log('*****pushResult의 값*****');
console.log(pushResult);
// 5

 

배열의 마지막 위치에 여러 개의 요소를 추가할 수 있습니다.

var arr = ['A', 'B', 'C', 'D'];

console.log('*****push 함수 호출 전 배열의 길이*****');
console.log(arr.length); 
// 4

var pushResult = arr.push('E', 'F', 'G');

console.log('*****push 함수 호출 후 배열의 길이*****');
console.log(arr.length); 
// 7

console.log('*****arr의 값*****');
console.log(arr);
// ["A", "B", "C", "D", "E", "F", "G"]

console.log('*****pushResult의 값*****');
console.log(pushResult);
// 7

 

push 함수에 apply 함수를 메서드 체이닝 기능을 사용하여 두 개의 배열을 합칠 수 있습니다.

var arrOrigin = ['A', 'B', 'C'];
var arrAdd = [1, 2, 3];

Array.prototype.push.apply(arrOrigin, arrAdd);

console.log('*****arrOrigin의 값*****');
console.log(arrOrigin);
// ["A", "B", "C", 1, 2, 3]

---

unshift 함수를 사용하여 배열의 첫 번째 위치에 요소를 추가

unshift 함수는 배열의 첫 번째 위치에 요소를 추가합니다.

반환 값은 push 함수와 동일하며, 여러 개의 요소를 추가할 수 있습니다.

var arr = ['A', 'B', 'C', 'D'];

console.log('*****push 함수 호출 전 배열의 길이*****');
console.log(arr.length); 
// 4

var unshiftResult = arr.unshift('E', 'F', 'G');

console.log('*****unshift 함수 호출 후 배열의 길이*****');
console.log(arr.length); 
// 7

console.log('*****arr의 값*****');
console.log(arr);
// ["E", "F", "G", "A", "B", "C", "D"]

console.log('*****unshiftResult의 값*****');
console.log(unshiftResult);
// 7

---

splice 함수를 사용하여 배열 요소를 추가

splice 함수를 사용하여 배열의 요소를 추가할 수 있습니다.

첫 번째 인수는 추가 또는 제거할 배열 요소의 위치(인덱스)를 설정합니다.

두 번째 인수는 제거할 배열 요소의 개수를 설정합니다.

세 번째 인수부터는 추가할 요소입니다.

 

아래 코드는 1번째 index부터 0개의 배열 요소를 제거하고 'E', 'F'를 추가합니다.

var arr = ['A', 'B', 'C', 'D'];

arr.splice(1, 0, 'E', 'F');

console.log('*****arr의 값*****');
console.log(arr);
// ["A", "E", "F", "B", "C", "D"]

---

length 속성을 사용하여 배열 요소를 추가

Array[index] = 값

자바스크립트에서 위 방법으로 특정 index 위치에 값을 추가할 수 있습니다.

var arr = ['A', 'B', 'C', 'D'];

arr[4] = 'E'

console.log('*****arr의 값*****');
console.log(arr);
// ["A", "B", "C", "D", "E"]

---

concat 함수를 사용하여 배열 요소를 추가

concat 함수는 기존 배열과 인자로 주어진 배열 또는 값을 병합하여 새로운 배열을 생성합니다.

var arr = ['A', 'B', 'C', 'D'];
var concatResult = arr.concat(['E', 'F', 'G']);

console.log('*****arr의 값*****');
console.log(arr);
// ["A", "B", "C", "D"]

console.log('*****concatResult의 값*****');
console.log(concatResult);
// ["A", "B", "C", "D", "E", "F", "G"]

---

spread 연산자를 사용하여 배열 요소를 추가

spread( ... ) 연산자를 사용하여 새로운 배열을 생성할 수 있습니다.

var arrStr = ['A', 'B', 'C', 'D'];
var arrNum = ['1', '2', '3', '4'];

var spreadArr = [...arrStr, ...arrNum];

console.log('*****spreadArr의 값*****');
console.log(spreadArr);
// ["A", "B", "C", "D", "1", "2", "3", "4"]

 

spread 연산자를 사용하지 않을 경우 중첩된 배열을 생성합니다.

var arrStr = ['A', 'B', 'C', 'D'];
var arrNum = ['1', '2', '3', '4'];

var spreadArr = [arrStr, arrNum];

console.log('*****spreadArr의 값*****');
console.log(spreadArr);
// [["A", "B", "C", "D"], ["1", "2", "3", "4"]]

 

배열 변수가 아니라 값을 전달하여 병합할 수 있습니다.

아래 코드는 spread( ... ) 연산자를 사용한 arrStr 배열과 'E', 'F' 값을 병합합니다.

var arrStr = ['A', 'B', 'C', 'D'];

var spreadArr = [...arrStr, 'E', 'F'];

console.log('*****spreadArr의 값*****');
console.log(spreadArr);
// ["A", "B", "C", "D", "E", "F"]