Array 객체
Array 객체는 배열 객체입니다. 배열을 다루는데 사용됩니다.
배열의 기본 활용
length
arr.lengthlength는 배열의 길이를 취득합니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.length);
isArray
isArray(obj)isArray는 정적 메소드로 인수로 객체를 받습니다. 이때 인수 객체가 배열인지를 판별합니다. 배열이라면 true, 배열이 아니라면 false를 반환합니다.
let arr = [1, 2, 3, 4, 5];
let arr1 = 1;
console.log(Array.isArray(arr));
console.log(Array.isArray(arr1));
toString, toLocaleString
toString()
toLocaleString()toString은 배열을 '요소, 요소, 요소, ...'와 같은 형태의 문자열로 변환해줍니다.
toLocaleString도 배열을 문자열로 변경해주는데, 현재 로케일에 맞는 형식으로 문자열을 변환합니다. 로케일은 지역마다 다른 표기 방식을 의미하는데, 대표적으로 날짜를 대한민국은 년.월.일순서로 표기한다면, 미국은 월.일.년순으로 표기가됩니다. 이처럼 지역마다 다른 표기법을 자동적으로 맞춰줍니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.toString());
console.log(typeof arr);
console.log(typeof(arr.toString()));
indexOf, lastIndexOf
indexOf(elem, [idx])
lastIndexOf(elem, [idx])indexOf는 인수 elem과 일치하는 배열의 첫 요소 인덱스를, lastIndexOf는 elem과 일치하는 배열의 마지막 요소 인덱스를 반환합니다. 이때 두 번째 인수로 인덱스 번호를 주면, 해당 인덱스 번호부터 탐색을 시작합니다.
let arr = [1, 3, 3, 4, 5];
console.log(arr.indexOf(3));
console.log(arr.lastIndexOf(3));
entries, keys, values
entries();
keys();
values();entries는 배열의 모든 인덱스(키)와 요소(값)을 취득합니다. keys는 모든 인덱스를, values는 모든 값을 취득합니다.
배열의 가공
concat
concat(arr)concat은 현재 배열 뒤에 인수로 건네주는 배열 arr을 이어붙입니다.
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [6, 7];
console.log(arr1.concat(arr2));
join
join(c)join은 배열의 요소들을 구분 문자 c로 연결한 문자열을 반환해줍니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.join(';'));
console.log(arr.join('다음'));
slice
slice(start, [end])slice는 배열의 요소를 start + 1부터 끝까지(또는 end까지)추출해 배열의 형태로 반환합니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1));
console.log(arr.slice(2, 3));
splice
splice(index, n, [elem, ...]);splice는 배열 내부에 요소를 더하거나, 바꾸거나, 삭제할 때 사용됩니다. 기본적인 동작은 인수 index 부터 시작해 n개를 지웁니다. 이때, 세 번째 인수(혹은 그 이상)으로 elem을 주면, 요소를 추가하거나 바꾸게됩니다.
다음 코드는 요소를 삭제하는 용법으로 사용된 splice입니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2, 1));
console.log(arr);
다음 코드는 요소를 삭제하고 변환하는 용법으로 사용된
splice입니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(3, 2, 10));
console.log(arr);
다음 코드는 요소를 삭제하고 추가하는 용법으로 사용된
splice입니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(3, 2, 6, 7, 8));
console.log(arr);
from
from(enum)from은 열거 가능한 객체를 배열로 변환시켜줍니다. 인수 enum이 열거 가능한 객체를 의미하며, 열거 가능한 객체에는 배열, 객체, Map, Set 등이 있습니다.
of
Array.of(elem, ...)of는 인수로 지정한 elem들을 배열로 변환해주는 정적 메소드입니다.
copyWithin
copyWithin(target, start, [end]);copyWithin은 start + 1 번째 요소부터 끝(또는 end)까지 요소를 target + 1위치 부터 복사합니다. 말로하니 좀 어렵나요? 그러니까 start + 1 요소부터 끝(end)까지 요소를 복사하는데, 그 위치는 배열에서 target + 1의 위치부터 시작하도록 복사를 합니다. 다만, 배열의 크기가 늘어난다거나 줄어든다거나 하지는 않습니다. 그래도 어렵다면 코드를 한 번 보고나면 감이 잡히실 겁니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(3, 1));
fill
fill(elem, [start, [end]]);fill은 배열의 요소를 elem으로 치환하는 메소드입니다. 만약 start와 end를 지정하면 start + 1부터 end까지 요소를 elem으로 치환합니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.fill(7));
let arr = [1, 2, 3, 4, 5];
console.log(arr.fill(7, 3));
배열 요소 추가와 삭제
push, pop
push(data);
pop();push는 배열에 요소를 추가합니다. 이때 배열의 마지막 요소 뒤에 삽입됩니다.
pop은 배열의 마지막 요소를 제거합니다.
let arr = [1, 2, 3, 4, 5];
arr.push(6)
console.log(arr);
arr.pop();
console.log(arr);
shift, unshift
shift();
unshift(data, ...);shift는 배열 맨 앞의 요소를 삭제합니다.
unshift는 배열 맨앞에 요소를 추가합니다.
let arr = [1, 2, 3, 4, 5];
arr.shift();
console.log(arr);
arr.unshift(0, 1);
console.log(arr);
배열 요소 정렬
sort
sort()sort는 배열의 요소를 오름차순으로 정렬해줍니다. 숫자, 문자 모든이 오름차순으로 정렬해줍니다.
let arr = [4, 5, 1, 3, 2];
console.log(arr.sort());
reverse
reverse()reverse는 배열의 요소를 반전시킵니다.
let arr = [1, 2, 3, 4, 5];
console.log(arr.reverse());
콜백 함수
콜백(callback) 함수란, 함수 내에서 다시 호출되는 함수 또는 특정 시점에 실행되는 함수입니다. 주로 후자의 해석을 많이 따르는데요. 이번에 소개할 메소드들은 이런 콜백 함수들을 인자로 갖는 메소드들입니다.
forEach
forEach(func, [that])forEach는 배열의 요소를 차례대로 콜백 함수 func으로 처리하는 메소드입니다. that이라는 인수는 콜백 함수 내에서 this를 사용하게 되면, 콜백 함수 외부의 함수에서 가리키는 this와는 다른것을 가리키게되는데요. 이를 방지하기 위해 this를 따로 저장한 것을 that이라고 보통 칭합니다. this는 추후에 따로 다룰 예정이니 이해가 안된다면 당장은 넘어가도 좋습니다.
map
map(func, [that])map은 배열의 요소를 차례대로 func으로 가공합니다. map은 가공을 하므로 콜백 함수 내에서 return을 통한 반환값이 필요합니다.
every
every(func, [that])every는 배열 내부의 모든 요소가 func와 일치하는지 판별합니다. 콜백 함수 func와 일치한다는 것은 함수와 같다는 것이 아니고, func 함수 내에 조건 판별을 넣어 검사합니다.
some
some(func, [that])some은 every()와 같은 기능을 하지만 전체가 아닌 일부만 일치하는지 판별합니다. 일부는 하나 이상이 일치하는 경우 true를 반환합니다.
filter
filter(func, [that])filter는 func에 일치하는 요소로만 이루어진 새로운 배열을 생성하는 메소드입니다.
find
find(func, [that])find는 배열 요소를 func로 검사해 조건에 맞는 첫 번째 요소를 반환하는 메소드입니다.
findIndex
findIndex(func, [that]);findIndex는 find과 동일한 동작을 하지만 조건에 맞는 첫 번째 요소의 인덱스를 반환합니다.
reduce, reduceRight
reduce(func, [init])
reduceRight(func, [init])reduce와 reduceRight는 바로 옆의 두 요소를 처리합니다. 두 번째 인수 init은 초깃값입니다. reduce는 왼쪽에서 오른쪽 방향으로 처리하고, reduceRight는 오른쪽에서 왼쪽 방향으로 처리합니다.
