4. 배열

배열

1. 배열의 기초

• Array 생성자로 만들어진 객체
• 데이터 군
• 여러 데이터
• 참고) 자바(Collection - 데이터 군 - 자료)배열 X
  • 같은 자료형
  • 순차적인 나열 구조
  → 자바스크립트는 배열 X → 배열 객체
• 참고)
• 컬렉션 프레임워크

1. 배열 리터럴로 생성하기 const 배열명 = [....]; // new Array(...)
2. length 프로퍼티
   • 배열 객체 공간의 갯수
   참고)→ 규칙에서 벗어나면 → [’속성명’]
3. 객체의 속성명이 변수명 규칙과 동일 .(마침표)로 접근 가능
4. Array 생성자로 생성하기 const 배열명 = new Array(3);

• 매개변수가 1개일때는 배열 공간의 갯수
• 양의 정수 숫자 가능
• 매개변수가 여러개 일때는 갯수만큼 공간이 생성, 값이 순서대로 추가

1. 배열 요소의 참조
2. 배열은 객체
3. 배열 요소의 추가와 삭제
   • 추가 push(...items) : 끝에 추가 - 스택 구조(자료구조 중) unshift(...items) : 앞에 추가
   • 삭제 pop() : 가장 끝에 요소 꺼내기 - 스택 구조 shift() : 가장 앞에 요소를 꺼내기
   • 중간 추가, 삭제, 변경 splice(start, deleteCount, ...items) → 원래 데이터가 바뀐다.
   • 배열에서 점 세개(…) 쓰면 새롭게 배열 만들어서 추가 가능하다.const a2 = […a, “3”]
   • const a =[”1”, “2”]
4. 배열 요소가 있는지 확인하기Array.prototype.find : 첫번째 발견 요소Array.prototype.findLastIndex : 오른쪽 → 왼쪽Array.prototype.includes(…) : 요소의 위치 index(왼쪽 → 오른쪽), 못 찾으면 -1화살표 함수
   1. function 키워드 생략 가능
   2. 매개변수와 구현 체({ .. }) 사이에 =>
   3. 구현내용이 한줄이면 { … } 생략 가능, return 예약어도 생략 가능
   4. 매개변수가 1개 → (…) 생략 가능, 단 매개변수가 없으면 생략 불가
   → 생성자 함수로 역할 X→ this 범위가 함수를 정의할 때 이미 정의된 this가 this가 된다.화살표 함수
   • 주로 매개변수에서 많이 쓰인다
   • 최대한 줄일 거 다 줄여서 짧다
   • 함수 안에 한 줄만 있을 때 괄호랑 return 생략 가능
   • 매개변수가 한 개일 때는 소괄호도 생략 가능
   • 매개변수가 없을 때는 반드시 소괄호를 넣어야한다.
   • => → 화살표 함수 기호가 답이당!
5. 함수는 값
6. 화살표 함수 추가 설명)
7. → arguments 지역 변수 X
8. Array.prototype.lastIndexOf(..) : 요소의 위치 index(오른쪽 → 왼쪽), 못 찾으면 -1
9. Array.prototype.includes(…) : 요소가 있는지 체크(true, false)
10. Array.prototype.findIndex : 첫번째 발견 요소의 index(순서 - 0부터 시작하는), 왼쪽 → 오른쪽
11. in

1. 배열의 메서드
   1. Array.prototype의 메서드 목록판별every(callbackFn) : 모든 요소가 참 → 참반복변경flatMap(callbackFn) : 중첩된 배열 객체 → 1차원적인 배열 객체 변환join(”결합문자열 - 기본값 , “);AirBnB - 자바스크립트 코딩 가이드slice반복자 패턴 구현커서 : 이동 위치→ next() : 커서 이동 → 다음 요소 접근
   2. for .. of 구문 ← Symbol.iterator가 구현된 객체이면 사용 가능
   3. → 커서를 이동하면서 다음 요소 접근
   4. → 디자인 패턴
   5. Symbol.iterator 가 정의된 경우
   6. 깊은 복사
   7. 참고) String.prototype.split(”구문 문자열” → 문자열을 구분 문자열로 쪼개서 → 배열 객체
   8. 배열 → 문자열
   9. map(callbackFn) : 반환값으로 새로운 배열 객체 생성
   10. forEach(callbackFn) : 단순 반복
   11. some(callbackFn) : 어떤 것이든지 참이면 → 참
   12. filter(callbackFn) : callbackFn이 참으로 반환되는 요소만 걸러주기
   13. concat(…items) : 두개 이상의 배열을 병합, 원래 데이터 변환 X, 새로운 배열로 반환
   14. 다차원 배열[ … ] : 1차원 배열
   15. [ […], […] ] : 2차원 배열
   16. 배열 객체 안에 배열 객체를 정의
   17. 유사배열 상속관계가(프로토타입 체인)이 Array.prototype이 아닌 형태
   18. Array.prototype의 메서드를 유사 배열 객체에서 사용하기

ECMAScript6+에 추가된 기능

1. 비구조화 할당 → 시험에 나온다/ 분해해서 변수형태로 들어간다/효율적이다.
2. 배열의 비구조화 할당

• 기본적인 사용법 const|let [a, b] = [1, 2]; a = 1 b = 2
• 이미 선언된 변수를 비구조화 할당하는 예
• 나머지 요소 ... : 나머지 연산자

전개 연산자

참고) 이터레이터, 제너레이터 -> 값을 전개

• 요소의 기본값

1. 객체의 비구조화 할당

• 기본적인 사용법
• 프로터피의 기본값
• 프로퍼티 이름 생략하기

1. 반복 가능한 객체의 비구조화 할당

• 이터레이터, 제너레이터

1. 중첩된 자료 구조의 비구조화 할당
2. 전개 연산자
3. Map
   1. Map 객체의 생성
   2. Map 객체의 메서드
   3. 데이터 추가하기 set("키", "값")
   4. 값 읽기 get(키)
   5. 데이터가 있는지 확인 has(키)
   6. 데이터의 삭제 delete("키")
   7. 데이터의 열거 keys() : 키값의 배열 목록 values() : 값의 배열 목록
   8. entries() : 키,값 쌍 목록
4. Set
   1. Set 객체의 생성
   2. Set 객체의 메서드
   3. 데이터 추가 add(...)
   4. 데이터가 있는지 확인 has(...)
   5. 데이터의 삭제 delete(...)
   6. 데이터의 열거 .forEach(....)
   7. keys(), values() : 동일 값