Colin's Blog
[learning javascript] chapter 8. 배열과 배열처리

배열과 배열처리

배열의 기초

// 배열 요소에 접근하기 arr1[0]; // 1 arr1[2]; // 3 arr3[1]; // [“one”, 2, “three”] arr4[1][0]; // { name: “Susan”, type: “object” }

// 배열 길이 arr1.length; // 3 arr4.length; // 5 arr4[1].length; // 2

// 배열 길이 늘리기 arr1[4] = 5; arr1; // [1, 2, 3, undefined, 5] arr1.length; // 5

// 배열의 현재 길이보다 큰 인덱스에 접근하는 것만으로 배열의 길이가 늘어나지는 않는다. arr2[10]; // undefined arr2.length // 3

// Array 생성자 const arr5 = new Array(); // 빈 배열 const arr6 = new Array(1, 2, 3); // [1, 2, 3] const arr7 = new Array(2); // 길이가 2인 배열, 요소는 모두 undefined const arr8 = new Array(“2”); // [“2”]


## 배열 요소 조작
- `push`는 배열 자체를 수정
- `concat`은 새 배열 반환

#### 배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하기
- 배열의 처음은 인덱스가 0인 요소
- 배열의 끝은 배열이 arr이라면 arr.length - 1인 요소
- push와 pop은 각각 배열의 끝에 요소를 추가하거나 제거
- shift와 unshift는 각각 배열의 끝에 요소를 제거하거나 추가
- push와 unshift는 새 요소를 추가해서 늘어난 길이를 반환하고, pop과 shift는 제거된 요소를 반환
```javascript
const arr = ["b", "c", "d"];
arr.push("e");      // 4. arr은 이제 ["b", "c", "d", "e"]
arr.pop();          // "e". arr은 이제 ["b", "c", "d"]
arr.unshift("a");   // 4. arr은 이제 ["a", "b", "c", "d"]
arr.shift();        // "a". arr은 이제 ["b", "c", "d"]

배열의 끝에 여러 요소 추가하기

배열의 일부 가져오기

임의의 위치에 요소 추가하거나 제거하기

배열안에서 요소 교체하기

특정 값으로 배열 채우기

배열 정렬과 역순 정렬

배열 검색

arr.indexOf(“a”, 5); // -1 arr.indexOf(5, 5); // 5 arr.lastIndexOf(5, 4); // 1 arr.lastIndexOf(true, 3); // -1

- findIndex는 보조 함수를 써서 검색 조건 지정 가능
- 단, 시작 인덱스 지정불가, findLastIndex같은 짝도 없음
```javascript
const arr = [{ id: 5, name: "Judith" }, { id: 7, name: "francis" }];
arr.findIndex(o => o.id === 5);             // 0
arr.findIndex(o => o.name === "Francis");   // 1
arr.findIndex(o => o === 3);                // -1
arr.findIndex(o => o.id === 17);            // -1

// 옵션 1 : ID를 직접 비교하는 방법 arr.find(p => p.id === juliet.id); // juliet 객체

// 옵션 2 : “this” 매개변수를 이용 arr.find(function(p) { return p.id === this.id; }, juliet); // juliet 객체

- some은 조건에 맞는 요소를 찾으면 즉시 검색을 멈추고 true, 찾지 못하면 false
```javascript
const arr = [5, 7, 12, 15, 17];
arr.some(x => x%2 === 0);                       // true. 12는 짝수
arr.some(x => Number.isInteger(Math.sqrt(x)));  // false. 제곱수는 없음

map과 filter

// value가 2인 카드 cards.filter(c => c.value === 2); // [ // { suit: ‘H’, value: 2 }, // { suit: ‘C’, value: 2 }, // { suit: ‘D’, value: 2 }, // { suit: ‘S’, value: 2 }, // ]

- map이 배열의 각 요소를 변형한다면 reduce는 배열 자체를 변형
- map이나 filter처럼 콜백 함수를 받음
- 첫 번째 매개변수는 배열이 줄어드는 대상인 어큐뮬레이터(accumulator)
- 두 번째 매개변수부터는 기존에 설명했던 콜백의 순서대로, 현재 배열 요소, 현재 인덱스, 배열 자체
- 초기값도 옵션으로 받을 수 있음
```javascript
const arr = [5, 7, 2, 4];
const sum = arr.reduce((a, x) => a += x, 0);

삭제되거나 정의되지 않은 요소들

문자열 병합

요약

메서드 설명
reduce에만 적용 누적값, 초깃값 또는 마지막 호출에서 반환한 값
모든 메서드 요소(현재 요소의 값)
모든 메서드 현재 요소의 인덱스
모든 메서드 배열 자체
하고 싶은 일 사용할 메서드 수정 또는 사본
스택(후입 선출)을 만들 때 push(바뀐 길이 반환), pop 배열 수정
큐(선입 선출)을 만들 때 unshift(바뀐 길이 반환), shitf 배열 수정
여러 요소를 배열 마지막에 추가 concat 사본 반환
배열 일부 필요 slice 사본 반환
임의의 위치에 요소를 추가하거나 제거 splice 배열 수정
배열 안에서 요소를 교체할 때 copyWithin 배열 수정
배열을 채울 때 fill 배열 수정
배열을 반대로 정렬 reverse 배열 수정
배열을 정렬 sort(정렬 함수 사용 가능) 배열 수정
찾고자 하는 것 사용할 메서드
요소의 인덱스 indexOf(단순한 값), findIndex(복잡한 값)
인덱스를 뒤에서부터 찾을 때 lastIndexOf(단순한 값)
요소 자체 find
조건을 만족하는 요소가 들어있는지 확인 some
모든 요소가 그 조건을 만족하는지 확인 every
하고 싶은 일 사용할 메서드 수정 또는 사본
배열의 모든 요소를 변형 map 사본 반환
조건에 맞는 요소만 남김 filter 사본 반환
배열 전체를 다른 데이터 타입으로 변형 reduce 사본 반환
요소를 문자열로 바꿔서 하나로 합칠 때 join 사본 반환
© 2018 Colin. All rights reserved.