reverse( )/sort( )/concat( )

reverse( )/sort( )/contcat( ) 메서드

reverse( ) 메서드는 배열의 순서를 반대로 배열하고 반환합니다.
sort( ) 메서드는 배열의 순서를 순서대로 배열합니다.
contcat( ) 메서드는 기존 배열에 배열값을 합쳐서 새로운 배열을 반환합니다.

---

reverse( ) 메서드

reverse( ) 메서드는 배열의 순서를 반전하여 첫번째 요소가 마지막이 되고 마지막 요소가 첫번째 요소가 됩니다.

기본 문법
Array.reverse( )

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; 

결과보기

번호	기본값	메서드	리턴값

sort( ) 메서드

sort( ) 메서드는 배열의 순서를 적절하게 정렬할 때 사용합니다. 특히 오름차순, 내림차순으로 정렬할 때 사용하는 메서드입니다.

문법
Array.sort() : 순서대로 정렬
Array.sort(function(a,b){return b-a}) : 역순 정렬
Array.sort(function(a,b){return a-b}) : 순서대로 정렬
Array.sort(function(a, b){b.localeCompare(a)) : 문자열 역순 정렬
Array.sort(function(a, b){a.localeCompare(b)) : 문자열 순서대로 정렬

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, 200, 300, 400, 500];
const arrNumSort3 = arrNum3.sort(function(a, b){return b-a});

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

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

document.querySelector(".sample05_N4").innerHTML = "4";
document.querySelector(".sample05_Q4").innerHTML = "[500, 400, 300, 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 b.localeCompare(a)});

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){b.localeCompare(a))";
document.querySelector(".sample05_P5").innerHTML = arrNumSort5; 

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

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){a.localeCompare(b))";
document.querySelector(".sample05_P6").innerHTML = arrNumSort6; 

결과보기

번호	기본값	메서드	리턴값

concat( ) 메서드 : 펼침연산자 | 배열요소 결합

concat( ) 메서드는 객체 메서드처럼 배열 뒤에 배열 값을 추가하는 메서드입니다. 배열에서 사용될 때는 변수로 전달되는 인자 값이 해당 배열이 펼쳐지면서 기존 배열에 합쳐지게 됩니다.

문법
Array.concat(추가할 배열값1, 추가할 배열값2, 추가할 배열값3...)
Array1.concat(Array2) : 배열이 결합됨
const Spread = [...Array1, ...Array2] : 배열이 결합됨(펼침연산자)

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 arrSpread = [ ...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 = arrSpread;

결과보기

번호	기본값	메서드	리턴값