[자바스크립트] 자바스크립트 배열 push, pop, shift, unshift 함수의 개념과 사용법

 

 

 

 

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기

---

 

배열 reduce() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/256

[자바스크립트] 배열(array) reduce 함수의 개념및 활용도 높은 사용법

 

 

배열 join() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/254

[자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개념 및 사용법

 

 

배열 map(), forEach() 인기 있는 메서드 사용법에 대해 알아보기

https://cometruedream.tistory.com/253

[자바스크립트] 배열(array)을 처리하는 인기있는 메소드 map(), forEach() 개념과 차이점

 

 

활용가치가 좋은 every(), some() 함수 사용법에 대해 알아보기

https://cometruedream.tistory.com/250

[자바스크립트] 활용가치가 좋은 내장함수와 every(), some() 함수의 개념 및 활용법

 

 

자바스크립트 객체 생성과 조작, JSON, 메서드 개념과 사용법

https://cometruedream.tistory.com/261

[자바스크립트] 가장 중요한 자바스크립트 객체 생성과 조작, JSON, 메서드 개념과 사용법

 

 

🤷‍♂️ 자바스크립트 배열 push, pop, shift, unshift란?

---

자바스크립트는 객체지향 프로그램이며 유연하고 강력한 언어입니다.

자바스크립트는 동적인 언어로 배열에 요소들을 추가, 삭제를 편리하게 도와주는 유용한 내장함수들이 많습니다.

유용한 배열 내장함수들 중에서도 push, pop, shift, unshift 특히 가장 많이 사용되는 배열의 내장함수들입니다.

이 4가지 배열 내장함수에 개념과 예제와 각각 내장함수들의 차이점에 대해서 알아보겠습니다.

 

300x250

 

🤷‍♂️ 배열에 유용한 내장함수 예제

---

1. 가장 많이 사용되는 내장함수 push()

• push() 함수는 배열의 끝에 새로운 요소에 값을 추가합니다.
• push() 함수는 배열의 길이를 반환합니다.

예제

let fruits = ["apple", "banana"];
console.log(fruits.push()); 
//결과값: 2 배열의 길이를 반환합니다.

let fruits = ["apple", "banana"];
fruits.push('orange');
console.log(fruits)
//결과값: ["apple", "banana", "orange"]

 

위에 예제처럼 push() 함수만 선언하면 배열에 길이를 반환합니다.

push() 함수에 값을 넣으면 배열의 맨뒤에 새로운 값을 반환합니다.

 

2. 배열 내장함수 pop()

• pop() 함수는 배열의 마지막 요소를 제거합니다.
• push() 함수는 제거된 요소를 반환합니다.

예제

let fruits = ["apple", "banana", "orange"];
let removed = fruits.pop();

console.log(fruits); 
// ["apple", "banana"] 배열에 마지막 요소를 제거합니다. 
console.log(removed); 
// removed 변수에 배열에 마지막 값 "orange" 담습니다.

 

위에 예제 처럼 pop() 함수를 선언하면 배열에 마지막요소를 제거하고 변수에 제거한 마지막 값을 담을 수 있습니다.

 

3. 배열 내장함수 shift()

• shift() 함수는 배열의 첫 번째 요소를 제거합니다.
• shift() 함수는 제거된 요소를 반환합니다.

예제

let fruits = ["apple", "banana", "orange"];
let removed = fruits.shift();

console.log(fruits); 
// ["banana", "orange"] 배열에 첫번째 요소를 제거합니다. 
console.log(removed); 
// removed 변수에 배열에 첫번째 값 "apple" 담습니다.

 

pop() 내장함수 반대로 배열의 첫번째 값을 제거하고 변수에 제거한 첫 번째 값을 담습니다.

 

4. 배열 내장함수 unshift()

• unshift() 함수는 배열의 첫 번째 요소를 추가합니다.
• unshift() 함수는 배열의 길이를 반환합니다.

예제

let fruits = ["apple", "banana", "orange"];
fruits.unshift("grape");

console.log(fruits.unshift()) 
//결과값: 4
console.log(fruits); 
//결과값: ["grape", "apple", "banana", "orange"]

 

unshift() 함수는 push() 함수의 반대로 맨앞에 배열의 요소를 추가하고 빈 함수만 실행하면 배열에 길이를 반환합니다.

 

5. push() vs unshift(

• push() 함수는 배열에 마지막에 새로운 요소를 추가합니다.
• unshift() 함수는 배열에 맨앞에 새로운 요소를 추가합니다.

예제

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits);
//결과값: ["apple", "banana", "orange"]

fruits.unshift("grape");
console.log(fruits); 
//결과값: ["grape", "apple", "banana", "orange"]

 

unshift() 함수는 push() 함수의 반대로 맨 앞에 배열의 요소를 추가하고 빈 함수만 실행하면 배열에 길이를 반환합니다.

 

6. pop() vs shift()

• pop() 함수는 배열에 마지막 요소를 제거합니다.
• shift() 함수는 배열에 첫번째 요소를 제거합니다.

예제

let fruits = ["apple", "banana", "orange"];

let removed = fruits.pop();
console.log(fruits); // ["apple", "banana"]
console.log(removed); // "orange"

removed = fruits.shift();
console.log(fruits); // ["banana"]
console.log(removed); // "apple"

 

shift() 함수 실행후 값이 “banana” 남아서 잘못된 값이라고 생각하실 수 있지만 깊은 복사와 얕은 복사의 개념이지만 원본에 배열에 값을 수정하기 때문에 발생되는 현상입니다.

 

🤷‍♂️ 마지막으로

---

자바스크립트에서 배열은 데이터를 리스트업하는 자료구조로 많이 사용됩니다.

그래서 유용한 배열 내장함수들이 존재하며 가장 많이 사용되고 중요한 4가지의 배열 내장함수에 대해서 알아봤습니다.

push(), pop(), shift(), unshift() 내장함수에 대해서 차이점과 개념과 예제에 대해서 살펴보았습니다.

4가지 내장함수를 통해서 필요한 상황에 적재적소하게 사용하면 좋을 거 같습니다.

 

 

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리