이번 정리 목차는 27장, 31장, 32장이다.
27장 배열
배열 이란
- 여러 개의 값을 순차적으로 나열한 자료구조
- 배열이 가지고 있는 값을 요소(element), 배열의 요소는 index를 갖는다.
- index로 배열의 요소에 접근할 때 사용, 0부터 시작
- 요소에 접근할 때에는 대괄호 표기법 사용
- 배열은 length 프로퍼티를 갖는다(배열 요소의 개수)
- 배열은 객체타입, 인덱스와 length프로퍼티를 갖기에 for문 통해 순차적 요소 접근 가능
- 배열 리터럴, Array생성자 함수, Array.of, Array.from메서드로 생성 가능
| 구분 | 객체 | 배열 |
| 구조 | 프로퍼티 키와 프로퍼티 값 | 인덱스와 요소 |
| 값의 참조 | 프로퍼티 키 | 인덱스 |
| 값의 순서 | X | O |
| Length 프로퍼티 | X | O |
자바스크립트 배열은 배열이 아니다
- 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 밀집 배열이라 한다.
- JS배열은 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며 연속적으로 이루어져 있지 않을 수도 있다. 희소 배열이라 한다.
- JS배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다.
length프로퍼티와 희소 배열
- length프로퍼티는 배열의 길이를 나타내는 0이상의 정수를 값으로 갖는다.
- length 프로퍼티 값은 배열에 요소 추가하거나 삭제하면 자동 갱신 되는데 명시적으로 할당할 수 있다. 기존 배열 크기보다 작게 할당하면 배열 길이가 줄지만 큰 수를 할당하면 희소배열이 된다.
- 희소 배열은 length와 배열 요소의 개수가 일치하지 않음. 항상 length가 크다. 희소 배열을 생성하지 않도록 주의하자!!!
배열 생성
[배열 리터럴]
- 가장 일반적이고 간편한 생성 방식
- 0개 이상의 요소를 쉼표로 구분하고 대괄호로 묶는다.
- 요소를 추가하지 않으면 빈배열이 되지만 요소를 빠뜨리면 희소배열이 된다.
[Array 생성자 함수]
- 전달된 인수가 1개이고 숫자이면 length값이 인수인 희소 배열 생성
const arr = new Array(10); 하면 length가 10인 희소 배열
- 전달된 인수가 없으면 빈 배열 생성, 배열 리터럴[]과 같음
new Array() => []
- 전달된 인수가 2개 이상이거나 숫자가 아니면 인수를 요소로 갖는 배열 생성
new Array(1,2,3) => [1,2,3] // new Array({}) => [ {} ]
- Array 생성자 함수는 new와 함께 호출하지 않아도 생성자 함수로 동작(new.target을 내부에서 확인하기 때문)
[Array.of]
- 전달된 인수를 요소로 갖는 배열 생성
- 생성자 함수와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열 생성
Array.of(1) => [1]
[Array.from]
- 유사배열객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환
배열 요소의 참조
- 참조는 대괄호 표기법 사용, 존재하지 않는 요소에 접근하면 undefined 반환
배열 요소의 추가와 갱신
- 존재하지 않는 인덱스를 사용해 값을 할당하여 추가하고 이미 존재하는 요소에 재할당하여 갱신
- 정수 이외의 값을 인덱스처럼 사용하면 요소가 생성이 되지 않고 프로퍼티 생성, length의 영향을 주지 않는다.
배열 요소의 삭제
- delete 연산자 사용 가능하지만 희소배열이 되므로 사용하지 말자
- Array.prototype.splice 메서드를 사용하자!
배열 메서드
- 정적 메서드와 프로토타입 메서드를 제공
- 원본 배열을 직접 변경하는 메서드와 원본 배열 건드리지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.
- 가급적 원본 배열 직접 변경하지 않는 메서드를 사용하자
[Array.isArray]
- 인수가 배열이면 true, 아니면 false 반환
[Array.prototype.indexOf]
- 인수로 전달된 요소를 검색하여 index 반환
- 중복되는 요소가 여러 개라면 첫번째 검색된 인덱스 반환
- 존재하지 않으면 -1 반환
- Array.prototype.includes 메서드 사용하면 가독성 더 좋다
[Array.prototype.push]
- 인수로 전달받은 모든 값을 원본배열의 마지막 요소로 추가하고 변경된 length 값 반환
- 원본 배열 직접 변경하기 때문에 스프레드 문법 사용하자
- const arr = [1,2]; const newArr= […arr, 3];
[Array.prototype.pop]
- 원본 배열에서 마지막 요소 제거하고 제거한 요소 반환
- 원본 배열이 빈 배열이면 undefined 반환, 원본 배열 직접 변경
[Array.prototype.ushift]
- 인수로 전달받은 모든 값을 원본배열의 선두에 요소로 추가하고 변경된 length값 반환
- 원본 배열 직접 변경하기 때문에 스프레드 문법 사용하자
const arr = [1,2]; const newArr = [3, …arr];
[Array.prototype.shift]
- 원본 배열에서 첫 번째 요소 제거하고 제거한 요소를 반환
- 원본 배열이 빈 배열이면 undefined 반환, 원본 배열 직접 변경
[Array.prototype.concat]
- 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환
- push, unshift대신 concat 대체 가능
- 스프레드 문법으로 대체 가능
result = [ …[1,2], …[3,4] ];
- 결론적으로 push, unshift메서드와 concat 메서드 대신 스프레드 문법 사용하는 것 권장!
[Array.prototype.splice]
- 중간에 요소를 추가하거나 중간에 있는 요소 제거할 때 사용
- 3개의 매개변수가 있으며 원본 배열 직접 변경
- start: 제거하기 시작할 인덱스
- deleteCount: start부터 제거할 요소의 개수, 0이면 제거 안함(옵션)
- items: 제거한 위치에 삽입할 요소들의 목록, 생략하면 제거만 함(옵션)
[Array.prototype.slice]
- 인수로 전달된 범위의 요소들을 복사하여 배열로 반환
- 원본 배열 변경 안됨, 두 개의 매개변수 갖는다.
- start: 복사를 시작할 인덱스, 음수이면 배열의 끝에서부터 인덱스까지 나타냄
- end: 복사를 종료할 인덱스, 이 인덱스 전 까지만 복사 해당
- slice를 이용하여 유사 배열 객체도 배열 변환 할 수 있지만 스프레드 문법으로 간단하게 가능 const arr = […arguments];
[Array.prototype.join]
- 원본 배열의 모든 요소를 문자열로 변환한 후 전달받은 구분자로 연결한 문자열을 반환
- 기본 구분자는 콤마
[Array.prototype.reverse]
- 원본 배열의 순서를 반대로 뒤집는다. 원본 배열 변경, 반환 값은 변경된 배열
[Array.prototype.fill]
- 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다. 원본 배열 변경
- 두번째 인수로 채우기 시작할 인덱스 지정, 세번째 인수로 채우기 멈출 인덱스 지정(이 인덱스 전까지)
[Array.prototype.includes]
- 배열 내에 특정 요소가 포함되어 있는지 확인하여 true false 반환
- 첫번째 인수로 검색할 대상 지정, 두번째 인수로 검색 시작할 인덱스 전달, 음수 전달하면 length + 음수 계산하여 인덱스 설정
[Array.prototype.flat]
- 인수로 전달한 깊이만큼 재귀적으로 배열 평탄화
- 중첩 배열을 평탄화 할 때 사용
배열 고차 함수
- 고차함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.
- 조건문과 반복문을 제거하여 복잡성 해결하고 변수 사용 억제하여 상태 변경을 피하려는 패러다임이 함수형 프로그래밍이다.
- 함수형 프로그래밍은 순수 함수를 통해 부수 효과를 최대한 억제하여 안전성을 높이는 노력의 일환
[Array.prototype.sort]
- 배열의 요소 정렬, 원본 배열 직접 변경, 정렬된 배열 반환, 기본적으로 오름차순
- 숫자일때는 유니코드 코드 포인트 순서를 따라 정렬이 잘 안되므로 정렬 순서를 정의하는 비교 함수를 인수로 전달 해야한다.
arr.sort((a,b) => a-b); 오름차순 정렬
[Array.prototype.forEach]
- for문을 대체할 수 있는 고차함수
- 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출
- 원본 배열 변경하지 않음, 반환값은 언제나 undefined
- break, continue문 사용 불가
- 희소 배열 경우 존재하지 않는 요소는 순회 대상 제외
[Array.prototype.map]
- 자신을 호출한 배열을 순회하면서 인수로 전달받은 콜백 함수 반복 호출
- 콜백 함수의 반환값들로 구성된 새로운 배열 반환
- 원본 배열 변경 X
- 원본 배열과 map에서 생성하여 반환한 배열은 1:1 매핑(length가 같다)
[Array.prototype.filter]
- 자신을 호출한 배열을 순회하면서 인수로 전달받은 콜백 함수 반복 호출
- 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열 반환
- 원본 배열 변경 X
- filter에서 반환한 배열은 length가 원본보다 같거나 작다
[Array.prototype.reduce]
- 자신을 호출한 배열을 순회하면서 인수로 전달받은 콜백 함수 반복 호출
- 하나의 결과값을 만들어 반환, 원본 배열 변경 X
- reduce는 언제나 초기값 전달하는 것이 안전하다!!
- 모든 배열 고차함수는 reduce로 구현 가능
[Array.prototype.some]
- 자신을 호출한 배열을 순회하면서 인수로 전달받은 콜백 함수 반복 호출
- 콜백 함수의 반환값이 단 한 번이라도 참이면 true, 모두 거짓이면 false
- 빈 배열이면 언제나 false
[Array.prototype.every]
- 자신을 호출한 배열을 순회하면서 인수로 전달받은 콜백 함수 반복 호출
- 콜백 함수의 반환값이 모두 참이면 true, 단 한 번이라도 거짓이면 false
- 빈 배열이면 언제나 true
[Array.prototype.find]
- 자신을 호출한 배열을 순회하면서 인수로 전달받은 콜백 함수 반복 호출
- 반환값이 true인 첫 번째 요소를 반환
- 반환값이 true인 요소가 없으면 undefined 반환
[Array.prototype.findIndex]
- 자신을 호출한 배열을 순회하면서 인수로 전달받은 콜백 함수 반복 호출
- 반환값이 true인 첫 번째 요소의 인덱스를 반환
- 요소가 존재하지 않으면 -1 반환
[Array.prototype.flatMap]
- map메서드를 통해 생성된 새로운 배열을 평탄화 한다.
- map 메서드와 flat 메서드를 순차적 실행하는 효과
- 1단계만 평탄화 하기 때문에 중첩 배열의 평탄화 깊이를 지정해야 하면 map메서드와 flat메서드 각각 호출
31장 RegExp
정규 표현식이란
- 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어
- 문자열을 대상으로 패턴 매칭 기능 제공
- 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능이 패턴 매칭
- 가독성이 좋지 않다.
정규 표현식 생성
- 정규 표현식 객체 생성 방법은 정규표현식 리터럴과 RegExp 생성자 함수 사용
- 정규표현식리터럴은 패턴과 플래그로 구성 /regexp/i
RegExp메서드
[RegExp.prototype.exec]
- 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환, 결과가 없는 경우 null 반환
- 모든 패턴 검색하는 g플래그 지정해도 첫 번째 매칭 결과만 반환!!!
[RegExp.prototype.test]
- 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환
[RegExp.prototype.match]
- 매칭 결과를 배열로 반환
- 모든 패턴 검색하는 g플래그 지정하면 모든 매칭 결과 반환!!
플래그
- 정규 표현식의 검색 방식을 설정하기 위해 사용
| 플래그 | 의미 | 설명 |
| I | Ignore case | 대소문자 구별 X |
| G | Global | 모든 문자열을 전역 검색 |
| m | Multi line | 행이 바뀌더라도 검색 진행 |
패턴
- 패턴은 문자열의 일정한 규칙을 표현하기 위해 사용
- /로 열고 닫고 따옴표는 생략
32장 String
String 생성자 함수
- 문자열을 다룰 때 유용한 프로퍼티와 메서드 제공
- 표준 빌트인 객체인 String 객체는 생성자 함수 객체, new와 함께 호출하여 String인스턴스 생성
- 인수를 전달하지 않고 new와 호출하면 [[StringData]]내부 슬롯에 빈 문자열을 할당한 래퍼 객체 생성
- 인수 전달하면 전달된 인수를 할당 한 래퍼 객체 생성
- String래퍼 객체는 유사 배열 객체이면서 이터러블이다.
- new 연산자 없이 호출하면 문자열 반환, 타입 변환 이용
- length 프로퍼티는 문자열의 문자 개수 반환
String 메서드
- String 메서드는 언제나 새로운 문자열을 반환
- String 래퍼 객체도 읽기 전용 객체로 제공
[String.prototype.indexOf]
- 대상 문자열(메서드를 호출한 문자열)에서 인수로 전달받은 문자열을 검색하여 첫번째 인덱스 반환, 검색 실패하면 -1 반환
- 두번째 인수로 검색 시작할 인덱스 전달
- String.prototype.includes 메서드 사용하면 가독성 더 좋다.
[String.prototype.search]
- 인수로 전달받은 정규 표현식과 매치하는 문자열을 검색하여 일치하는 문자열의 인덱스 반환, 검색 실패하면 -1 반환
[String.prototype.includes]
- 인수로 전달받은 문자열이 포함되어 있는지 확인하여 그 결과를 true 또는 false 반환
- 2번째 인수로 검색을 시작할 인덱스 전달
[String.prototype.startsWith]
- 인수로 전달받은 문자열로 시작하는지 확인하여 true / false 반환
- 2번째 인수로 검색을 시작할 인덱스 전달
[String.prototype.endsWith]
- 인수로 전달받은 문자열로 끝나는지 확인하여 true / false 반환
- 2번째 인수로 검색할 문자열의 길이 전달
[String.prototype.charAt]
- 인수로 전달받은 인덱스에 위치한 문자를 검색하여 반환
- 인덱스가 문자열의 범위 벗어난 경우 빈 문자열 반환
[String.prototype.substring]
- 첫 번째 인수로 전달받은 인덱스에 위치하는 문자부터, 두번째 인수로 전달받은 인덱스에 위치하는 문자의 바로 이전 문자까지 부분 문자열 반환
- 두번째 인수 생략 가능, 생략하면 끝까지 반환
- 첫번째 인수 > 두번째 인수인 경우 두 인수는 교환 됨
- 인수 < 0 또는 NaN인 경우 0으로 취급
- 인수 > length인 경우 인수는 length로 취급된다.
[String.prototype.slice]
- substring과 동일하게 동작
- 단, 음수 인수 전달 가능, 음수로 전달하면 가장 뒤에서부터 시작하여 부분 문자열 반환
[String.prototype.toUpperCase]
- 모두 대문자 변경한 문자열 반환
[String.prototype.toLowerCase]
- 모두 소문자 변경한 문자열 반환
[String.prototype.trim]
- 문자열에 앞뒤 공백 있으면 공백 제거 한 문자열 반환
[String.prototype.repeat]
- 인수로 전달받은 정수만큼 반복해 연결한 새로운 문자열 반환
- 0이면 빈문자열, 음수면 에러
[String.prototype.replace]
- 첫번째 인수로 전달받은 문자열 또는 정규표현식을 검색하여 두번째 인수로 전달한 문자열로 치환한 문자열을 반환
- 문자열 여럿 존재하면 첫 번째로 검색된 문자열만 치환
[String.prototype.split]
- 첫번째 인수로 전달받은 문자열 또는 정규표현식을 검색하여 문자열을 구분한 후 분리된 각 문자열로 이루어진 배열 반환
- 인수로 빈 문자열 전달하면 각 문자를 모두 분리하고 인수 생략하면 문자열 전체를 단일 요소로 하는 배열 반환
- 두번째 인수로 배열 길이 지정
'JS DeepDive' 카테고리의 다른 글
| 모던 자바스크립트 DeepDive 공부 내용 14차 (0) | 2023.05.08 |
|---|---|
| 모던 자바스크립트 DeepDive 공부 내용 13차 (0) | 2023.05.08 |
| 모던 자바스크립트 DeepDive 공부 내용 11차 (0) | 2023.05.08 |
| 모던 자바스크립트 DeepDive 공부 내용 10차 (0) | 2023.05.08 |
| 모던 자바스크립트 DeepDive 공부 내용 9차 (0) | 2023.05.08 |