unshift() / shift(), reverse() / sort(), concat()

unshift() / shift(), reverse() / sort(), concat()

unshift() / shift(), reverse() / sort(), concat() 메서드에 대해 알아 봅시다.

---

unshift() / shift()

unshift() 메서드는 배열 처음 요소에 추가, shift() 메서드는 배열 처음 요소에 삭제

번호	기본값	메서드	리턴값	결과값

const arrNum1 = [100, 200, 300, 400, 500];
const arrNumUnshift =arrNum1.unshift(600);

document.querySelector(".sample04_N1").innerHTML = "1";
document.querySelector(".sample04_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample04_M1").innerHTML = "unshift()";
document.querySelector(".sample04_P1").innerHTML = arrNumUnshift;
document.querySelector(".sample04_A1").innerHTML = arrNum1;

const arrNum2 = [100, 200, 300, 400, 500];
const arrNumShift =arrNum2.shift(100);

document.querySelector(".sample04_N2").innerHTML = "2";
document.querySelector(".sample04_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample04_M2").innerHTML = "shift()";
document.querySelector(".sample04_P2").innerHTML = arrNumShift;
document.querySelector(".sample04_A2").innerHTML = arrNum2;

reverse() / sort()

reverse() 메서드는 순서를 반대로 정렬, sort() 메서드는 배열 요소를 정렬합니다.

번호	기본값	메서드	리턴값

const arrNum1 = [100, 200, 300, 400, 500];
const arrNumReverse = arrNum1.reverse();

document.querySelector(".sample05_N1").innerHTML = "1";
document.querySelector(".sample05_Q1").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample05_M1").innerHTML = "reverse()";
document.querySelector(".sample05_P1").innerHTML = arrNumReverse;

const arrNum2 = [100, 200, 300, 400, 500];
const arrNumSort2 = arrNum2.sort();

document.querySelector(".sample05_N2").innerHTML = "2";
document.querySelector(".sample05_Q2").innerHTML = "[100, 200, 300, 400, 500]";
document.querySelector(".sample05_M2").innerHTML = "sort()";
document.querySelector(".sample05_P2").innerHTML = arrNumSort2;

const arrNum3 = [100, 300, 400, 200, 500];
const arrNumSort3 = arrNum3.sort(function(a,b){return b - a});

document.querySelector(".sample05_N3").innerHTML = "3";
document.querySelector(".sample05_Q3").innerHTML = "[100, 300, 400, 200, 500]";
document.querySelector(".sample05_M3").innerHTML = "sort(function(a,b){return b - a})";
document.querySelector(".sample05_P3").innerHTML = arrNumSort3;

const arrNum4 = [300, 400, 500, 200, 100];
const arrNumSort4 = arrNum4.sort(function(a,b){return a - b});

document.querySelector(".sample05_N4").innerHTML = "4";
document.querySelector(".sample05_Q4").innerHTML = "[300, 400, 500, 200, 100]";
document.querySelector(".sample05_M4").innerHTML = "sort(function(a,b){return a - b})";
document.querySelector(".sample05_P4").innerHTML = arrNumSort4;

const arrNum5 = ['c', 'b', 'e', 'w', 'h'];
const arrNumSort5 = arrNum5.sort(function(a,b){ return a.localeCompare(b)});

document.querySelector(".sample05_N5").innerHTML = "5";
document.querySelector(".sample05_Q5").innerHTML = "['c', 'b', 'e', 'w', 'h']";
document.querySelector(".sample05_M5").innerHTML = "sort(function(a,b){ return a.localeCompare(b)})";
document.querySelector(".sample05_P5").innerHTML = arrNumSort5;

const arrNum6 = ['c', 'b', 'e', 'w', 'h'];
const arrNumSort6 = arrNum6.sort(function(a,b){ return b.localeCompare(a)});

document.querySelector(".sample05_N6").innerHTML = "6";
document.querySelector(".sample05_Q6").innerHTML = "['c', 'b', 'e', 'w', 'h']";
document.querySelector(".sample05_M6").innerHTML = "sort(function(a,b){ return b.localeCompare(a)})";
document.querySelector(".sample05_P6").innerHTML = arrNumSort6;

concat()

배열 요소를 결합할 때 사용, 결과값을 반환합니다.

번호	기본값	메서드	리턴값

const arrNum1 = [100, 200, 300];
const arrNum2 = [400, 500, 600];
const arrConcat = arrNum1.concat(arrNum2);

document.querySelector(".sample06_N1").innerHTML = "1";
document.querySelector(".sample06_Q1").innerHTML = "[100, 200, 300], [400, 500, 600]";
document.querySelector(".sample06_M1").innerHTML = "arrNum1.concat(arrNum2)";
document.querySelector(".sample06_P1").innerHTML = arrConcat;

const arrSpered = [ ...arrNum1 , ...arrNum2];

document.querySelector(".sample06_N2").innerHTML = "2";
document.querySelector(".sample06_Q2").innerHTML = "[100, 200, 300], [400, 500, 600]";
document.querySelector(".sample06_M2").innerHTML = "[ ...arrNum1 , ...arrNum2]";
document.querySelector(".sample06_P2").innerHTML = arrSpered;