배열과 메서드 2

켄·2023년 3월 8일

배열 자체를 조작하는가? = 🟢
기존 배열은 건드리지 않고 조건을 적용한 새로운 배열을 반환하는가? = 🟠

배열을 변형시키거나 요소를 재 정렬해주는 메서드에 대해 알아봅시다.

map

arr.map은 유용성과 사용 빈도가 아주 높은 메서드 중 하나입니다.
map은 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환해줍니다.

<script>
let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환합니다.
});
</script>

예시) 각 요소(문자열)의 길이를 출력해줍니다.

<script>
let lengths = ["doojji", "juhyeon", "leejungguk"].map((item) => item.length);
console.log(lengths); // 6, 7, 10
</script>

sort(fn)

arr.sort()는 배열의 요소를 문자열로 취급하여 재 정렬해줍니다. 배열 자체가 변경됩니다.
메서드를 호출하면 재정렬 된 배열이 반환되는데, 이미 arr 자체가 수정되었기 때문에 반환 값은 잘 사용되지 않습니다.

<script>
let arr = [ 1, 2, 15 ];

// arr 내부가 재 정렬됩니다.
arr.sort();

alert( arr );  // 1, 15, 2 (문자여로 취급하여 재 정렬)
</script>

기본 정렬 기준 대신 새로운 정렬 기준을 만들려면 arr.sort()에 새로운 함수를 넘겨줘야 합니다.
인수로 넘겨주는 함수는 반드시 값 두 개를 비교해야 하고 반환 값도 있어야 합니다.

<script>
function compare(a, b) {
  if (a > b) return 1; // 첫 번째 값이 두 번째 값보다 큰 경우
  if (a == b) return 0; // 두 값이 같은 경우
  if (a < b) return -1; //  첫 번째 값이 두 번째 값보다 작은 경우
}
</script>

배열 요소를 숫자 오름차순 기준으로 정렬해봅시다.

<script>
function compareNumeric(a, b) {
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}

let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric); // 함수에 인자 전달

alert(arr);  // 1, 2, 15 (정렬 완료)
</script>

<script>
let arr = [ 1, 2, 15 ];

// 두 숫자의 차이를 리턴하는 함수를 sort() 함수의 파라미터로 전달
arr.sort(function(a, b) { return a - b; });

alert(arr);  // 1, 2, 15
</script>

내림차순 기준으로 정렬하기

<script>
let arr = [ 1, 2, 15 ];

arr.sort(function(a, b) { return b - a; });

alert(arr);  // 1, 2, 15
</script>

화살표 함수 권장

<script>
arr.sort( (a, b) => a - b );
</script>

a.localeCompare(b)

문자열엔 localeCompare를 사용하세요.
Ö같은 문자가 있는 언어에도 대응하려면 str.localeCompare 메서드를 사용해 문자열을 비교하는 게 좋습니다.

<script>
let countries = ['Österreich', 'Andorra', 'Vietnam'];

alert( countries.sort( (a, b) => a > b ? 1 : -1) ); // Andorra, Vietnam, Österreich (제대로 정렬이 되지 않았습니다.)

alert( countries.sort( (a, b) => a.localeCompare(b) ) ); // Andorra,Österreich,Vietnam (제대로 정렬되었네요!)

문법: a.localeCompare(b);

</script>

reverse

arr.reverse는 arr의 요소를 역순으로 정렬시켜주는 메서드입니다.
반환 값은 재 정렬된 배열입니다.

<script>
let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1
</script>

split과 join

입력받은 문자열을 어떻게 배열로 바꿀 수 있을까요?
str.split(delim) 메서드는 구분자(delimiter) delim을 기준으로 문자열을 쪼개줍니다.

아래 예시에선 쉼표와 공백을 합친 문자열이 구분자로 사용되고 있습니다.

<script>
let names = `doojji, juhyeon, leejungguk`;

let arr = names.split(', '); // ', '을 구분자로 사용

console.log(arr); // 결과: [ 'doojji', 'juhyeon', 'leejungguk' ] 

for (let name of arr) {
  alert( `${name}에게 보내는 메시지` ); // doojji에게 보내는 메시지 ... 와 같이 하나의 문자열이 쉼표 구분으로 쪼개졌습니다.
}
</script>

split 메서드는 두 번째 인수로 숫자를 받을 수 있습니다.
이 숫자는 배열의 길이를 제한해주므로 길이를 넘어서는 요소를 무시할 수 있습니다. 실무에서 자주 사용하는 기능은 아닙니다.

<script>
let names = `doojji, juhyeon, leejungguk, quokka`.split(', ', 2);

alert(arr); // doojji, juhyeon
</script>

split(s)의 s를 빈 문자열로 지정하면 문자열을 글자 단위로 분리할 수 있습니다.

<script>
let str = "test";

alert( str.split('') ); // t,e,s,t
</script>

arr.join(glue)은 split과 반대 역할을 하는 메서드입니다.
인수 glue를 접착제처럼 사용해 배열 요소를 모두 합친 후 하나의 문자열을 만들어 줍니다.

<script>
let arr = ['doojji', 'juhyeon', 'leejungguk'];

let str = arr.join(';'); // 배열 요소 모두를 ;를 사용해 하나의 문자열로 합칩니다.

alert( str ); // doojji;juhyeon;leejungguk
</script>

Array.isArray

자바스크립트에서 배열은 독립된 자료형으로 취급되지 않고 객체형에 속합니다.
typeof로는 일반 객체와 배열을 구분할 수가 없습니다.

<script>
alert(typeof {}); // object
alert(typeof []); // object
</script>

Array.isArray는 value가 배열이라면 true를, 배열이 아니라면 false를 반환해줍니다.

<script>
alert(Array.isArray({})); // false

alert(Array.isArray([])); // true
</script>

요약

요소를 더하거나 지우기

push(...items) – 맨 끝에 요소 추가하기
pop() – 맨 끝 요소 추출하기
shift() – 첫 요소 추출하기
unshift(...items) – 맨 앞에 요소 추가하기
splice(pos, deleteCount, ...items) – pos부터 deleteCount개의 요소를 지우고, items 추가하기
slice(start, end) – start부터 end 바로 앞까지의 요소를 복사해 새로운 배열을 만듦
concat(...items) – 배열의 모든 요소를 복사하고 items를 추가해 새로운 배열을 만든 후 이를 반환함. items가 배열이면 이 배열의 인수를 기존 배열에 더해줌

원하는 요소 찾기

indexOf/lastIndexOf(item, pos) – pos부터 원하는 item을 찾음. 찾게 되면 해당 요소의 인덱스를, 아니면 -1을 반환함
includes(value) – 배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함
find/filter(func) – func의 반환 값을 true로 만드는 첫 번째/전체 요소를 반환함
findIndex는 find와 유사함. 다만 요소 대신 인덱스를 반환함

배열 전체 순회하기