JavaScript | Array Methods 1
이번 글에서는 JavaScript에서 Array 객체의 static methods와 mutator methods에 대해 알아보겠습니다.
static methods는 instance에서 함수를 호출하지 않고도 사용 가능합니다. class와 함께 함수가 heap영역에 정의되어 있기 때문에 Class.function()의 형태로 바로 호출할 수 있습니다.
mutator methods는 주로 Java 쪽에서 setter의 기능을 하는 함수를 지칭하는데 그 의미에 맞게 MDN 웹 문서의 JavaScript 배열 페이지에서는 배열을 수정하는 메소드들을 mutator methods로 분류하고 있습니다.
당연히 mutator methods는 instance methods에 속합니다. 또한 모든 mutator methods는 mutable하게 함수를 호출한 배열 자체가 바뀐다고 보시면 됩니다.
Static Methods
Mutator Methods
Array.prototype.copyWithin()Array.prototype.fill()Array.prototype.push()Array.prototype.pop()Array.prototype.shift()Array.prototype.unshift()Array.prototype.sort()Array.prototype.reverse()Array.prototype.splice()
from
Array.prototype.from(arrayLike [, mapFn [, thisArg]])
arrayLike에 array-like나 iterable 객체를 받아 얕게 복사하여 새로운 배열을 반환합니다. mapFn엔 매핑할 수 있는 콜백 함수를 넣을 수 있으며 mapFn에 this가 필요하다면 thisArg에 넣어서 전달합니다.
Array.from('foo'); // ["f", "o", "o"]
Array.from([1, 2, 3], e => 2 * e); // [2, 4, 6]
isArray
Array.isArray(value)
value가 배열이면 true, 배열이 아니면 false를 반환합니다.
배열의 경우 typeof의 결과가 "object"로 나오기 때문에 배열임을 확인하기 위해서 이같은 메소드가 필요합니다.
of
Array.of(element0[, element1[, ... element2]])
element로 이뤄진 배열을 반환합니다.
Array.of(1, 2, 3); // [1, 2, 3]
copyWithin
Array.prototype.copyWithin(target [, start , [, end]])
[start, end) 구간에 있는 element들을 복사해 target부터 덮어 씌웁니다.
세 argument들의 기본값은 모두 0이며 음수를 입력했을 땐 인덱스를 배열의 끝에서부터 계산합니다. 또한 target >= this.length 라면 아무것도 복사하지 않습니다.
let arr = ['A', 'B', 'C', 'D', 'E'];
arr.copyWithin(3, 1, 3); // ["A", "B", "C", "B", "C"]
fill
Array.prototype.fill(value [, start [, end]])
[start, end) 구간의 element 값에 value를 할당합니다.
start와 end의 기본값은 배열의 시작과 끝이며 음수가 입력이 됐을 땐 마찬가지로 배열의 끝에서부터 입력 값 번째의 인덱스로 취급합니다.
참고로 value가 객체일 땐 reference만을 복사해서 배열에 넣어주기 때문에 주의해야 합니다.
let arr = Array(10).fill(0);
arr; // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
arr.fill([], 3, 8); // [0, 0, 0, [], [], [], [], [], 0, 0]
arr[3].push(1);
arr; // [0, 0, 0, [1], [1], [1], [1], [1], 0, 0]
push / pop
Array.prototype.push(element1[, ... [, elementN]])
배열의 끝에 입력된 argument들을 모두 추가하고 배열의 새로운 길이를 반환합니다.
Array.prototype.pop()
배열의 마지막 element를 제거하고 그 element를 반환합니다. 빈 배열을 pop()할 경우 undefined가 반환됩니다.
shift / unshift
Array.prototype.shift()
배열의 첫 번째 element를 제거하고 그 element를 반환합니다. 빈 배열을 shift()할 경우 undefined가 반환됩니다.
Array.prototype.unshift(element1[, ... [, elementN]])
배열의 맨 앞에 입력된 argument들을 모두 추가하고 배열의 새로운 길이를 반환합니다.
sort
Array.prototype.sort([compareFunction])
배열을 정렬합니다. compareFunction이 제공되지 않으면 element를 문자열로 변환하고 UTF-16 code 순서대로 정렬합니다.
let arr = [3, 4, 1, 5, 2];
arr.sort(); // [1, 2, 3, 4, 5]
arr.sort((a, b) => b - a); // [5, 4, 3, 2, 1]
reverse
Array.prototype.reverse()
배열의 순서를 반전합니다.
splice
Array.prototype.splice(start[, deleteCount[, item1[, item2[, ...]]]])
배열의 start 위치부터 deleteCount개의 element를 삭제하고 item1, item2, …을 추가합니다. 그리고 삭제한 element를 담은 배열을 반환합니다.
start > this.length이면 start의 값은 this.length로 조정됩니다. 또한 start < 0이면 뒤에서부터 start 번째, 즉 this.length + start가 시작 위치 입니다. 만약 this.length + start < 0이라면 시작 위치는 0이 됩니다.
deleteCount 값이 생략되었다면 start 이후의 모든 element를 삭제합니다.
let arr = [2, 3, 15, 6, 7];
arr.splice(2, 1, 4, 5); // [15]
arr; // [2, 3, 4, 5, 6, 7]
arr.splice(-2); // [6, 7]
arr; // [2, 3, 4, 5]
arr.splice(0, 0, 1); // []
arr; // [1, 2, 3, 4, 5]
References
Back to top ↑
Leave a comment