모던 자바스크립트 Deep Dive 1

Modern JavaScript Deep Dive 1~10

1장 프로그래밍

프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 수, 그 흐름을 제어하는 것

프로그래밍이란?

  • 정확하고 상세하게 요구사항을 설명하는 작업이며 그 결과물이 바로 코드

  • 컴퓨터 관점에서 문제를 사고해야하며 여기에는 논리적, 수학적 사고가 필요

  • 해결 과제를 작은 단위로 분해하고 패턴화해서 추출하며 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의 해야함

프로그래밍 언어

  • 기계어로 직접 명령을 전달하는 것을 대신할 가장 유용한 대안 => 사람이 이해할 수 있는 약속된 구문(syntax)으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한 후, 컴퓨터가 이해할 수 있는 기계어로 변환하는 일정의 번역기를 이용하는 것

    • 컴파일러compiler or 인터프리터interpreter

  • 프로그래밍 언어 = 구문(syntax) + 의미(semantics)

구문과 의미

  • 문법(syntax)에 맞는 문장을 구성하는 것은 물론 의미(semantics) 를 가지고 있어야 언어의 역할을 충실히 수행할 수 있음

  • 요구사항이 실현(문제가 해결)되어야 의미가 있음

  • 문제 => (문제 해결 능력) => 해결방안 => (문법/의미) => 코드

  • 프로그래밍의 목적은 문제 해결

2장 자바스크립트란?

... 이제 자바스크립트는 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있음 ...

자바스크립트의 탄생

  • 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입 => 브렌던 아이크가 개발한 자바스크립트

자바스크립트의 표준화

  • 자바스크립트의 파생 버전인 JScript와의 크로스 브라우징 이슈로 인해 표준화된 자바스크립트의 필요성이 대두

  • ECMA 인터내셔널에 자바스크립트의 표준화를 요청 => ECMAScript로 명명

자바스크립트 성장의 역사

  • 초창기 자바스크립트

    • 웹페이지의 보조적인 기능을 수행하기 위한 한정적인 용도로 사용

    • 서버로부터 전달받은 HTML과 CSS를 단순 렌더링 하는 수준

  • Ajax

    • 자바스크립트를 이용해 서버와 브라우저가 비동기방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax(Asynchronous JavaScript and XML)가 XMLHttpRequest라는 이름으로 등장

    • 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고 서버로 부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식

  • jQuery

    • DOM(Document Object Model)을 더욱 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈도 어느정도 해결

  • V8 자바스크립트 엔진

    • V8 엔진의 등장으로 데스크톱 애플리케이션과 유사한 사용자 경험(UX)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착

    • 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동, 프런트엔드 영역이 주목받는 계기로 작용

  • Node.js

    • V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경

    • 자바스크립트 엔진을 브라우저에서 독립시긴 자바스크립트 실행 환경

    • 비동기I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋음

    • 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합

    • 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 프로그래밍 언어가 됨

  • SAP 프레임워크

    • 모던 웹 어플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고 개발 규모와 복잡도도 상승

    • 따라서 CBD(Component based developmet) 방법론을 기반으로하는 SPA가 대중화 되면서 React, Vue.js, Angular, Svelte 등 등장

자바스크립트와 ECMAScript

  • 자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대(core)를 이루는 ECMAScript와 브라우저가 별도로 지원하는 클라이언트 사이드 Web API(DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker)를 아우르는 개념

  • 자바스크립트는 일반적으로 ECMAScript를 아우르는 개념

  • 클라이언트 사이드 Web API는 웹 콘소시엄에서 별도의 사양으로 관리

자바스크립트의 특징

  • 웹 브라우저에서 동작하는 유일한 프로그래밍 언어

  • 인터프리터interpreter 언어

  • 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결 => 인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신코드를 생성하고 최적화함

  • 자바스크립트는 명령형imperative, 함수형functional, 프로토타입 기반prototype-based 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어

3장 자바스크립트 개발 환경과 실행 방법

자바스크립트 실행 환경

  1. 웹 브라우저 : 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장(렌더링 목적, 클라이언트 사이드 Web API 제공)

  2. Node.js : Node.js도 자바스크립트 엔진을 내장(브라우저 외부에서 JS 실행 환경 제공 목적)

Node.js와 npm

  • npm : 자바스크립트 패키지 매니저로 Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공

  • Node.js REPL(Read Eval Print Loop) : 간단한 자바스크립트 코드를 실행해 결과를 확인해 볼 수 있음(명령어 -> $ node)

4장 변수

변수variable는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

변수란?

  • 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념

  • 컴퓨터는 메모리를 사용해 데이터를 기억하고 메모리 셀의 크기 즉, 1바이트 단위로 데이터를 저장하거나 읽어옴

  • 값을 저장하고 참조하는 매커니즘으로, 값의 위치를 가리키는 상징적인 이름

  • 할당(대입, 저장) : 변수에 값을 저장

  • 참조 : 변수에 저장된 값을 읽어 들이는 것

식별자

  • 식별자 === 변수, 함수, 클래스 등의 이름

  • 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름

  • 식별자는 값이 아니라 메모리 주소를 기억

변수 선언

  • 변수 선언declaration이란 변수를 생성하는 것

  • 변수를 사용하려면 반드시 선언이 필요

  • 키워드 : var, let, const

  • var 키워드 단점 => 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원함. 의도치 않게 전역 변수가 선언될 수 있음

  • var 키워드 변수 선언 후 값이 할당 되지 않은 메모리 공간에는 undefined 값이 암묵적으로 할당되어 초기화 => 자바스크립트의 독특한 특징

  • 식별자(변수 이름)는 실행 컨텍스트에 등록

변수 선언의 실행 시점과 변수 호이스팅

  • 변수 선언의 실행 시점 : 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행

  • 변수 호이스팅 : 선언하는 모든 식별자(var,let,const,function,class)가 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

값의 할당

  • 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행

값의 재할당

  • 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수 => 단 한번 할당할 수 있는 변수(const 키워드)

  • 가비지 콜렉터 : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제 하는 기능. 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어 로서 메모리 누수를 방지

  • 매니지드 언어 : 메모리의 할당 및 해제를 위한 메모리 관리 기능을 언어 차원에서 담당. 어느 정도 일정한 생산성을 확보 할 수 있다는 장점이 있지만 성능 면에서 어느 정도의 손실은 감수

식별자 네이밍 규칙

  • 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있음

  • 단, 식별자는 숫자로 시작하는 것은 허용하지 않음

  • 예약어는 식별자로 사용할 수 없음

  • 예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어

  • 자바스크립트는 대소문자를 구분

  • 네이밍 컨벤션 : 자바스크립트에서는 변수나 함수의 이름에는 카멜 케이스를 사용하고, 생성자 함수, 클래스 이름에는 파스칼 케이스를 사용(ECMAScript사양에 정의되어 있는 객체와 함수들도 카멜 케이스와 파스칼 케이스를 사용)

5장 표현식과 문

값 value

  • 값 : 식expression이 평가evaluate되어 생성된 결과

리터럴 literal

  • 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법notation을 말함

  • 즉, 값을 생성하기 위해 미리 약속한 표기법

표현식 expression

  • 표현식 : 값으로 평가될 수 있는 문statement, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조함

  • 리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이뤄질 수 있음

  • 값으로 평가될 수 있는 문은 모두 표현식

문 statement === 명령문

  • 문 : 프로그램을 구성하는 기본 단위이자 최소 실행 단위 문의 집합으로 이뤄진 것이 프로그램이며 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍

  • 토큰token : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미 (키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등)

세미콜론과 세미콜론 자동 삽입 기능

  • 세미콜론(;) : 문의 종료를 나타냄

  • 단, 중괄호({...})로 묶은 코드 블록 뒤에는 세미콜론을 붙이지 않음(자체종결성)

  • 세미콜론 자동 삽입 기능(ASI) : 자바스크립트 엔진이 소스코드를 해석할 때 세미콜론을 자동으로 붙여줌

표현식인 문과 표현식이 아닌 문

  • 표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있음

  • 가장 간단하고 명료한 방법은 변수에 할당해 보는 것

6장 데이터 타입

데이터 타입 === 값의 종류

  • 원시 타입

    • 숫자number : 정수와 실수 구분없이 하나의 숫자 타입만 존재

    • 문자열string

    • boolean

    • undefined : var 키워드로 선언된 변수에 암묵적으로 할당되는 값

    • null : 값이 없다는 것을 의도적으로 명시할 때 사용하는 값

    • symbol : ES6에서 추가된 7번째 타입

  • 객체 타입

    • 객체, 함수, 배열 등

숫자 타입

  • ECMAScript 사양에 따르면 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따름.

  • 즉, 모든 수를 실수로 처리하며 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않음

  • 자바스크립트는 2진수 8진수 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이들 값을 참조하면 모두 10진수로 해석

  • 추가적인 세 가지 특별한 값

    • Infinity : 양의 무한대

    • -Infinity : 음의 무한대

    • NaN(Not-a-Number) : 산술 연산 불가

문자열 타입

  • 0개 이상의 16비트 유니코드 문자(UTF-160)의 집합으로 전 세계 대부분의 문자를 표현

  • 작은따옴표, 큰따옴표, 백틱(ES6)

  • 자바스크립트의 문자열은 객체나 배열이 아닌 원시 타입이며 변경 불가능한immutable 값

템플릿 리터럴

  • ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입 (백틱``)

  • 멀티라인 문자열multi-line string

    • 일반 문자열 내에서는 줄바꿈 등의 공백을 표현하려면 백슬래시로 시작하는 이스케이프 시퀀스를 사용해야함(ex \n)

    • 템플릿 리터럴 내에서는 줄바꿈이 허용되며 모든 공백도 있는 그대로 적용됨

  • 표현식 삽입expression interpolation

    • ${}으로 표현식을 감싸서 사용

    • 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입

  • 태그드 탬플릿tagged template

  • 템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리

불리언 타입

  • 논리적 참, 거짓을 나타내는 true와 false

undefined 타입

  • var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화

  • 변수를 참조했을 때 undefined가 반환된다면 해당 변수가 선언 이후 값이 할당된 적이 없는 즉, 초기화되지 않은 변수라는 것을 간파 할 수 있음

null 타입

  • null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재)할 때 사용

  • 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미

  • 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 함

symbol 타입

  • ES6에서 추가된 7번째 타입으로 다른 값과 중복되지 않는 유일무이한 값

  • 따라서 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용

  • Symbol함수를 호출해 생성

  • (33장에서 추가 설명)

객체 타입

  • 자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체

  • 원시 타입 이외의 값은 모두 객체 타입

데이터 타입의 필요성

  1. 데이터 타입에 의한 메모리 공간의 확보와 참조

    • 몇 바이트의 메모리 공간을 사용해야 낭비와 손실 없이 값을 저장할 수 있는지를 알아야 함

    • 자바스크립트 엔진은 데이터 타입, 즉 값의 종류에 따라 정해진 크기의 메모리 공간을 확보함

    • 심벌 테이블 : 컴파일러 또는 인터프리터는 심벌 테이블이라고 부르는 자료구조를 통해 식별자를 키로 바인딩된 값의 메모리 주소, 데이터 타입, 스코프 등을 관리함

  2. 테이터 타입에 의한 값의 해석

    • 모든 값은 데이터 타입을 가지며 메모리에 2진수, 즉 비트의 나열로 저장됨

    • 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있음(숫자로 또는 문자로 해석하는지에 따라 값이 달라짐)

  • 값을 저장할 때 확부해야하는 메모리 공간의 크기를 결정하기 위해

  • 값을 참조할 때 한 번에 읽어들여야 할 메모리 공간의 크기를 결정하기 위해

  • 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

동적 타이핑dynamic typing

  • 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)

  • 또한 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있음 === 동적 타이핑

  • 자바스크립트는 동적 타입 언어(ex 파이썬, PHP, 루비, 리스프, 펄 등)

  • 변수는 타입을 갖지 않지만 값은 타입을 가짐 따라서 변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정됨

  • 동적 타입 언어의 단점

    • 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환 되기도 함(잘못된 예측)

    • 유연성은 높지만 신뢰성은 떨어짐

주의 사항

  • 변수는 꼭 필요한 경우에 한해 제한적으로 사용

  • 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제

  • 전역 변수는 최대한 사용하지 않도록 함

  • 변수보다는 상수를 사용해 값의 변경을 억제 함

  • 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍

7장 연산자

산술 연산자

  • 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만듬

  • 산술 연산이 불가능한 경우 NaN를 반환

  • +연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연산자로 동작함

  • boolean타입은 엔진에 의해 암묵적 타입 변환 또는 타입 강제 변환이 일어나 1 또는 0으로 변환.

할당 연산자

  • 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당

  • 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가됨

비교 연산자

  • 좌항과 우항의 피연산자를 비교한 다음 그 결과를 boolean 값으로 반환

  • 동등 비교 연산자(==) : 값만을 비교(암묵적 타입 변환을 통해 타입을 일치시킨 후 비교)

  • 일치 비교 연산자(===) : 값과 타입을 모두 비교

    • NaN : 자신과 일치하지 않는 유일한 값 NaN인지 조사하려면 number.isNaN을 사용

    • +0, -0 : 동일한 값으로 취급, 확실히 하기 위해서는 Object.is를 사용

삼항 조건 연산자

  • 조건식 ? 조건식이 true일 때 return값 : 조건식이 false일 때 return값

  • if ...else 문은 표현식이 아닌 문이므로 값처럼 사용할 수 없음

  • 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문

논리 연산자

  • 논리합(OR) ||

  • 논리곱(AND) &&

  • 부정(NOT) ! : 언제나 boolean값을 반환하지만 피연산자가 반드시 boolean값일 필요는 없음, 암묵적 타입 변환

typeof 연산자

  • 피연산자의 데이터 타입을 문자열로 반환

  • null값을 연산해보면 null이 아닌 object를 반환(버그)

  • 선언하지 않은 식별자를 연산하면 ReferenceError가 아닌 undefined를 반환

지수 연산자

  • ES7에서 도입된 지수연산자는 좌항의 피연산자를 밑으로 우항의 피연산자를 지수로 거듭제곱하여 숫자값을 반환(**)

  • 지수 연산자는 이항 연산자 중에서 우선순위가 가장 높음

8장 제어문

조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용

블록문

  • 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 함({})

  • 자바스크립트는 블록문을 하나의 실행 단위로 취급

조건문conditional statement

  • 주어진 조건식의 평가 결과에 따라 블록문의 실행을 결정

  • 조건식 === boolean 값으로 평가될 수 있는 표현식

    if ... else 문

    if (조건식1) {
  // 조건식1 true
} else if (조건식2) {
  // 조건식2 ture
} else {
  // 조건식1,2 false
}

    • 조건식이 boolean이 아닌 값으로 평가되면 엔진에 의해 암묵적으로 타입 변환이 일어남

    • 조건에 따라 단순히 값을 결정하여 변수에 할당하는 경우 삼항 조건 연산자를 사용하는 편이 가독성이 좋음

    switch 문

    switch (표현식) {
  case 표현식1:
    표현식 === 표현식1 true;
    break;
  case 표현식2:
    표현식 === 표현식2 true;
    break;
  default:
    일치하는 case문이 없을 때 실행;
}

    • 폴스루fall through : break문을 생략하여 다음 case문으로 넘어가는 것

    • switch 문보다 if ... else 문을 사용하는 편이 좋음

    • 다만, 조건이 많아서 가독성이 더 좋다면 switch 문을 사용

반복문

  • 조건식의 평가 결과가 참인 경우 블록문을 실행, 그 후 조건식을 다시 평가하여 조건식이 거짓일 때까지 반복

  • 반복문을 대체할 수 있는 기능 : forEach, for...in, for...of

    for 문

    for (변수 선언 또는 할당문; 조건식; 증감식) {
  // 조건식이 참인 경우 실행;
}

    • 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행

    • 어떠한 식도 선언하지 않으면 무한루프

    while 문

    while (조건식) {
  // 조건식이 참인 경우 실행;
}

    • 주어진 조건식의 평가 결과가 참이면 블록문을 계속해서 반복 실행

    • 주로 반복 횟수가 불명확할 때 사용

    • 조건문의 평가 결과가 거짓이 되면 블록문을 실행하지 않고 종료

    • 평가 결과가 언제나 참이면 무한루프

    do ... while 문

    do {
  // 맨 처음 한번과 조건식이 참인 경우 실행;
} while (조건식);

    • 블록문을 먼저 실행하고 조건식을 평가, 따라서 무조건 한 번 이상 실행

break 문

  • 레이블 문, 반복문 또는 switch 문의 코드 블록을 탈출

  • 이 외에 break문을 사용하면 문법에러SyntaxError가 발생

continue 문

  • 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동 시킴

9장 타입 변환과 단축 평가

타입 변환이란?

  • 명시적 타입 변환 or 타입 캐스팅 : 개발자가 의도적으로 값의 타입을 변환하는 것

  • 암묵적 타입 변환 or 타입 강제 변환 : 개발자의 의도와 상관없이 표현식을 평가하는 도중에 엔진에 의해 암묵적으로 타입이 자동 변환 되는 것

  • 타입 변환은 기존 원시 값을 직접 변경하는 것은 아님, 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것

  • 자신이 작성한 코드에서 암묵적 타입 변환이 발생하는지, 발생한다면 어떤 타입의 어떤 값으로 변환되는지, 그리고 타입 변환된 값으로 표현식이 어떻게 평가될 것인지 예측 가능해야함

암묵적 타입 변환

  • 자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환 할 때가 있음

  • 문자열, 숫자, boolean과 같은 원시 타입 중 하나로 타입을 자동 변환

    문자열 타입으로 변환

    • 문자열 연결 연산자(+) 의 모든 피연산자는 코드의 문맥상 모두 문자열이어야 하기 때문에 하나 이상이 문자열이면 모두 문자열로 암묵적 타입 변환 0 + "" => "0"

    숫자 타입으로 변환

    • 산술 연산자 의 역할은 숫자 값을 만드는 것, 따라서 산술 연산자의 모든 피연산자는 코드 문맥상 숫자 타입이어야함

    • 숫자 타입으로 변환할 수 없는 경우 표현식의 평가 결과는 NaN이 됨

    • 비교 연산자 의 역할은 boolean값을 만드는 것, 따라서 비교 연산자의 모든 피연산자는 코드 문맥상 숫자 타입이어야함

    • + 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행

    boolean 타입으로 변환

    • 제어문 또는 삼항 조건 연산자의 조건식은 논리적 참/거짓으로 평가되어야 하는 표현식으로 자바스크립트 엔진은 조건식의 평가 결과를 암묵적 타입 변환 함

    • 자바스크립트 엔진은 boolean 타입이 아닌 값을 Truthy값(참으로 평가되는 값) 또는 Falsy값(거짓으로 평가되는 값)으로 구분

      • Falsy 값 : false, undefined, null, 0, -0, NaN, ""(빈 문자열)

명시적 타입 변환

  • 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법

  • 빌트인 메서드를 사용하는 방법

  • 암묵적 타입 변환을 이용하는 방법

    문자열 타입으로 변환

    • String() 호출

    • Object.prototype.toString() 이용

    • 문자열 연결 연산자(+) 이용

    숫자 타입으로 변환

    • Number() 호출

    • parseInt(), parseFloat() 이용(문자열만)

    • 단항 산술 연산자(+) 또는 산술 연산자(*1) 이용

    boolean 타입으로 변환

    • Boolean() 호출

    • 부정 논리 연산자(!) 두 번 사용(!!)

단축 평가

논리 연산자를 사용한 단축 평가

  • 논리합(||)또는 논리곱(&&) 연산자 표현식의 평가 결과는 boolean값이 아닐 수도 있음

  • 논리합(||)또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨

"Cat" && "Dog" // => "Dog"
// 논리 연산의 결과를 결정하는 두번째 피연산자, 즉 "Dog"를 그대로 반환

"Cat" || "Dog" // => "Cat"
// 논리 연산의 결과를 결정하는 첫번째 피연선자, 즉 "Cat"을 그대로 반환

  • 논리합(||)과 논리곱(&&) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환 => 단축 평가

  • 즉 단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것

  • 단축 평가를 사용하면 if문을 대체할 수 있음

var done = true;
message = done && "완료";
or
var done = falsel
message = done || "미완료";

  • 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

var elem = null;

var value = elem.value; // TypeError
or
var value = elem && elem.value; // null

  • 함수 매개변수에 기본값을 설정할 때

function getStringLength(str) {
  str = str || "";
  return str.length;
}

옵셔널 체이닝 연산자

  • ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어감

  • 이 때 좌항 피연산자가 false로 평가되는 Falsy값(false, undefined, null, 0, -0, NaN, "")이라도 null또는 undefined가 아니면 우항의 프로퍼티 참조를 이어감

var elem = null;

var value = elem?.value; // undefined

null 병합 연산자

  • ES11(ECMAScript2020)에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환

  • 변수에 기본값을 설정할 때 유용

  • 좌항 피연산자가 false로 평가되는 Falsy값(false, undefined, null, 0, -0, NaN, "")이라도 null또는 undefined가 아니면 좌항의 피연산자를 그대로 반환

var foo = null ?? "default string"; // default string
var foo = "" ?? "default string"; // ""

10장 객체 리터럴

객체란?

  • 자바스크립트는 객체 기반의 프로그래밍 언어이며, 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체

  • 원시 타입의 값, 즉 원시 값은 변경 불가능한(immutable) 값이지만 객체 타입의 값, 즉 객체는 변경 가능한(mutable) 값

  • 객체는 0개 이상의 프로퍼티로 구성된 집합이며 프로퍼티는 key와 value로 구성

  • 프로퍼티 : 객체의 상태를 나타내는 값(data)

  • 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)

객체 리터럴에 의한 객체 생성

  • 자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원

    • 객체 리터럴 : {...}

    • Object 생성자 함수

    • 생성자 함수

    • Object.create 메서드

    • 클래스(ES6)

프로퍼티

  • 객체는 프로퍼티의 집합이며, 프로퍼티는 key와 value로 구성

    • 프로퍼티 key : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값

    • 프로퍼티 value : 자바스크립트에서 사용할 수 있는 모든 값

  • 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용

  • 프로퍼티 key에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 됨

  • 프로퍼티 key르 중복 선언하면 나중에 선언한 프로퍼티가 덮어씀, 에러가 발생하지 않는다는 점 주의

메서드

  • 자바스크립트의 함수는 객체(일급 객체)

  • 따라서 함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용

  • 일반 함수와 구분하기 위해 메서드라 부름

프로퍼티 접근

  • 마침표 표기법 : 마침표 프로퍼티 접근 연산자(.) 사용

  • 대괄호 표기법 : 대괄호 프로퍼티 접근 연산자([...]) 사용

    • 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열

  • 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환(ReferenceError발생안함)

프로퍼티 값 갱신

  • 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신

프로퍼티 동적 생성

  • 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당

프로퍼티 삭제

  • delete 연산자는 객체의 프로퍼티를 삭제

  • 이때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야함(아니라면 에러없이 무시됨)

delete person.age;

ES6에서 추가된 객체 리터럴의 확장 기능

  • 프로퍼티 축약 표현 : 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있음(키 === 변수이름으로 자동생성)

  • 계산된 프로퍼티 이름 : 문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성(단, 키로 사용할 표현식을 대괄호로 묶어야함)

  • 메서드 축약 표현

    // ES5
var obj = {
  name: "Lee",
  sayHi: function() {
    console.log("Hi!" + this.name);
  }
}

// ES6
var obj = {
  name: "Lee",
  sayHi() {
    console.log("Hi!" + this.name);
  }
}
Previous모던 자바스크립트 Deep DiveNext모던 자바스크립트 Deep Dive 2

Last updated