🍨 배열이란?
배열은 여러 개의 값을 순차적으로 나열한 자료구조입니다. 자바스크립트에선 배열을 다루기 위한 편리한 메서드들을 제공해주죠.
const arr = ['파인애플피자', '펩시', '지코'];
arr[0] //->'파인애플피자'배열이 가지고 있는 값은 요소(Element)라고 부르고 자바스크립트의 모든 값은 배열의 요소가 될 수 있습니다.
배열의 요소는 자신의 위치를 나타내는 index를 가지게 되고, 이를 통해 배열의 요소에 접근할 수 있습니다.
이러한 요소의 개수는 length프로퍼티를 통해 알 수 있습니다.
arr.length; //->3위와 같이 생성된 배열은 놀랍게도 배열이 아니라 Object입니다. 자바스크립트의 배열은 일반적인 의미의 배열이 아닌 배열의 동작을 흉내낸 특수한 객체이죠. 인덱스를 나타내는 문자열을 키로 갖는 객체입니다. 그래서 다음과 같이 확이해 보았을 때 true가 됩니다.
arr.constructor === Array //->true
arr.getPrototypeOf(arr) === Array.prototype //-> true배열 리터럴인 Array.of와 Array.from메서드를 통해 배열을 생성할 수 있습니다.
🍨 배열 생성
배열에는 다양한 생성 방식이 있습니다. 가장 간단한 것은 배열 리터럴을 사용하는 것입니다.
const arr = ['파인애플피자', '펩시', '지코'];다음으로 Array 생성자 함수를 사용하는 방법이 있습니다. 이 때는 정해진 길이 만큼의 빈 배열이 생성됩니다.
const arr = new Array(10); //arr.length -> 10Array.of는 전달된 인수를 요소로 갖는 배열을 생성합니다.
const arr = Array.of('파인애플피자', '펩시', '지코');Array.from은 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환 후에 리턴합니다.
const arr = Array.from({length: 2, 0: 'a', 1: 'b'}); //-> ['a', 'b']
const pizza = Array.from('파인애플피자'); //->[ '파', '인', '애', '플', '피', '자' ]🍨 배열 메서드
배열은 다양한 메서드를 제공합니다. 하지만 사용시 주의할 점이 있는데 원본 배열을 직접 변화시키는 메서드와 새로운 배열을 리턴하는 메서드가 있기 때문입니다.
🍧 splice
원본 배열을 직접 변경하며 지정한 위치의 요소를 제거하고 새로운 요소를 추가할 수도 있다.
const arr = ['파인애플피자', '펩시', '지코'];
const res = arr.splice(1, 2, '민초', '맥콜'); //인덱스 1부터 2개 지우고 새로운 요소 삽입
console.log(arr);//->[ '파인애플피자', '민초', '맥콜' ] 원본 배열이 변화
console.log(res);//->[ '펩시', '지코' ] 지워진 값들 제거될 요소의 개수를 나타내는 두 번째 인수를 0으로 주면 제거 없이 추가만 가능하다. 추가될 새로운 요소인 세 번째 인수값이 없으면 제거만 수행한다.
🍧 slice
인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다. 원본 배열은 변경되지 않습니다.
const arr = [1, 2, 3];
//1 이후 모든 요소 복사
arr.slice(1); //->[2, 3]
//배열 끝에서부터 복사
arr.slice(-2); //->[2, 3]
//원본 배열 복사. 얉은 복사이기 때문에 다른 객체.
arr.slice(); //->[1, 2, 3]🍧 join
원본 배열의 모든 요소를 문자열로 변환 후 인수로 받은 구분자로 연결해 반환합니다. 구분자는 생략 가능합니다.
const arr = [1, 2, 3];
//구분자를 생략하면 디폴트값인 콤마가 들어가게 됩니다.
arr.join(); //->1,2,3
arr.join(' '); //->123
arr.join('-'); //->1-2-3🍧 reverse
원본 배열의 순서를 뒤집습니다. 이때 원본 배열은 변경되고 변경된 배열을 리턴합니다.
const arr = [1, 2, 3];
const res = arr.reverse();
console.log(arr); //->[3, 2, 1]
console.log(res); //->[3, 2, 1]🍧 fill
전달받은 값으로 배열을 채웁니다. 원본 배열이 변경됩니다.
let arr = [1, 2, 3, 4, 5];
//0으로 모두 채운다.
arr.fill(0); //->[0, 0, 0, 0, 0]
arr = [1, 2, 3, 4, 5];
//0으로 인덱스 1부터 채운다.
arr.fill(0, 1); //->[1, 0, 0, 0, 0]
arr = [1, 2, 3, 4, 5];
//0으로 인덱스 1부터 3미만까지 채운다.
arr.fill(0, 1, 3); //->[1, 0, 0, 4, 5]🍧 includes
배열 내 특정 요소가 있는지 확인해 true or false를 반환합니다.
const arr = ['파인애플피자', '펩시', '지코'];
arr.includes('파인애플피자'); //->true
//두 번째 인수로 확인을 시작할 인덱스를 지정할 수 있다. 기본값은 0이다.
arr.includes('파인애플피자', 1) //->false🍨 High-Order Function(HOF)
함수를 인수로 전달받고나 함수를 반환하는 함수를 말합니다. 조건문과 반복문을 제거해 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 체계입니다. 그리하여 가독성은 올리고 오류는 줄이며 안정성을 높이려는 노력의 일환입니다.
🍧 sort
배열의 요소를 정렬합니다. 원본 배열을 직접 변경하며 정렬된 배열을 반환합니다. 기본적으로 오름차 순이기에 내림차순으로 하고 싶다면 sort()후에 reverse()를 하는 방법이 있습니다.
const arr = [2, 3, 1];
arr.sort(); //->[1, 2, 3]
arr.reverse(); //->[3, 2, 1]문자열은 괜찮지만 숫자 배열을 사용할 땐 주의할 점이 있습니다. 정렬시 일시적으로 문자열로 변환 후 유니코드 코드 포인트 순서로 정렬을 하기 때문에 원하는 결과가 나오지 않는 경우가 많습니다. 이런 경우엔 정렬 순서를 정의하는 비교 함수를 인수로 전달해 줍니다.
const points=[1, 30, 100, 5, 2, 40, 10];
points.sort(); //->[1, 10, 100, 2, 30, 40, 5]
//반환값이 0보다 작으면 b우선 정렬
points.sort((a, b) => b - a); //->[100, 40, 30, 10, 5, 2, 1]🍧 map
자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출합니다. 그리고 콜백함수의 반환값들로 구성된 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.
const arr = [1, 2, 3];
const plus = arr.map(item => item+2); //->[3, 4, 5]🍧 filter
자신을 호출한 배열을 순회하면서 전달받은 콜백 함수의 반환값이 true인 요소라만 이루어진 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.
const arr = [1, 2, 3];
const big = arr.filter(item => item > 2); //->[3]🍧 reduce
콜백 함수의 반환값을 다음 순회에서 첫 번째 인자에 전달하며 하나의 결과값을 만드는 메서드입니다. 원본 배열은 변경되지 않습니다.
const sum = [1, 2, 3, 4]
.reduce((accumulator, currentValue, index, array) => accumulator + currentValue, 0);
//->10첫 번째 인수로 콜백 함수, 두 번째 인수로 초기값을 전달받습니다. 콜백함수에는 초기값, 배열의 요소값, 인덱스, this(호출한 배열)이 전달됩니다.
위 그림과 같이 초기값의 accumulator와 배열의 첫 번째 요소가 콜백 함수로 전달됩니다. 그 다음엔 결과값과 두 번째 요소가 콜백함수로 전달되는 방식의 반복입니다. 결과적으로 하나의 결과값을 리턴합니다.
🍧 some
인수로 전달된 콜백함수로 배열의 요소들을 순회하면서 단 한 번이라도 참이면 true, 모두 거짓이면 false를 리턴합니다.
[2, 3, 4].some(item => item > 3); //-> true
[2, 3, 4].some(item => item > 4); //-> false;🍧 every
인수로 전달된 콜백함수로 배열의 요소들을 순회하면서 하나라도 거짓이면 false를 리턴하고 모두 참이면 true를 리턴합니다.
[2, 3, 4].every(item => item > 1); //-> true
[2, 3, 4].every(item => item > 3); //-> flase
참조
모던 자바 스크립트 Deep Dive(위키북스)
