[부스트코스]{3. 웹 앱 개발: 예약서비스 1/4}(1. JavaScript - FE)_1. Array

배열 Array

 

0. 개념

 

배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체이다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않는다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해야한다.

배열은 요소 인덱스로 문자열(연관 배열)을 사용할 수 없으며 무조건 정수만 허용한다. 속성 접근자를 사용해 정수 외 키에 접근할 경우 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수한다. 배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로, 순회 및 변형 작업은 객체 속성에 적용되지 않는다.

 

 

 

 

 

1. 자주 사용하는 연산

배열 생성
인덱스로 항목 접근
항목들을 순환하며 처리
배열 끝에 항목 추가
배열 끝 항목 제거
배열 앞 항목 제거
배열 앞 항목 추가
항목의 인덱스 찾기
인덱스 위치에 있는 항목 제거
여러개의 항목 제거 (index: pos이상 n이하)
배열 복사

 

 

 

 

2. 배열 요소에 접근하기

JavaScript 배열의 인덱스는 0부터 시작한다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 length 속성에서 1을 뺀 것과 같다. 잘못된 인덱스를 사용하면 undefined를 반환한다.

 

toString이 속성인 것과 마찬가지로(정확히 하자면, toString()은 메서드다.) 배열의 요소도 속성이다. 하지만 아래의 예시처럼 배열 요소에 접근하려 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생한다.

이 점에는 JavaScript 배열과 속성에 특별한 점이 없다. 숫자로 시작하는 JavaScript 속성은 마침표 구문으로 접근할 수 없으며, 반드시 괄호 표기법으로 접근해야 한다. 예를 들어 '3d'라는 이름의 속성을 가진 객체에서 해당 속성에 접근할 땐 괄호 표기법을 사용해야만 합니다.

 

 

 

 

 

 

 

3. length와 숫자형 속성의 관계

JavaScript 배열의 length 속성과 숫자형 속성은 연결되어 있다. 몇몇 배열 내장 메서드(join, slice, indexOf 등)은 호출했을 때 배열의 length 속성의 값을 참조한다. 다른 메서드(push, splice 등) 또한 배열의 length 속성의 업데이트를 유발한다.

length를 직접 늘릴 수 있다. length 속성을 감소시키면 요소를 지우게 된다.

 

 

 

 

 

 

 

4. 인스턴스 메서드

 

- 변경자 메서드: 배열을 수정한다.

 

Array.prototype.copyWithin()배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.

Array.prototype.fill()배열 안의 시작 인덱스부터 끝 인덱스까지의 요소값을 지정된 정적 값으로 채웁니다.

Array.prototype.pop()배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.

Array.prototype.push()배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.

Array.prototype.reverse()배열의 요소 순서를 반전시킵니다. 첫 번째가 마지막이 되고 마지막이 첫 번째가 됩니다.

Array.prototype.shift()배열에서 첫 번째 요소를 삭제하고 그 요소를 반환합니다.

Array.prototype.sort()배열의 요소를 정렬하고 그 배열을 반환합니다.

Array.prototype.splice()배열에서 요소를 추가/삭제합니다.

Array.prototype.unshift()배열의 앞에 하나 이상의 요소를 추가하고 새로운 길이를 반환합니다.

 

- 접근자 메서드: 접근자 메서드는 배열을 수정하지 않고, 기존 배열의 일부에 기반한 새로운 배열 또는 값을 반환한다.

 

Array.prototype.concat()배열을 매개변수로 주어진 배열/값과 이어붙인 새로운 배열을 반환합니다.

Array.prototype.filter()지정한 콜백의 반환 결과가 true인 요소만 모은 새로운 배열을 반환합니다.

Array.prototype.includes()배열이 주어진 값을 포함하는지 판별해 true 또는 false를 반환합니다.

Array.prototype.indexOf()배열에서 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 -1을 반환합니다.

Array.prototype.join()배열의 모든 요소를 문자열로 합칩니다.

Array.prototype.lastIndexOf()배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환합니다. 없으면 -1을 반환합니다.

Array.prototype.slice()배열의 일부를 추출한 새 배열을 반환합니다.

Array.prototype.toSouce() 지정한 배열을 나타내는 배열 리터럴을 반환합니다. 새로운 배열을 만들기 위해 이 값을 사용할 수 있습니다. 

Object.prototype.toSource() 메서드를 재정의합니다.

Array.prototype.toString()배열과 그 요소를 나타내는 문자열을 반환합니다. 

Object.prototype.toString() 메서드를 재정의합니다.

Array.prototype.toLocaleString()배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. 

Object.prototype.toLocaleString() 메서드를 재정의합니다.

 

-순회 메서드: 배열을 처리하면서 호출할 콜백 함수를 받는 메서드 여럿이 존재한다. 이런 메서드를 호출하면 배열의 length를 기억하므로, 아직 순회를 끝내지 않았을 때 요소를 더 추가하면 콜백이 방문하지 않는다. 요소의 값을 바꾸거나, 요소를 제거하는 등 다른 변경점은 콜백 방문 시점에 따라 최종 값에 영향을 줄 수 있다. 비록 이런 동작 방식은 잘 정의되어 있으나, 여러분의 코드를 다른 사람이 읽을 때 헷갈리지 않도록 여기에 의존하면 안된다.

=> 반드시 배열을 변형해야 한다면, 새로운 배열로 복사해야한다.

 

Array.prototype.entries()배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 배열 반복자 객체를 반환합니다.

Array.prototype.every()배열의 모든 요소가 주어진 판별 콜백을 만족할 경우 true를 반환합니다.

Array.prototype.find()주어진 판별 콜백을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 undefined를 반환합니다.

Array.prototype.findIndex()주어진 판별 콜백을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 undefined를 반환합니다.

Array.prototype.forEach()배열의 각각의 요소에 대해 콜백을 호출합니다.

Array.prototype.keys()배열의 각 인덱스에 대한 키를 가지는 새로운 배열 반복자 객체를 반환합니다.

Array.prototype.map()배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환합니다.

Array.prototype.reduce()주어진 콜백 함수를 가산기와 요소 각각에 대해 왼쪽에서 오른쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.

Array.prototype.reduceRight()주어진 콜백 함수를 가산기와 요소 각각에 대해 오른쪽에서 왼쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.

Array.prototype.some()배열의 어떤 요소가 주어진 판별 콜백을 만족할 경우 true를 반환합니다.

Array.prototype.values()배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.

Array.prototype[@@iterator]()배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.

 

 

 

 

 

 

 

 

 

#참고 자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array

 

 

 

 

 

 

#부스트코스 강의

https://www.edwith.org/boostcourse-web/lecture/16745/

[LECTURE] 1) 자바스크립트 배열 : edwith