러닝 자바스크립트 스터디 자료 - CHAPTER 8. 배열과 배열처리

배열의 기초

  • 배열은 객체와 달리 본질에서 순서가 있는 데이터 집합이며 0으로 시작하는 숫자형 인덱스를 사용합니다.
  • 자바스크립트의 배열은 비균질적입니다. 즉 한 배열의 요소가 모두 같은 데이터 타입일 필요는 없습니다. 배열은 다른 배열이나 객체도 포함 할 수 있습니다.
  • 배열 리터럴은 대괄호로 만들고, 배열 요소에 인덱스로 접근 할 때도 대괄호를 사용합니다.
  • 모든 배열에는 요소가 몇 개 있는지 나타내는 length 프로퍼티가 있습니다.
  • 배열에 배열 길이보다 큰 인덱스를 사용해서 요소를 할당하며 배열을 자동으로 그 인덱스에 맞게 늘어나며, 빈자리는 undefined로 채워집니다.
  • Array 생성자를 써서 배열을 만들수도 있습니다.

배열요소 조작

배열 메서드 중 일부는 ‘배열자체를 수정’하며, 다른 일부는 ‘새 배열’을 반환합니다.
예) push는 배열자체를 수정하며, concat은 새 배열을 반환합니다.

push, pop, shift, unshift 메서드

배열의 처음은 첫 번째 요소, 즉 인덱스가 0인 요소
배열의 끝은 인덱스가 가장 큰 요소, 즉 배열이 arr이라면 arr.length -1 인 요소
push 와 pop은 각각 배열의 끝에 요소를 추가하거나 제거합니다. (수정)
shift와 unshift는 각각 배열의 처음에 요소를 제거하거나 추가합니다. (수정)

concat 메서드

concat메서드는 배열의 끝에 여러요소를 추가한 사본을 반환
concat은 제공받은 배열을 한 번만 분해합니다.
배열안에 있는 배열을 다시 분해 하지는 않습니다. - 이해가 잘 안감

slice 메서드

배열의 일부만을 가져올때 사용합니다.
slice 메서드는 매개변수 두 개를 받습니다.
첫 번째 매개변수는 어디서부터 가져올지를 두 번째 매개변수는 어디까지 가져올지를(바로 앞 인덱스까지 가져옵니다.) 지정합니다.
두 번째 매개변수를 생략하면 배열의 마지막 까지 반환합니다.
음수인덱스를 사용하면 배열의 끝에서부터 요소를 셉니다.

1
2
3
4
5
6
const arr = [1, 2, 3, 4, 5];
arr.slice(3); // [4,5] arr은 바뀌지 않았습니다.
arr.slice(2,4); // [3,4] arr은 바뀌지 않았습니다.
arr.slice(-2); // [4,5] arr은 바뀌지 않았습니다.
arr.slice(1,-2); // [2,4] arr은 바뀌지 않았습니다.
arr.slice(-2,-1); // [4] arr은 바뀌지 않았습니다.

splice 메서드

배열을 자유롭게 수정할 수 있습니다.
첫 번째 매개변수는 수정을 시작할 인덱스 이고, 두 번째 매개변수는 제거할 요소 숫자입니다.
아무요소도 제거하지 않을 때는 0을 넘깁니다. 나머지 매개변수는 배열에 추가될 요소입니다.

1
2
3
4
5
const arr = [1, 5, 7];
arr.splice(1,0,2,3,4); // [] arr은 이제 [1,2,3,4,5,7]입니다.
arr.splice(5,0,6); // [] arr은 이제 [1,2,3,4,5,6,7]입니다.
arr.splice(1,2); // [2,3] arr은 이제 [1,4,5,6,7]입니다.
arr.splice(2,1,'a','b') // [5] arr은 이제 [1,4,'a','b',6,7]입니다.

copyWithin 메서드

ES6에서 도입, 배열요소를 복사해서 다른 위치에 붙여넣고, 기존 요소를 덮어 씁니다.
첫 번째 매개변수는 복사한 요소를 붙여넣을 위치이고, 두 번째 매개변수는 복사를 시작할 위치, 세 번째 매개변수는 복사를 끝낼 위치입니다.(생략가능)
음수를 사용하면 배열의 끝에서부터 셉니다.

1
2
3
4
const arr = [1,2,3,4];
arr.copyWithin(1, 2); // arr은 이제 [1,3,4,4]입니다.
arr.copyWithin(2, 0, 2); // arr은 이제 [1,3,1,3]입니다.
arr.copyWithin(0, -3, -1); // arr은 이제 [3,1,1,3]입니다.

fill 메서드

ES6에서 도입, 정해진 값으로 배열을 채웁니다.
크기를 지정해서 배열을 생성하는 Array 생성자와 잘 어울립니다.
배열의 일부만 채우려 할때는 시작인덱스와 끝인덱스를 지정하면 된다.
음수인덱스도 사용 할 수 있다.

1
2
3
4
5
6
const arr = new Array(5).fill(1);    // arr이 [1,1,1,1,1]로 초기화 뙵니다.
arr.fill("a"); // arr은 이제 ["a","a","a","a","a"]입니다.
arr.fill("b",1); // arr은 이제 ["a","b","b","b","b"]입니다.
arr.fill("c",2,4); // arr은 이제 ["a","b","c","c","b"]입니다.
arr.fill(5.5, -4); // arr은 이제 ["a",5.5,5.5,5.5,5.5]입니다.
arr.fill(0,-3,-1); // arr은 이제 ["a",5.5,0,0,5.5]입니다.

reverse 메서드

배열의 요소의 순서를 반대로 바꿉니다.

sort 메서드

배열 요소의 순서를 정렬합니다. sort는 정렬 함수를 받을 수 있습니다.
일반적으로는 객체가 들어있는 배열을 정렬 할 수 없지만 정렬 함수를 사용하면 가능하다.

배열검색

indexOf,lastIndexOf 메서드,

indecOf 메서드는 찾고자 하는 것과 정확히 일치(===)하는 첫 번째 요소의 인덱스를 반환
lastIndexOf 메서드는 배열의 끝에서부터 검색
배열의 일부분만 검색하려면 시작 인덱스를 지정할 수 있다.
indexOf 와 lastIndexOf는 일치하는 것을 찾지 못하면 -1 을 반환한다.

findindex 메서드

findindex는 메서드는 보조함수를 써서 검색조건을 지정할 수 있다.
indexOf와 lastindexOf 처럼 일치하는 것을 찾지 못하면 -1을 반환
검색 시작할 인덱스를 지정 할 수 없고, 뒤에서 부터 찾을 수도 없다.

find 메서드

조건에 맞는 요소의 인덱스가 아니라 요소 자체를 검색할 때 사용
검색 조건을 함수로 전달 할 수 있다.
조건에 맞는 요소가 없을 때는 undefined를 반환

some 메서드

조건에 맞는 요소를 찾으면 즉시 검색을 멈추고 true를 반환
조건에 맞는 요소를 찾지 못하면 false를 반환

every 메서드

배열의 모든 요소가 조건에 맞아야 true를 반환 그렇지 않다면 false를 반환
조건에 맞지 않는 요소를 찾아야만 검색을 멈추고 false를 반환
조건에 맞지 않는 요소를 찾지 못하면 배열 전체를 검색

map 과 filter 메서드

map은 배열 요소를 변형합니다.
map 과 filter 는 사본을 반환하며 원래 배열을 바뀌지 않습니다.
콜백함수는 각 요소에서 호출 될 때 요소 자체와 요소인덱스, 배열전체를 매개변수로 받습니다.

fliter 는 필요한 것들만 남깁니다.
map과 마찬가지로 사본을 반환하며 새 배열에는 필요한 요소만 남습니다.
어떤 요소를 남길지 함수로 넘깁니다.

reduce 메서드

map이 배열의 각 요소를 변형한다면 reduce는 배열 자체를 변형합니다.
reduce는 map과 filter를 비롯해 앞의 설명한 배열 메서드의 동작 대부분을 대신 할 수 있다.
reduce가 받는 첫번째 매개변수는 배열이 줄어드는 대상인 어큐뮬레이터 입니다.
두 번째 매개변수부터는 여태까지 설명한 콜백의 순서대로 현재배열요소, 현재인덱스, 배열 자체 입니다.

reduce는 초기값도 옵션으로 받을 수 있습니다.

1
2
const arr = [5,7,2,4];
const sum = arr.reduce((a,x => a += x,0));

reduce의 콜백 함수는 매개변수로 누적값 a와 현재 배열요소 x를 받았습니다. 이 예제에서 누적값은 0으로 시작합니다.

진행순서

  1. 첫 번째 배열 요소 5에서 익명 함수를 호출합니다. a의 초깃값은 0이고 x의 값은 5입니다. 함수는 a와 x(5)의 합을 반환합니다. 이 값은 다음 단계에서 a의 값이 됩니다.
  2. 두 번째 배열 요소 7에서 함수를 호출합니다. a의 초깃값은 이전 단계에서 전달한 5이고, x의 값은 7입니다. 함수는 a와 x의 합 12를 반환합니다. 이 값은 다음 단계에서 a의 값이 됩니다.
  3. 세 번째 배열 요소 2에서 함수를 호출합니다. 이 단계에서 a는 12이고 x는 2 입니다. 함수는 a와 x의 합인 14를 반환합니다.
  4. 네 번째이자 마지막 배열 요소인 4에서 함수를 호출합니다 a는 14이고 x는 4입니다. 함수는 a와 x의 합인 18을 반환하며 이 값은 reduce의 값이고 sum에 할당 되는 값입니다.
    누적값이 어떻게 변하는 지 생각하는 습관을 기르는게 좋다.

누적값이 undefined로 시작된다면 어떻게 될까? 누적갑이 제공되지 않으면 reduce는 첫 번째 배열요소를 초기값으로 보고 두 번째 요소에서부터 함수를 호출합니다.
배열의 첫 번재 요소가 그대로 초깃값이 될 수 있을때는 초깃값을 생략해도 됩니다.

reduce는 보통 숫자나 문자열 같은 원시값을 누적값으로 사용하지만 객체 또한 누적 값이 될 수 있고 이를 통해 아주 다양하게 활용할수 있다.

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×