JavaScript 기초 : 배열 3. 배열 메소드 - shift, pop, unshift, push

 

3. 배열 메소드2- shift, pop, unshift, push

 

splice 사용이 만능같지만 오히려 귀찮을 때가 있다.

자바스크립트에서 제공하는 메소드를 사용하면

배열의 첫 요소 삭제, 끝 요소 삭제, 첫 요소 값 추가, 끝 요소 값 추가를

더 짧은 코드로 쓸 수 있다. 

 

아래 코드를 통해 예시를 살펴보자!

배열의 첫 요소를 삭제하는 매소드는 shift다.

배열의 마지막 요소를 삭제하는 메소드는 pop이다.

배열의 첫 요소로 값을 추가하는 메소드는 unshift다.

배열의 마지막 요소로 값을 추가하는 메소드는 push이다. 

let fruits = ['딸기', '당근', '수박', '참외', '메론'];

//배열의 첫 오소를 삭제 : shift()
fruits.shift();
console.log(fruits);

//배열의 마지막 요소를 삭제 : pop()
fruits.pop();
console.log(fruits);

//배열의 첫 요소로 값 추가: unshift(value)
fruits.unshift('사과');
console.log(fruits);

//배열의 마지막 요소로 값 추가 : push(value)
fruits.push('레몬');
console.log(fruits);

결과 값을 보면 잘 삭제, 추가가 되어있다. 

배열의 양쪽 끝 요소들을 추가하거나 삭제하는 경우 shift, pop, unshift, push를 이용하는게 

더 간결하다~

 

 

다른 예시도 살펴보자!

function range(start, count, step) {
  let arr = [];

  for (let i = 0; i < count; i++) {
    arr.push(start + i * step)
  }

  return arr;
}

// 테스트
console.log(range(1, 20, 3));

이 경우 어떤 결과 값이 나올까?

 

range 함수는 시작값(start), 갯수(count), 증가폭(step)을 파라미터로 전달받는다.

 

range함수를 순서대로 살펴보자

1) 가장 먼저 빈 배열을 만들고

2) 반복문을 통해 파라미터로 전달받은 개수(count)만큼 반복

3) 반복문 내부 :  push 메소드를 통해 매 반복마다 배열의 마지막 요소로 어떤 연산식(start + i * step)에 의한 결과값을 추가

4) arr 배열을 리턴한다. 

 

즉 이 함수는 총 count만큼의 요소를 개수를 가지고, start값 부터 갈수록 값이 step만큼 증가하는 배열을 리턴하는 함수

이다!!!

 

그러니까 결과는?

 

 

 

다음 글에서 배열의 또다른 메서드들인

indexOf, lastindexOf, includes, reverse

를 살펴보자!