자바스크립트 배열에 값 넣기: push, unshift, splice, concat
서론
오늘날 대부분의 프로그래밍 언어에서 배열은 핵심적인 데이터 구조입니다. 자바스크립트에서도 그 예외는 아닙니다. 당신이 웹 개발자라면, 배열에 값을 추가하는 다양한 방법에 익숙해져야 합니다. 오늘은 자바스크립트에서 배열에 값을 추가하는 네 가지 방법: push, unshift, splice, concat에 대해서 깊게 파헤쳐봅시다.
1. push: 배열의 끝에 값 추가하기
1.1 기본 사용법
push 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.
let fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // ["apple", "banana", "orange"]
1.2 주의점
- 원본 배열을 직접 수정합니다.
2. unshift: 배열의 시작에 값 추가하기
2.1 기본 사용법
unshift 메서드는 배열의 시작 부분에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.
let fruits = ['apple', 'banana'];
fruits.unshift('kiwi');
console.log(fruits); // ["kiwi", "apple", "banana"]
2.2 주의점
- 원본 배열을 직접 수정합니다.
3. splice: 배열의 중간에 값 추가하기
3.1 기본 사용법
splice 메서드는 배열의 특정 위치에 값을 추가하는 데 사용됩니다. 위치와 추가할 값을 인수로 전달해야 합니다.
let fruits = ['apple', 'banana'];
fruits.splice(1, 0, 'grape');
console.log(fruits); // ["apple", "grape", "banana"]
3.2 주의점
- 원본 배열을 직접 수정합니다.
4. concat: 여러 배열을 합치기
4.1 기본 사용법
concat 메서드는 여러 배열을 합쳐 새로운 배열을 반환합니다. 원본 배열은 수정되지 않습니다.
let fruits1 = ['apple', 'banana'];
let fruits2 = ['orange', 'kiwi'];
let allFruits = fruits1.concat(fruits2);
console.log(allFruits); // ["apple", "banana", "orange", "kiwi"]
4.2 주의점
- 원본 배열은 그대로 유지됩니다.
- 새로운 배열을 반환하기 때문에 메모리 사용에 주의해야 합니다.
5. spread 연산자: 유연하게 배열 요소 추가하기
5.1 기본 사용법
자바스크립트 ES6에서 도입된 spread 연산자 ...는 배열이나 객체를 개별 요소로 분해할 수 있습니다. 배열에 새로운 요소를 추가할 때 유용하게 사용됩니다.
javascriptCopy codelet fruits = ['apple', 'banana']; let newFruits = [...fruits, 'orange', 'kiwi']; console.log(newFruits); // ["apple", "banana", "orange", "kiwi"]
let fruits = ['apple', 'banana'];
let newFruits = [...fruits, 'orange', 'kiwi'];
console.log(newFruits); // ["apple", "banana", "orange", "kiwi"]
5.2 주의점
- 원본 배열은 수정되지 않습니다.
- 새로운 배열을 반환합니다.
6. length 프로퍼티: 배열의 끝에 값 추가하기
6.1 기본 사용법
length 프로퍼티를 사용하여 배열의 길이를 변경하면 배열에 새로운 요소를 추가할 수 있습니다.
let fruits = ['apple', 'banana'];
fruits[fruits.length] = 'grape';
console.log(fruits); // ["apple", "banana", "grape"]
6.2 주의점
- 원본 배열을 직접 수정합니다.
결론
자바스크립트에서 배열에 값을 추가하는 방법은 다양합니다. 각 방법마다 특징과 장단점이 있으므로 상황에 따라 적절한 방법을 선택하는 것이 중요합니다. 배열 조작은 웹 개발뿐만 아니라 다양한 프로그래밍 작업에서 필수적인 스킬이므로, 오늘 배운 내용을 꾸준히 연습하고 활용해보세요! 🚀
함께 읽으면 좋은 글
