JS : pop(), push(), shift(), unshift()

pop()

🧶 참고 자료
MDN Array.prototype.pop()

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환한다.

✨ 배열의 길이를 변하게 한다.
✨ 빈 배열인 경우 undefined를 반환한다.

const name = ['Momo', 'Kate', 'Ara', 'Sharon', 'Bob', 'Mano'];

// Mano
console.log(name.pop());
// [ 'Momo', 'Kate', 'Ara', 'Sharon', 'Bob' ]
console.log(name);

// Bob
console.log(name.pop());
// Sharon
console.log(name.pop());
// [ 'Momo', 'Kate', 'Ara' ]
console.log(name);

// Ara
console.log(name.pop());
// Kate
console.log(name.pop());
// Momo
console.log(name.pop());
// undefined
console.log(name.pop());

// []
console.log(name);
// 0
console.log(name.length);

push()

🧶 참고 자료
MDN Array.prototype.push()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

✨ 배열의 길이를 변하게 한다.

const suwon = ['팔달구'];
// 1
console.log(suwon.length);

suwon.push('영통구', '장안구', '권선구');

// [ '팔달구', '영통구', '장안구', '권선구' ]
console.log(suwon);
// 4
console.log(suwon.length);

shift()

🧶 참고 자료
MDN Array.prototype.shift()

shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다.

✨ 배열의 길이를 변하게 한다.
✨ 빈 배열인 경우 undefined를 반환한다.

const name = ['Momo', 'Kate', 'Ara', 'Sharon', 'Bob', 'Mano'];

// Momo
console.log(name.shift());
// [ 'Kate', 'Ara', 'Sharon', 'Bob', 'Mano' ]
console.log(name);

// Kate
console.log(name.shift());
// Ara
console.log(name.shift());
// [ 'Sharon', 'Bob', 'Mano' ]
console.log(name);

// Sharon
console.log(name.shift());
// Bob
console.log(name.shift());
// Mano
console.log(name.shift());
// undefined
console.log(name.shift());

// []
console.log(name);
// 0
console.log(name.length);

unshift()

🧶 참고 자료
MDN Array.prototype.unshift()

unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.

✨ 배열의 길이를 변하게 한다.

const hwaseongsi = ['산척동', '화산동'];
// ['산척동', '화산동']
console.log(hwaseongsi);
// 2
console.log(hwaseongsi.length);


hwaseongsi.unshift('병점1동');
hwaseongsi.unshift('방교동');

// [ '방교동', '병점1동', '산척동', '화산동' ]
console.log(hwaseongsi);
// 4
console.log(hwaseongsi.length);


hwaseongsi.unshift('금곡동');
hwaseongsi.unshift('청계동');
hwaseongsi.unshift('영천동');
hwaseongsi.unshift('중동');
hwaseongsi.unshift('신동');
hwaseongsi.unshift('목동');

// [
//   '목동',   '신동',
//   '중동',   '영천동',
//   '청계동', '금곡동',
//   '방교동', '병점1동',
//   '산척동', '화산동'
// ]
console.log(hwaseongsi);
// 10
console.log(hwaseongsi.length);


hwaseongsi.unshift('송동', '능동', '기산동');

// [
//   '송동',    '능동',
//   '기산동',  '목동',
//   '신동',    '중동',
//   '영천동',  '청계동',
//   '금곡동',  '방교동',
//   '병점1동', '산척동',
//   '화산동'
// ]
console.log(hwaseongsi);
// 13
console.log(hwaseongsi.length);