JavaScript array - push () , pop() , slice() , splice()

2020. 7. 7. 10:45study/TIL

push()

배열의 끝에 하나이상의 요소를 추가하고 , 배열의 새로운 길이를 반환 

*원본 배열을 바로 수정 *

 

 

const fruits = ['apple', 'banana', 'avocado', 'lemon', 'cherry'];


const count = fruits.push('kiwi');
console.log(count);
// expected output: 6
console.log(fruuits);
// expected output: Array ['apple', 'banana', 'avocado', 'lemon', 'cherry', 'kiwi'];

fruits.push('orange', 'grape');
console.log(animals);
// expected output: Array [['apple', 'banana', 'avocado', 'lemon', 'cherry', 'kiwi', 'orange', 'grape'];;

 

pop()

배열의 마지막 요소를 제거하고 그 요소를 반환

*원본 배열을 바로 수정 * 

 

 

const fruits = ['apple', 'banana', 'avocado', 'lemon', 'cherry'];

console.log(fruits.pop());
// expected output: "cherry"

console.log(fruits);
const fruits = ['apple', 'banana', 'avocado', 'lemon'];


fruits.pop();

console.log(fruits);
// expected output: Array ['apple', 'banana', 'avocado'];

 

 

slice()

 

배열의 시작부터 끝까지 (끝요소는 반환하지 않음 ) 배열요소들의 복사본을 새로운 배열객체로 반환함.

 

const fruits = ['apple', 'banana', 'avocado', 'lemon', 'cherry'];

console.log(fruits.slice(2));  // 앞에서 2개 없애고 반환
// expected output: Array ["avocado", "lemon", "cherry"]

console.log(fruits.slice(2, 4)); // 2번째 요소부터 4-1요소 까지 반환
// expected output: Array ["avocado", "lemon"]

console.log(fruits.slice(1, 5)); //1번째 요소부터 5-1 요소까지 반환
// expected output: Array ["banana", "avocado", "lemon", "cherry"]

 

 

 

Array.prototype.slice()

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

developer.mozilla.org

 

 

splice()

 

const fruits = ['apple', 'banana', 'avocado', 'lemon', 'cherry'];
months.splice(1, 0, 'kiwi');
// 첫번째 인덱스에 제거 0개 하고 kiwi추가 
console.log(fruits);
// expected output: Array ['apple', 'kiwi', 'banana', 'avocado', 'lemon', 'cherry'];

fruits.splice(4, 1, 'grape');
//4번째 인덱스에서 1개 제거하고 grape 추가 
console.log(fruits);
// expected output: Array ['apple', 'kiwi', 'banana', 'avocado', 'grape', 'cherry'];

 

 

 

 

Array.prototype.splice()

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

developer.mozilla.org

 

 

'study > TIL' 카테고리의 다른 글

Document. querySelector()  (0) 2020.07.05
Javascript - event listener/ addEventListener  (0) 2020.07.05
HTML - style , script 태그  (0) 2020.07.04