[바닐라 자바스크립트] 5장 - 자바스크립트 고급 문법

5.1 this 키워드

  - 사용되는 위치에 따라 this 키워드에 바인딩 된 객체가 달라짐

  - this에 window 객체가 바인딩 된 경우

    - script 태그 루트와 script 태그 안에 선언된 함수 내에서의 this는 window 객체 가리킴

  - this에 DOM 요소가 바인딩 된 경우

    - 이벤트가 발생한 HTML DOM 그 자체를 가리킴

  - this에 Object 객체가 바인딩 된 경우

    - 객체 리터럴 내부에 함수를 정의할 때,

      함수 내에서 Object 내에 정의된 다른 키 접근 위해 this 키워드를 통해 접근 가능

    - Object에 키로 존재하지 않지만, Object 내에 이미 키로 선언되어 사용 중인 다른 데이터를 활용해서

      만들 수 있는 새로운 데이터를 정의해서 사용하기 위해 많이 사용

5.2 Scope

  - Scope: 선언된 변수에 대한 접근성

    - Local Scope

    - Global Scope

5.3 Default Function Parameter

  - 함수 호출 시 파라미터가 전달되지 않았을 때 사용할 기본값을 설정하는 기능

  - 파라미터 값이 전달되지 않아 생기는 함수 오류 사전에 방지 가능

5.4 Rest Parameter

  - 파라미터로 몇 개의 파라미터가 전달될지 모를 때 매우 유용하게 사용 가능

  - ...파라미터명 => 배열로 저장됨

5.5 Arrow Function

  - 함수를 정의하는 새로운 방법

  - 구문이 짧아지는 이점

  - 화살표 함수 내의 this는 언제나 상위 스코프의 this를 가리킴

5.6 Template Literals

  - 변수에 할당된 문자열을 하나의 문자열로 병합할 때,

    더하기를 사용하지 않고 하나의 문자열로 만들 수 있음

  - 백틱, ${변수명 } 사용

  - 문자열에 변수의 값을 병합할 때 매우 효율적으로 사용 가능

5.7 Object Literal Syntax Extension

  - Object의 키로 변수에 할당된 문자열 값 사용 가능

  - [ ] 이용

  - Object의 키 동적으로 생성 가능

5.8 Spread Operator

  - iteration 형태의 데이터를 요소 하나하나로 모두 분해해서 사용

5.9 Object Destructuring

  - Object에 저장된 데이터를 분해하여 필요한 데이터만 바로 추출해서 사용할 수 있도록 해줌

5.10 Array Destructuring

  - 배열에 저장된 요소를 분해해서 배열의 순서에 따라 변수를 정의해서 사용할 수 있게 해줌

  - 실무 예제. 외부 라이브러리부터 위도/경도 데이터 반환받아 사용할 때

5.11 XMLHttpRequest

  - 전체 페이지를 새로고침하지 않아도 URL을 통해 데이터 전송하거나 받아올 수 있음

  - 모든 종류의 데이터 받아올 수 있음

  - 객체 생성

    - 브라우저 환경에서만 동작

  - 요청 전송

    - HTTP Method, 요청 URL 정의

  - 응답 처리

  - 테스트

5.12 Fetch API

  - 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있음

  - Promise 방식으로 구현되어 있음

5.13 Promise & Async/Await

  - Promise: JS에서 비동기 처리에 사용되는 객체

    - new 생성자 함수를 사용해서 생성

  - Async/Await

    - 비동기 실행

    - 간결하고 가독성 높은 코드 구현 가능

5.14 Modules

  - 모듈; 분리된 각각의 JS 파일

    - export

    - import

  - 모듈 스크립트는 페이지의 모든 HTML 요소가 로드되고 난 다음 실행됨

5.15 Class

  - 클래스; 객체를 생성하기 위한 템플릿

5.16 Error

  - try...catch 문

  - 오류 유형

    - Error 객체는 런타임 오류 발생했을 때 생김

    - EvalError

    - RangeError

    - ReferenceError

    - SyntaxError

    - TypeError

    - URIError

    - AggregateError

    - InternalError

  - throw

    - 의도적으로 예외 발생

5.17 Strict Mode (엄격 모드)

  - ES5, JS의 문법을 엄격하게 체크하는 모드

  - 'use strict';

5.18 정규 표현식 (Regular Expression)

  - 정규 표현식: 문자열에 포함된 특정 문자 조합을 찾기 위해 사용되는 패턴

    - 실무 예제. 사용자가 입력한 이메일 정보가 이메일 형식에 맞는지, 전화번호가 전화번호 형식에 맞는지 등

                       사용자로부터 입력받은 데이터가 프로그램에서 받고자 하는 데이터 형식과 일치하는지 체크

  - 정규식 만들기

    - 슬래시로 감싸는 패턴인 정규식 리터럴

    - RegExp 객체의 생성자 함수 사용

      - 생성자 함수 이용하면 정규식이 실행 시점에 컴파일됨

      - 정규식 패턴이 변경될 수 있거나, 사용자 입력이나 DB 등 다른 출처로부터 오는 정보에 따라

         정규식 패턴을 동적으로 적용해야 하는 경우에 사용

  - 정규식 함수

    - exec

    - test

    - match (String 객체 내장 함수)

    - search (String 객체 내장 함수)

    - replace (String 객체 내장 함수)

    - split (String 객체 내장 함수)

  - 정규식 특수 문자

    - \: 이스케이프 처리 (일반 문자로 인식)

    - ^: 시작 패턴

    - $: 종료 패턴

    - *: 0회 이상 반복, {0,}

    - +: 1회 이상 반복, {1,}

    - ?: 0회 또는 1회, {0,1}

    - .: 단일 문자

    - (x): 괄호 안에 패턴 전체 적용됨, 대응되는 결과 기억 ($1, $2, ...)

    - (?:x): 대응되는 결과 기억 X

    - x(?=y): x 뒤에 y가 뒤따라오는 경우

    - x(?!y): x 뒤에 y가 없는 경우

    - x|y: x 또는 y

    - {n}: n번 나타남

    - {n,m}: 최소 n개, 최대 m개 나타남

    - [xyz]: 문자셋, -를 이용하여 문자 범위 지정 가능

    - [^xyz]: 부정 문자셋, 패턴에 포함된 문자가 없는지와 대응됨

    - [\b]: 백 스페이스

    - \b: 문자열에 있는 단어의 경계, 첫 문자와 종료 문자

    - \B: 단어 경계가 아닌 부분

    - \d: 숫자 문자, [0-9]

    - \D: 숫자 문자가 아닌 문자, [^0-9]

    - \f: 폼 피드 문자

    - \n: 줄 바꿈 문자

    - \r: 엔터 키에 해당하는 문자

    - \s: 하나의 공백 문자

    - \S: 공백 문자가 아닌 문자

    - \t: 탭 문자

    - \v: 수직 탭 문자

    - \w: 밑줄 문자를 포함한 숫자, 영문 문자, [A-Za-z0-9_]

    - \W: 밑줄 문자, 숫자, 영문 문자가 아닌 문자, [^A-Za-z0-9_]

    - \n: 새로운 줄 (new line)

    - \0: 널 문자

    - \xhh: 16진수 hh

    - \uhhh: 유니코드 문자 16진수 hhh

  - 정규식 플래그

    - g: 전역 검색 (대응되는 문자 모두 검색)

    - i: 대소문자 구분 없는 검색

    - m: 다중 행 검색

  - 정규식이 자주 사용되는 사례

    - 전화번호, 우편번호, 계좌번호, 이메일 등 특정 규칙

---

[Reference]

Source Code - Vanilla JavaScript ch. 05

Vanilla JavaScript (비제이 퍼블릭 출판사)