FrontEndJavaScript

[JS] 배열 메서드

FrontEnd, JavaScript

자바스크립트 배열 메서드

Javascript Array 클래스에 정의되어있는 배열 메서드에 대하여 알아보자.

메서드 설명
reverse() 배열을 역순으로 정렬
sort() 배열 정렬
slice() 배열의 일부 선택
concat() 배열을 하나로 합침
shift() 첫 번째 배열 제거(제거한 값을 반환함)
unshift() 첫 번째 배열 추가
pop() 마지막 배열 제거(제거한 값을 반환함)
join() 지정된 문자열로 배열 사이 구분자 표시

1. reverse() : 배열을 역순으로 정렬

reverse메서드로 배열을 역순으로 변경할 수 있다. 원래 배열의 순서가 실제로 변경된다.

1
2
3
4
var array = [16, 33, 42, 53, 11];

document.write(array.reverse() + '<br>'); // 11,53,42,33,16
document.write(array); // 11,53,42,33,16


2. sort() : 배열 정렬

sort메서드로 데이터를 숫자, 알파벳 또는 가나다순으로 정렬할 수 있고 원래 배열의 순서가 실제로 변경된다. sort메서드의 매개 변수에 함수식을 적용하여 오름차순으로 정렬할지, 내림차순으로 정렬할지 설정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var scores = [90, 55, 80, 60, 100];
var names = [
    "Michael Kwon",
    "Steve Jobs",
    "John Denver",
    "Pokemon"
];

//배열을 알파벳 순으로 정렬
document.write(names.sort() + '<br>'); // John Denver,Michael Kwon,Pokemon,Steve Jobs

//배열을 번호 순으로 정렬
document.write(scores.sort() + '<br>'); // 100,55,60,80,90

//오름차순, 내림차순 설정하여 정렬
document.write(scores.sort(function(a, b){ return a - b; }) + '<br>'); // 55,60,80,90,100
document.write(scores.sort(function(a, b){ return b - a; }) + '<br>'); // 100,55,60,80,90

document.write(scores + '<br>'); // 100,55,60,80,90

추가적으로 알게된 사실

위의 예시 코드에서 names를 name으로 변경하면 Uncaught TypeError: name.sort is not a function에러가 발생한다. names.sort는 가능하지만 name.sort는 불가능한 이유가 무엇일까?

window 객체에 이미 name이라는 변수가 존재하는데, 브라우저 스펙상 해당 변수의 타입은 string으로 유지된다. 따라서 TypeError가 발생하는 것이다.


3. slice() : 배열의 일부 선택

slice메서드는 배열의 특정 범위를 추출하고, 실제 배열을 변경시키진 않는다. 특정 범위를 선택하는 방법은 첫 번째 매개변수를 시작 인덱스로 설정해주고, 두 번째 매개변수를 마지막 인덱스에 1을 더한 값으로 설정해주면 된다.

1
2
3
4
var str = ['apple', 'banana', 'orange', 'grapes', 'melon'];

document.write(str.slice(1, 3) + '<br>'); // banana,orange
document.write(str + '<br>'); // apple,banana,orange,grapes,melon


4. concat() : 배열 합치기

concat메서드는 배열과 배열을 연결해 하나의 배열로 합친다. 그러나 원래 배열이 실제로 변경되지는 않는다.

1
2
3
4
5
6
7
8
9
10
var korea = ['서울', '부산', '광주'];
var japan = ['도쿄', '오사카'];
var usa = ['워싱턴', '뉴욕'];

var world = korea.concat(japan);
document.write(korea + '<br>'); // 서울,부산,광주
document.write(world + '<br>'); // 서울,부산,광주,도쿄,오사카

var world = korea.concat(japan, usa);
document.write(world); // 서울,부산,광주,도쿄,오사카,워싱턴,뉴욕


5. shift(), unshift() : 첫 번째 배열 제거 및 추가하기

첫 번째 배열을 제거할 때는 shift메서드를 사용한다. shift메서드는 제거한 값을 반환한다. 그리고 첫 번째 배열에 데이터를 추가할 때는 unshift메서드를 사용한다. shift와 unshift는 원본 배열을 변경시킨다.

1
2
3
4
5
6
7
8
9
var korea = ['서울', '부산', '광주'];

//shift
document.write(korea.shift() + '<br>'); // 서울
document.write(korea + '<br>'); // 부산,광주

//unshift
korea.unshift('제주도');
document.write(korea + '<br>'); // 제주도,부산,광주


6. pop() : 마지막 배열 제거하기

pop메서드는 shift메서드와 반대로 배열의 마지막 부분을 제거한 후 그 값을 반환한다. 따라서 원본 배열을 변경시킨다.

1
2
3
4
5
var nums = [1, 2, 3, 4, 5];

//pop
document.write(nums.pop() + '<br>'); // 5
document.write(nums + '<br>'); // 1,2,3,4


7. join() : 지정된 문자열로 배열 사이 구분자 표시

join메서드는 배열을 구분하는 문자를 기본 쉼표에서 특정한 문자로 변경하여 표시할 수 있다. 그러나 원본 배열 내용을 변경하는 것은 아니다.

1
2
3
4
5
var age = [23, 44, 12, 32, 5];

//join
document.write(age.join(' - ') + '<br>'); // 23 - 44 - 12 - 32 - 5
document.write(age); // 23,44,12,32,5
Share