모던 자바스크립트 Deep Dive(1~10)

심채운·2024년 1월 7일

독서

목록 보기

1/9

1장 프로그래밍

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다..
- 필요한 것들로는 컴퓨팅 사고이다.
  - ex) 사람은 소리의 크기를 "크다", "작다"로 표현하지만 컴퓨터는 "볼륨을 60으로 조정하라"라는 명령을 해야 알아듣는다.
  - 이처럼 컴퓨터의 관점에서 문제를 사고해야 하며, 작은 단위로 분해하고 패턴화해서 추출하고, 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야함
- 즉 프로그래밍이란 쉽게 말하자면 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이고, 그 결과물이 바로 코드이다.
명령을 수행할 주체는 컴퓨터이며, 사람이 이해할 수 있는 자연어가 아니라 컴퓨터가 이해할 수 있는 언어로 전달해야 한다. 그것이 기계어이다.
- 기계어를 직접 전달하는 것을 대신하는 것은 바로 "사람이 이해할 수 있는 약속된 구문(syntax)로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기를 이용하는 방법이다. 이 번역기를 우린 컴파일러 혹은 인터프리터라고 한다.
- 언어는 자연어와 인공어로 구분된다. 프로그래밍 언어란 사람과 컴퓨터(컴파일러 또는 인터프리터) 모두가 이해할 수 있는 약속된 형태의 인공어이다.
프로그래밍언어는 구문(syntax)과 의미(sementic)의 조합으로 표현된다.
- 문법에 맞는 문장을 구성하는 것은 물론 의미를 가지고 있어야 언어의 역할을 충실히 수행할 수 있다.
- 문제 해결 능력을 통해 만들어낸 해결 방안은 프로그래밍 언어의 문법을 사용해 표현한다. 작성된 코드는 해결 방안의 구체적 구현물이다. 또한 문법에 부합하는 것은 물론이고 수행하고자 하는 바를 정확히 수행하는것, 즉 요구사항이 실현(문제가 해결)되어야 의미가 있다.
  - 문제 ->문제 해결 능력 -> 해결 방안 -> 문법/의미 -> 코드
- 결국 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이다.

2장 자바스크립트란?

자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어이다.(넷스케이프 커뮤니케이션즈)
자바스크립트의 파생 버전인 JScript를 익스플로어에 탑재했다.(마이크로소프트)
두 회사는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 추가했다.
- 그러다보니 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생했다.
- 이에 크로스 브라우징 이슈를 해결하기 위해 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터네셔널에 자바스크립트의 표준화를 요청했다.

자바스크립트로 인해 생겨난 것들

초창기 자바스크립트는 단지 웹페이지의 보조적인 기능을 수행하기 위한 용도 뿐이였다. 대부분의 로직은 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML,CSS를 단순히 렌더링 하는 수준이였다.

Ajax(Asynchronous Javascript and XML)

서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpRequest라는 이름으로 등장.
기존은 html로 시작해 html로 끝나는 코드를 서버로 부터 전송 받는 방식이였다. 그러다 보니 화면이 전환되면 순간적으로 깜박이는 현상이 발생하고, 코드를 서버로부터 다시 전송받기 때문에 불필요한 데이터 통신이 발생했다.
Ajax의 등장 이후로는 웹페이지에서 변경할 필요가 없는 부분은 리렌더링을 하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링 하는 방식이 가능해졌다.
- 대표적인 예가 구글 맵스이다.

jQuery

jQuery의 등장으로 DOM을 더욱 쉽게 제어할 수 있게 되었고, 크로스 브라우징 이슈도 어느정도 해결이 되었다.

V8 자바스크립트 엔진

구글 맵스를 통해 웹 애플리케이션 프로그래밍 언어로서의 가능성이 확인되자, 자바스크립트로 웹 애플리케이션을 구축하려는 시도가 증가됨에 따라 더 빠른 자바스크립트 엔진의 필요성이 대두외었다. 2008년에 등장한 구글 V8 자바스크립트 엔진은 요구에 부합하는 빠른 성능을 선보였다. 또한 V8의 등장으로 자바스크립트는 데스크톱 애플리케이션과 유사한 UX를 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 자리하게 되었다.
V8 자바스크립트 엔진으로 과거 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 이동하게 되면서, 프론트엔드의 영역이 주목받기 시작함.

Node.js

라이언 달이 2009년 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경을 발표했다.
node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.
- 다양한 플랫폼에 적용이 가능하지만, 주로 서버 사이드 애플리케이션 개발에 사용되고, 이에 필요한 모듈, 파일시스템, HTTP등 빌트인(built-in, 내장)API를 제공한다.
node.js는 자바스크립트 엔진을 기반으로 한다. 프론트와 백 영역에서 자바스크립트를 사용할 수 있다는 동형성은 별도의 언어를 학습하기 위한 시간을 덜 수 있다는 장점이 있다. 또한 node.js는 비동기 I/O를 지원하며 단인스레드, 이벤트루프 기반으로 동작함으로써 요청 처리 성능이 좋다. 그러므로 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 일어나는 SPA에 적합하다.

SPA 프레임워크

높은 성능과 UX가 필수가 되면서 개발 규모와 복잡도가 상승해졌다. 따라서 많은 패턴과 라이브러리가 출현했고, 개발에 많은 도움을 주었지만 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처의 구축을 어렵게 했고, 필연적으로 프레임워크가 등장하게 되었다. 이러한 요구에 맞춰 Component based development 방법론을 기반으로 한 SPA가 대중화되었다.

ECMAScript

자바스크립트의 표준 사양인 ECMA-262를 말하며, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정한다. 각 브라우저 제조사는 ECMAScript 사양을 준수해 브라우저에 내장되는 자바스크립트 엔진을 구현한다.
자바스크립트는 프로그래밍 언어로서 기본 뼈대(core)를 이루는 ECMAScript와 브라우저가 별도로 지원하는 클라이언트 사이드 Web API가 있다.
Web API에는 DOM,BOM,Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등이 있다.

자바스크립트의 특징

자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.
자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
대부분의 자바스크립트 엔진은 인터프리터와 컴파일러의 장접을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결했다.
인터프리터 언어란?
- 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간코드인 바이트코드로(특정한 하드웨어가 아니라 가상 머신에서 실행하도록 만든 바이너리 코드) 변환한 후 실행한다.
- 실행 파일을 생성하지 않는다.
- 인터프리트 단계와 실행 단계가 분리되어 있지 않다. 인터프리터는 한 줄씩 바이트코드로 변환하고 즉시 실행한다.
- 코드가 실행될 때마다 인터프리트 과정이 반복 수행된다.
- 인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행되므로 코드 실행 속도가 비교적 느리다.
컴파일러 언어란?
- 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드(CPU가 바로 실행할 수 있는 기계어)로 변환한 후 실행한다.
- 실행 파일을 생성한다.
- 컴파일 단계와 실행 단계가 분리되어 있다. 명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일을 실행한다.
- 실행에 앞서 컴파일은 단 한번 수행된다.
- 컴파일과 실행 단계가 분리되어 있으므로 코드 실행 속도가 빠르다.
자바스크립트는 클래스(ES6에 도입), 상속, 정보 은닉을 위한 키워드가 없어서 객체지향 언어가 아니라고 오해하지만 자바스크립트는 프로토타입 기반의 객체지향 언어이다. 자바,C언어 들은 클래스 기반 객체지향 언어이다.
ES6를 100% 지원하지 않는다. 따라서 브라우저에서 아직 지원하지 않는 최신 기능 또는 익스플로어나 구형 브라우저를 고려해야 한다면 바벨과 트랜스파일러를 사용해 ES6의 소스코드를 ES5로 다운그레이드 해야한다.

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

브라우저와 node.js는 자바스크립트 엔진을 내장하고 있어 브라우저 환경 또는 node.js 환경에서 실행할 수 있다. 기본적으로 브라우저에서 동작하는 코드는 node.js 환경에서도 동일하게 동작한다.
브라우저와 node.js는 용도가 다르다.
- 브라우저 : HTML,CSS,자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링이 주 목적
  - ex) 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본으로 제공, 파일을 생성하고 수정할 수 있는 파일 시스템을 제공하지 않음. 클라이언트 사이드 Web API제공
- node.js : 브라우저 외부에서 자바스크립트를 실행 환경을 제공하는 것이 주 목적
  - ex) DOM API를 제공하지 않음. 파일을 생성하고 수정할 수 있는 파일 시스템을 기본 제공. ECMAScript와 node.js 고유의 API제공

웹 브라우저

구글 크롬 브라우저가 시장 점유율이 가장 높음.
개발자 도구
- elements : 로딩된 웹 페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인할 수 있음.
- console : 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log메소드의 실행 결과를 확인할 수 있음.
- sources : 로딩된 웹페이지의 자바스크립트 코드를 디버깅 할 수 있음
- network : 로딩된 웹페이지의 관련된 네트워크 요청 정보와 성능을 확인할 수 있음
- application : 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있음.

4장 변수

애플리케이션은 데이터를 다룬다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.
컴퓨터는 연산과 기억을 수행하는 부품이 나눠져 있다.
- CPU를 사용해 연산
- 메모리를 사용해 데이터를 기억
  - 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어들인다.
  - 각 셀은 고유의 메모리 주소를 갖는다. 메모리 주소는 메모리 공간의 위치를 나타낸다.
  - 컴퓨터는 모든 데이터를 2진수로 처리한다. 메모리에 저장되는 모든 값은 2진수로 저장됨.
연산 결과를 한번만 사용한다면 문제가 없지만, 만약 연산 결과를 재사용하고 싶다면 메모리 주소를 통해 연산결과를 저장된 메모리 공간에 직접 접근해야 하는데, 메모리 주소를 통해 값에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높다.
- 실수로 운영체제가 사용하고 있는 값을 변경하면 시스템을 멈추게 하는 치명적인 오류가 발생할 수 있다. 따라서 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.
- 개발자가 직접적인 메모리 제어를 허용한다 하더라도 문제가 있다. 값이 저장될 메모리 주소는 코드가 실행될 때 메모리의 상황에 따라 임의로 결정되며, 동일한 컴퓨터에서 동일한 코드를 실행해도 코드가 실행될 때마다 값이 저장될 메모리 주소는 변경된다.
그래서 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공한다.

즉 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.
값의 위치를 가리키는 상징적인 이름이고, 상징적 이름인 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 접근할 수 있다.
- 변수는 여러개의 값을 저장하려면 여러개의 변수를 사용해야 한다.
  - ex) 배열이나 객체 같은 자료구조를 사용하면 관련이 있는 여러 개의 값을 그룹화해서 하나의 값처럼 사용할 수 있다.
  - var user = {id:1, name:'Sim'}
  - var user = [{id:1, name:"Sim"}, {id:2, name:"Chu"}]
메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름이 하고, 변수에 저장된 값을 변수 값이라 한다.
변수에 값을 저장하는 것을 할당이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라 한다.
변수 이름을 사용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환한다.
사람이 이해할 수 있는 언어로 명명한 변수 이름을 통해 변수에 저장된 값의 의미를 명확하게 할 수 있다. 따라서 변수에 저장된 값의 의미를 파악할 수 있는 변수 이름은 가독성을 높이는 효과가 있다.

식별자

변수 이름을 식별자라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다. 따라서 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 식별자로 값을 구변해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미다. 즉 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.
식별자는 변수 이름에만 사용하지 않고, 함수, 클래스 등에도 사용한다. 즉 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라 부른다.
변수,함수,클래스 등의 이름과 같은 식별자는 네이밍 규칙에 따라야 하며, 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

변수 선언

변수 선언이란 변수를 생성하는 것을 의미. 좀 더 자세히 말하자면 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것.
변수 선언에 의해 확보된 메모리 곤간은 확보가 해제되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수 있다.
변수를 사용하려면 선언이 필요하고, 선언할 때는 var,let,const 키워드를 사용해한다.
var score // 변수 선언문 이처럼 변수를 선언한 이후, 아직 변수에 값을 할당하지 않으면, 변수 선언에 의해 확보된 메모리 공간은 비어 있을 것이라 생각할 수 있지만, 확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화 한다.
자바스크립트 엔즌은 변수 선언을 2단계에 거쳐 수행한다.
1. 선언 단계 : 변수 이름을 등록해 자바스크립트 엔진에 변수의 존재를 알린다.
2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 항당해 초기화 한다.

변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다. 실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 자바스크립트 엔진은실행 컨텍스트를 통해 식별자와 스코프를 관리한다.
일반적으로 초기화란 변수가 선언된 이후 최초로 값을 할당하는 것을 말한다.
- 만약 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아 있을 수 있다. 이러한 값을 쓰레기 값이라고 한다.
선언하지 않은 식별자에 접근하면 ReferenceError 발생. 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러이다.

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

console.log(score);
var score;

변수 선언문 보다 변수를 참조하는 코드가 있다. 위에 말한 것처럼 자바스크립트는 인터프리터에 의해 한 줄씩 순차적으로 실행이 된다. 그러므로 console.log(score)는 참조 에러가 발생한다고 생각할 수 있지만 undefined가 출력이 된다.
- 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.
- 자바스크립트 엔진은 코드를 한 줄씩 실행되디 전에 소스코드의 평가과정을 거치면 코드를 실행하기 위한 준비를 한다. 이때 실행을 위한 준비 단계인 평가과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문들을 코드에서 찾아내 먼저 실행하고, 평가과정이 끝나면 비로소 선언문들을 제외한 코드들을 한 줄씩 순차적으로 처리하기 한다.
- 즉 자바스크립트 엔즌은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 따라서 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 어디서든지 변수를 참조할 수 있다.
변수 호이스팅이란 변수 선언문이 위로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.

값의 할당

변수에 값을 할당 할때는 할당 연사자(=)를 사용한다. 우변의 값을 좌변의 변수에 할당.
변수 선언과 값의 할당을 하나의 문으로 단축 표현해도 변수 선언과 할당의 실행 시점이 달라 2개의 문으로 나누어 각각 실행한다.
- 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.
- 따라서 단축 표현해도 변수에 undefined가 할당되어 초기화되는 것은 변함이 없다. 또한 변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 할당 값을 새롭게 저장하는 것이 아닌 새로운 메모리 공간을 확보하고 그곳에 할당 값을 저장한다는 점을 주의.
재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 의미.
- 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수라 한다. 상수는 단 한 번만 할당할 수 있는 변수다.
최초로 변수를 선언하면 undefined로 초기화되어 메모리를 사요하고, 할당을 하면 다른 메모리 공간을 사용한다, 재할당을 하면 할당한 메모리 공간을 덮어씌우는것이 아닌 또 다른 메모리 공간을 사용하게 된다. undefined와 할당한 메모리 공간은 더이상 사용하지 않으니 이러한 불표한 값들은 가비지콜렉터에 의해 메모리에서 자동으로 해제된다.

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

프로그래밍 언어는 메모리 관리 방식에 따라 매니지드 언어와 언매니지드 언어로 분류 한다.
언매니지드 언어는 메모리 제어를 개발자가 주도할 수 있으므로 개발자의 역량에 따라 최적의 성능을 확보할 수 있지만 반대의 경우 치명적 오류를 생산할 가능성이 있음 ex) C언어
매니지드 언어는 개발자의 역량에 의존하는 부분이 상대적으로 작아져 어느정도 일정한 생산성을 확보할 수 있다는 장점이 있지만 성능 면에서는 어느 정도의 손실이 날 수 밖에 없다. ex) JS

식별자 네이밍 규칙

식별자는 특수문자를 제외한 문자, 숫자, _, $를 포함할 수 있다.
단, 식별자는 특수문자를 제외한 문자, _,$로 시작해야한다. 숫자로 시작하는 것은 허용안된다.
예약어는 식별자로 사용할 수 없다.
- ex) await, breake, class, const, extends, if, new ... 등
네이밍 컨벤션은 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙이다.
- 카멜케이스 : firstName
- 스네이크케이스 : first_name
- 파스칼케이스: FirstName
- 헝가리언케이스 : strFirstName (type + identifier)
- js에서는 변수나 함수는 카멜케이스 사용, 생성자 함수, 클래스의 이름은 파스칼케이스를 사용한다.

5장 표현식과 문

값은 식(표현식)이 평가되어 생성된 결과를 말한다.
평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.
모든 값은 데이터 타입을 가지고 있다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석이 된다. ex) 0100 0001을 숫자로 해석하면 65, 문자로 해석하면 'A'

리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 의미한다.
정수리터럴, 부동소수점리터럴, 2진수 리터럴, 8진수 리터럴(0o로 시작), 16진수 리터럴(0x로 시작), 문자열 리터럴, 불리언 리터럴, null 리터럴, undefined 리터럴, 객체 리터럴, 배열 리터럴, 함수 리터럴, 정규 표현식 리터럴(/[A-Z]+/g)이 있다.

표현식

표현식은 값으로 평가될 수 있는 문이다. 즉 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. 위의 리터럴은 값으로 평가되어 리터럴도 표현식이다.
즉 값으로 평가될 수 있는 문은 모두 표현식이다.
표현식과 표현식이 평가된 값은 동등한 관계를 동치라 한다. ex) 1+2는 평가되어 값3을 생성하므로 1+2와 3은 동치다.

문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다. 문의 집합으로 이뤄진 것이 바로 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다.
문은 여러 토큰으로 구성되며, 토큰이란 문법적인 의미를 가진다. 즉 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.
문을 명령문이라고도 부른다. 즉 문은 컴퓨터에 내리는 명령이다.
선언문, 할당문, 조건문, 반복문 등 문이 실행되면 명령이 실행되고 무슨 일인가가 일어나게 된다.
세미콜론(;)은 문의 종료를 나타낸다
자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI, automatic semicolon insertion)이 암묵적으로 수행된다.

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

변수 선언문 ex) var x;는 값으로 평가될 수 없으므로 표현식이 아니다. 반대로 값으로 평가될 수 있는 문이면 표현식이다.
값은 표현식이 평가되어 생성된 결과.
표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단한 방법은 변수에 할당해 보는 것이다.
크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 undefined를 출력한다. 이를 완료 값이라 하며, 완료 값은 표현식의 평가 결과가 아니다. 따라서 다른 값과 같이 변수에 할당할 수 없고 참조할 수도 없다.

6장 데이터 타입

데이터 타입은 값의 종류를 말한다.
js는 7개의 타입을 제공하고 원시타입, 객체타입으로 분류된다.
- 원시타입 : 숫자,문자열,불리언,undefined, null,symbol
- 객체타입 : 객체, 함수, 배열 등
개발자는 명확한 의도를 가지고 타입을 구별해 값을 생성하고, 자바스크립트 엔진은 타입을 구별해서 값을 취급함.

number

모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입
2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 값들을 참조하면 모두 10진수로 해석이된다.
숫자 타입은 세 가지 특별한 값도 표현할 수 있다.
- console.log(10/0) // Infinity
- console.log(10/-0) // -Infinity
- console.log(1*'String') // NaN
  - js는 대소문자를 구별하므로 NaN을 제외한 다르게 표현하면 식별자로 해석해 에러가 발생한다.

string

원시 타입이며, 변경 불간으한 값이다.
문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.
작은 따옴표(''), 큰 따옴표(""), 백 틱(``)으로 텍스트를 감싼다.
다른 타입의 값과 달리 문자열을 따옴표로 감싸는 이유는 키워드나 식별자 같은 토큰과 구분하기 위해서이다. 감싸지 않으면 자바스크립트 엔진은 키워드나 식별자 같은 토큰으로 인식한다.
따옴표로 문자열을 감싸지 않는다면 스페이스와 같은 공백 문자도 포함시킬 수 없다.

템플릿 리터럴

ES6부터 백틱을 사용해 새로운 문자열 표기법이 도입되었다.
일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않았지만, 템플릿 리터럴은 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용이 된다.
일반 문자열 내에서 줄바꿈을 할려면 백슬래시()로 시작하는 이스케이프 시퀀스를 사용해야한다.

표현식 삽입

문자열은 문자열 연산자 +를 사용해 연결할 수 있다. + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.
- ex) console.log('My name is' + first + '' + last + '.');
ES6 표현식 삽입을 사용할려면 ${}로 감싸야한다.
- ex) `` console.log(My name is ${firrst} ${last}.`)

boolean

논리적 참, 거짓을 나타낸다. true, false

undefined

undefined가 유일하다.
개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화 할때 사용하는 값이다. 변수를 참조했을때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는, 즉 초기화되지 않은 변수라는 것을 간파할 수 있다.

null

null이 유일하며, 대소문자 구분 필수
변수에 값이 없다는 것을 의도적으로 명시할때 사용한다. 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미다.
함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.

symbol

ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시타입의 값이다.
심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.
심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성한다. 이때 생성된 심벌 값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다.

객체타입

위의 6가지 데이터 타입 이외의 값은 모두 객체 타입이다. 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.

데이터 타입의 필요성

자바스크립트 엔진은 데이터 타입, 즉 값의 종류에 따라 정해진 크기의 메모리 공간을 확보한다.
변수에 할당되는 값은 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정이 된다.
데이터 타입이 필요한 이유는 다음 세가지 이다.
1. 값을 저장할 때 확보해야 한느 메모리 공간의 크기를 결정하기 위해
2. 값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
3. 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정을 위해

동적 타이핑

정적 타입 언어 : C, Java 같이 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언이라 한다. 정적 타입 언어는 변수의 타입을 변결할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당할 수 있다. 컴파일 시점에 타입체크를 수행한다. 타입체크를 통과하지 못했다면 에러를 발생시키고 프로그램의 실행을 막는다.
- 장점 : 타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현을 통해 런타임에 발생하는 에러를 줄인다.
js는 변수를 선언할 때 타입을 선언하지 않는다. 어떠한 데이터 타입의 값이라도 자유롭게 할당 할 수 있다.
js의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다.
동적 타입 언어로는 자바스크립트, 파이썬, PHP, 루비, 리스프, 펄 등이 있다.
- 단점 : 언제든지 변경될 수 있기에 복잡한 프로그램에서 변화하는 변수 값을 추적하기 어려움. 또한 값의 변경에 의해 타입도 언제든지 변경될 수 있다. 유연성은 높지만 신뢰성은 떨이지는 편.

7장 연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 연산의 대상을 피연산자라 하며, 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

산술 연산자

산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다.
이항 산술 연산자

이항 산술 연산자	의미	부수효과
+	덧셈	없음
-	뺄셈	없음
*	곱셈	없음
/	나눗셈	없음
%	나머지	없음

단항 산술 연산자

단항 산술 연산자	의미	부수효과
++	증가	있음
--	감소	있음
+	어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.	없음
-	양수를 음수로, 음수를 양수로 반전한 값을 반환한다.	없음

증가/감소(++/--) 연산자는 위치에 의미가 있다.
- 피연산자 앞에 위치한 전위 증가/감소 연산자는 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.
- 피연산자 뒤에 위치한 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후, 피연산자의 ㄱ밧을 증가/감소시킨다.
문자열 연결 연산자
- - 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.
개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환 또는 타입 강제 변환 이라고 한다.

할당 연산자

=,+=,-=,*=,/=,%= 등이 있다.
- ex) x += 5 ==> x = x+5

비교 연산자

비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 결과를 불리언 값으로 반환한다.
동등 비교 연산자는 느슨한 비교 ex) == (값만 봄)
일치 비교 연산자는 엄격한 비교 ex) === (타입도 봄)
동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
일치 비교 연산자에서 주의할 것은 NaN이다. NaN === NaN -> false이다. 유일하게 자신과 일치하지 않는 값이다.

삼항 조건 연산자

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if...else문은 값처럼 사용할 수 없다. if...else문은 표현식이 아닌 문이기 때문이다.
삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.

논리 연산자

논리 연산자	의미	부수효과
//	논리합(or)	없음
&&	논리곱(and)	없음
!	부정(not)	없음

논리 부정(!)연산자는 언제나 불리언 값을 반환한다. 단, 피연산자가 반드시 불리언 값일 필요는 없다. 만약 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환이 된다.

쉼표 연산자

쉼표(,)연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.
var x,y,z; x=1,y=2,z=3; // 3

그룹 연산자

소괄호('()')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다. 그룹 연산자는 연산자 우선순위가 가장 높다

typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다. string, number, boolean, undefined, symbol, object, function중 하나를 반환한다.
typeof 연산자로 null 값을 연산해보면 null이 아닌 object를 반환한다. 따라서 값이 null 타입인지 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===)를 사용하자
- typeof foo === null; // false foo===null; // true

지수연산자

ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.
- ex) 2**2 = 4
지수 연산자가 도입되기 이전에는 Math.pow메서드를 사용했다.
만일 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야한다.

연산자 우선순위

연산자 우선순위란 여러 개의 연산자로 이뤄진 문이 실행될 때 연산자가 실행되는 순서를 말한다. 우선순위가 높을수록 먼저 실행된다.

()
new(매개변수 존재), [](프로퍼ㅓ티 접근), ()(함수호출), ?.(옵셔널 체이닝 연산자)
new(매개변수 미존재)
x++, x--
!x, +x, -x, ++x, --x, typeof, delete
**(이항 연산자 중에서 우선순위가 가장 높다)
*,/,%
+,-
<,<=,>,>=, in, instanceof
==,!=,===,!==
??(null 병합 연산자)
&&
||
? ... : ...
할당연산자(=,+=,-=,...)
,

8장 제어문

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

블록문

블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 세미콜론을 붙이지 않는다.

조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.
if...else문
- 주어진 조건식(불리언 값으로 평가될 수 있는 표현식)의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다. 조건식의 평가 결과가 true면 if문의 코드블록이 실행되고, false면 else문의 코드블록이 실행된다.
- if문의 조건식은 불리언 값으로 평가되어야 한다. 만약 if문의 조건식이 불리언 값이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 불리언 값으로 강제 변환되어 실행할 코드 블록을결정한다.
- 조건식을 추가하여 코드블록을 늘리고 싶다면 else if문을 사용한다.
- else if문과 else문은 옵션이다. 사용할 수도 있고, 사용하지 않을 수도 있다. if문과 else문은 2번 이상 사용할 수 없지만 else if문은 여러 번 사용할 수 있다.
- 만약 코드 블록 내의 문이 하나뿐이라면 중괄호를 생략할 수 있다.
switch문
- 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다. case문은 상황을 의미하는 표현식을 지정하고 콜론으로 마친다. 그리고 그 뒤에 실행한 문들을 위치 시킨다.
- switch문의 표현식과 일치하는 case 문이 없다면 실행 순서는 default문으로 이동한다. default 문은 선택사항으로 사용할 수도 있고 사용하지 않을 수도 있다.
- case문에 해당하는 문의 마지막에 break 문을 사용하지 않으면 폴스루 발생. 폴스루란 switch문을 탈출하지 않고 switch 문이 끝날 때까지 이후의 모든 case문과 default문을 실행하는 것.
- break 문은 코드 블록에서 탈출하는 역할을 한다. break 문이 없다면 case 문의 표현식과 일치하지 않더라도 실행 흐름이 다음 case 문으로 연이어 이동한다.
- default 문에는 breake 생략하는 것이 일반적이다.
if...else 문은 불리언 값으로 평가, switch는 문자열이나 숫자열 값으로 평가하는 경우가 많음. 그러므로 if...else는 논리적 참,거짓으로 결정. switch는 다양한 상황에 따라 결정

// if else
if(조건식) {
	// 조건식이 참이면 이 코드 블록이 실행
} else if(조건식2){
  // 조건식2가 참이면 이 코드 블록이 실행
} else {
  // 조건식1,2 모두가 거짓이면 이 코드 블록이 실행
}

//switch
switch (표현식){
  case 표현식1:
    switch 문의 표현식과 표현식1이 일치하면 실행될 문;
    breake;
  case 표현식2:
      switch 문의 표현식과 표현식2이 일치하면 실행될 문;
      breake;
  default:
      switch 문의 표현식과 일치하는 case문이 없을 때 실행될 문

반복문

반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다.
무한루프란 코드 블록을 무한히 반복 실행하는 문이다.
for문
- for문의 변수 선언문, 조건식, 증감식은 모두 옵션으로 반드시 사용할 필요는 없다. 하지만 어떤 식도 선언하지 않으면 무한루프가 된다.
- for문 안에 for문을 중첩해 사용할 수 있다. 이것을 중첩 for 문이라한다.
while문
- while문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다. for문은 반복 횟수가 명확할 때 주로 사용하고 while문은 반복 횟수가 불명확할 때 주로 사용한다.
- while문은 조건문의 평가 결과가 거짓이 되면 코드 블록을 실행하지 않고 종료한다. 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 논리적 참, 거짓을 구별한다.
- 조건식의 평가 결과가 언제나 참이면 무한루프가 된다.
do...while문
- 코드 블록을 먼저 실행하고 조건식을 평가한다. 그러므로 코드 블록은 무조건 한 번 이상 실행된다.

// for문
for(let i=0; i < 2; i++){
  console.log(i);
}

// while문
let count = 0;
while (count <3) {
  console.log(count) // 0 1 2
  count++
}

//while문 무한루프 탈출
// 무한루프에서 탈출 할려면 코드 블록 내에 if문으로 탈출 조건을 만들고 break문으로 탈출한다.
let count = 0;
while(true) {
  console.log(count);
  count++;
  if(count === 3) break;
} // 0 1 2

// do...while문
let count =0;
do{
  console.log(count) // 0 1 2
  count++;
} while(count <3);

continue문

반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다. break 문처럼 반복문을 탈출하지는 않는다.

let string = 'Hello World';
let search = 'l';
let count=0;
for(let i=0; i < string.length; i++){
  // l이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동한다.
  if(string[i] !== search) continue;
  count++;
}

9장 타입변환과 단축 평가

타입 변환이란?

자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.
개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환이 되기도 하는데 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다.
명시적 타입 변환이나 암묵적 타입 변환은 기존 원시 값을 직접 변경하는 것이 아니다. 원시 값은 변경이 불가능한 값이라서 변경할 수 없다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하느 것이다.
암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니다. 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다.
숫자 타입으로 변환
- 빈 문자열, 빈 배열, null, false는 0으로, true는 1로 변환된다. 객체와, 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN인 된다.
불리언 타입으로 변환
- 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분된다.
- Falsy값 : false, undefined, null, 0, -0, NaN, ' '(빈 문자열)
- Falsy값을 제외한 나머지들은 true로 평가되는 Truthy값 이다.

명시적 타입 변환

명시적으로 타입을 변경하는 방법은 다양하다. 표준 빌트인 생성자 함수를 new 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법, 암묵적 타입 변환을 이용하는 방법이 있다.
- 문자열 타입으로 변환
  - String() 함수
  - Object.prototype.toString() 메서드 사용
  - 문자열 연결 연산자(' ')를 사용
- 숫자 타입으로 변환
  - Number() 함수
  - parseInt, parseFloat 함수 사용(문자열만 변환 가능)
  - - 단항 산술 연산자를 사용
  - - 산술 연산자를 사용
- 불리언 타입으로 변환
  - Boolean() 함수
  - ! 부정 논리 연산자를 두 번 사용
    - ex) !!'x';

단축 평가

논리합(||) 또는 논리곱(&&)연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.논리합(||) 또는 논리곱(&&)연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.
ex) 'cat' && 'dog' -> dog
이처럼 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가라 한다. 단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.
단축 평가를 사용함으로써 if문을 대체 할 수 있다. 조건이 Truthy값일 때는 && Falsy값일 때는 ||

옵셔널 체이닝 연산자

ES11에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
?.는 객체를 가리키를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다.
좌항 피연산자가 Falsy값이라도 null 또는 undefined가 아니면 프로퍼티 참조를 이어간다.

null 병합 연산자

null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자는 변수에 기본값을 설정할 때 유용하다.

10장 객체 리터럴

객체는 변경 간으한 값이다.
객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 key와 value로 구성된다.
자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 잇다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 함수도 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다.
프로퍼티 : 객체의 상태를 나타내는 값(data)
메서드 : 프로퍼티(상태데이터)를 참조하고 조작할 수 있는 동작(behavior)

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

C++, Java 같은 클래스 기반 객체지향 언어는 클래스를 정의하고 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다.
js는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원한다.
1. 객체 리터럴
2. Object 생성자 함수
3. 생성자 함수
4. object.create 메서드
5. class (ES6)
객체 리터럴의 중괄호는 코드 블록을 의미하지 않아 뒤에 세미콜론을 붙인다. 객체 리터럴은 값으로 평가되는 표현식이기 때문이다.
객체 리터럴 외의 객체 생성 방식은 모두 함수를 사용해 객체를 생성한다.

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.
프로퍼티를 나열할 때는 쉼표로 구분한다.
- 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
- 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값
프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다. 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.
프로퍼티 키에 문자열이나 심벌 값 이외의 값을사용하면 암묵적 타입 변환을 통해 문자열이 된다.
프로퍼티 키로 예약어를 사용해도 에러가 발생하진 않지만 예상치 못한 에러가 발생할 여지가 있으므로 권장하지 않음
프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 덮어쓴다.

메서드

메서드는 객체에 묶여있는 함수를 의미

프로퍼티 접근

프로퍼티에 접근하는 방법은 2가지이다.
1. 마침표 프로퍼티 접근연산자(.)를 사용하는 마침표 표기법 ex) person.name
2. 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법 ex) person['name']
  - 대괄호 표기법을 사용하는 경우 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드신 따옴표로 감싼 문자열이어야 한다. 따옴표로 감싸지 않으면 자바스크립트 엔진은 식별자로 해석한다.
객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

프로퍼티 동적 생성

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

프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다.

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

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략 할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.

let x=1, y=2;
let obj ={
  x:x, // x,
  y:y  // y 로 생략
};

메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.

const obj = {
  name : 'Lee',
  // 메서드 축약 표현
  sayHi(){
    console.log('Hi')
  }

심채운

불가능, 그것은 사실이 아니라 하나의 의견일 뿐이다. - 무하마드 알리

다음 포스트

모던 자바스크립트 Deep Dive(1~10)

독서

1장 프로그래밍

2장 자바스크립트란?

자바스크립트로 인해 생겨난 것들

Ajax(Asynchronous Javascript and XML)

jQuery

V8 자바스크립트 엔진

Node.js

SPA 프레임워크

ECMAScript

자바스크립트의 특징

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

웹 브라우저

4장 변수

식별자

변수 선언

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

값의 할당

식별자 네이밍 규칙

5장 표현식과 문

리터럴

표현식

문

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

6장 데이터 타입

number

string

템플릿 리터럴

표현식 삽입

boolean

undefined

null

symbol

객체타입

데이터 타입의 필요성

동적 타이핑

7장 연산자

산술 연산자

할당 연산자

비교 연산자

삼항 조건 연산자

논리 연산자

쉼표 연산자

그룹 연산자

typeof 연산자

지수연산자

연산자 우선순위

8장 제어문

블록문

조건문

반복문

continue문

9장 타입변환과 단축 평가

타입 변환이란?

명시적 타입 변환

단축 평가

옵셔널 체이닝 연산자

null 병합 연산자

10장 객체 리터럴

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

프로퍼티

메서드

프로퍼티 접근

프로퍼티 동적 생성

프로퍼티 삭제

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

모던 자바스크립트 Deep Dive(11)

0개의 댓글