26.1 함수의 구분모든 함수는 callable(메서드, 일반 함수)이면서 constructor(생성자 함수)모든 함수가 constructor이기 때문에 불필요하게 prototype 프로퍼티를 가지고, 프로토타입 객체를 생성함-> 의도치 않은 동작이 발생할 수 있으며, 성능에도 좋지 않음 ES6부터 사용 목적에 따라 함수를 세 종류로 명확히 구분 constructorprototypesuperarguments일반 함수OOXO메서드XXOO화살표 함수XXXX 26.2. 메서드이전: 객체에 바인딩된 함수ES6 이후: 메서드 축약 표현으로 정의된 함수프로퍼티 값으로 익명 함수 표현식을 할당하는 방식 지양// 지양const obj = { fn: function () {},}; non-constructor, pro..
25.8 상속에 의한 클래스 확장1. 클래스 상속과 생성자 함수 상속생성자 함수는 확장할 수 없음-> 의사 클래스 상속 패턴을 사용하여 확장을 흉내내기도 했지만 클래스의 등장으로 필요치 않아짐var Bird = (function () { function Bird() { Animal.apply(this, arguments); } Bird.prototype = Object.create(Animal.prototype); Bird.prototype.constructor = Bird; Bird.prototype.fly = function () { return 'fly'; }; return Bird;}();var bird = new Bird(1, 5); 클래스는 기존 클래스를 상속받아..
25.6 클래스의 인스턴스 생성 과정1. 인스턴스 생성과 this 바인딩- 빈 객체 생성(인스턴스)- 클래스의 prototype 프로퍼티가 인스턴스의 프로토타입 객체로 설정됨- this 바인딩2. 인스턴스 초기화- 프로퍼티 추가, constructor가 인수로 전달받은 초기값으로 프로퍼티 초기화3. 인스턴스 반환- 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환됨 25.7 프로퍼티1. 인스턴스 프로퍼티constructor 내부에서 정의해야 함ES6 클래스는 접근 제한자(private, public, protected 키워드)를 지원하지 않기 때문에 항상 public함 2. 접근자 프로퍼티자체적으로 값[[Value]]을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 ..

1. 클래스는 프로토타입의 문법적 설탕인가?자바스크립트는 프로토타입 기반 객체지향 언어프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어임 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 빠르게 학습할 수 있도록기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 만들어 문법적 설탕으로 볼 수도 있음 클래스가 없어도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있으나동작이 정확히 일치하지는 않음 클래스생성자 함수new 없이 호출 시 에러new 없이 호출 시 일반 함수로 호출됨상속을 지원하는 extends, super 키워드 제공x호이스팅이 발생하지 않는 것처럼 동작함수/변수 호이스팅 발생클래스 내부 모든 코드에는 암묵적으로 strict m..
클로저: 함수와 그 함수가 선언된 렉시컬 환경과의 조합 24.1 렉시컬 스코프함수의 상위 스코프는 함수 정의가 평가되는 시점에 함수가 정의된 위치에 의해 결정됨 스코프: 실행 컨텍스트의 렉시컬 환경스코프 체인: 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결 24.2 함수 객체의 내부 슬롯 [[Environment]]함수 객체 의 내부 슬롯 [[Environment]]에 상위 스코프의 참조 저장= 함수 평가 시점에 실행 중인 실행 컨텍스트의 렉시컬 환경 저장 외부 렉시컬 환경에 대한 참조에는 함수 객체의 내부 슬롯 [[Enviornment]]에 저장된 렉시컬 환경의 참조가 할당됨(코드/함수 실행 시점) 24.3 클로저와 렉시컬 환경생명 주기가 종료되어 외부 함수가 실행 컨텍스트 스택에서 제..
웹소켓을 사용하면 서버와 브라우저 간 연결을 유지한 상태로 데이터 교환 가능 데이터는 패킷(packet) 형태로 전달전송은 양방향으로 이루어짐(커넥션 중단과 추가 HTTP 요청 없음) 데이터 교환이 지속적으로 이뤄져야 하는 서비스에 적합ex. 온라인 게임이나 주식 트레이딩 시스템 특수 프로토콜 ws, wss웹소켓 커넥션 생성(즉시 연결)let socket = new WebSocket("ws://tempServer.co.kr");let socket = new WebSocket("wss://tempServer.co.kr");ws와 wss는 http와 https 관계와 유사보안과 신뢰성 측면에서 wss가 좀 더 신뢰할만함 ws암호화되지 않은 채 전송되어 데이터가 그대로 노출됨오래된 프락시 서버는 웹소켓을 인지..

실행 컨텍스트: 자바스크립트의 동작 원리를 담고 있는 핵심 개념스코프를 기반으로 식별자와 바인딩된 값을 관리하는 방식호이스팅이 발생하는 이유클로저의 동작 방식태스크 큐와 함께 동작하는 이벤트 핸들러비동기 처리의 동작 방식 23.1 소스코드의 타입소스코드는 실행 컨텍스트를 생성함타입에 따라 실행 컨텍스트를 생성하는 과정(코드가 평가되는 시점)과 관리 내용이 다름 1. 전역 코드전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등의 내부 코드는 포함하지 않음최상위 스코프인 전역 스코프를 생성var 키워드로 선언된 전역 변수(프로퍼티)와 함수 선언문으로 정의된 전역 함수(메서드)를 참조하기 위해 전역 객체와 연결돼야 함전역 코드가 평가되면 전역 실행 컨텍스트가 생성됨 2. 함수 코드함수 내부 소스코드, ..
22.1 this 키워드객체 리터럴 방식으로 생성한 객체: 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조const circle = { radius: 5, getDiameter() { return 2 * circle.radius; }};getDiameter의 circle 참조 표현식이 평가되는 시점: getDiameter 메서드가 호출되어 함수 몸체가 실행되는 시점 미래에 생성될 인스턴스의 식별자를 알 수 없기 때문에 재귀적으로 참조 방식은 일반적이지 않고 바람직하지 않음=> 자신이 속한 객체 / 자신이 생성할 인스턴스를 가리키는 특수한 식별자 this(자기 참조 변수) 사용자바스크립트 엔진에 의해 암묵적으로 생성되며 코드 어디서든 참조할 수 있음함수 호출 시 ar..

21.1 자바스크립트 객체의 분류표준 빌트인 객체(standard built-in objects/native objects/global objects)ECMAScript 사양에 정의된 객체애플리케이션 전역에 공통 기능을 제공자바스크립트 실행 환경(브라우저/Node.js)에 관계없이 언제나 사용할 수 있음전역 객체의 프로퍼티로 제공되어 언제나 참조할 수 있음호스트 객체(host objects)ECMAScript 사양에 정의되어 있지 않음자바스크립트 실행 환경에서 추가로 제공하는 객체브라우저 환경: DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등 클라이언트 사이..
20.1 strict mode(엄격 모드)ES5부터 도입 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킴- 잠재적 오류(암묵적 전역 등) 20.2 strict mode의 적용전역의 선두 또는 함수 몸체에 'use strict' 작성ES6 클래스와 모듈은 기본적으로 적용됨 20.3 전역에 strict mode를 적용시키는 것은 오류를 발생시킬 수 있음엄격 모드는 스크립트 단위로 실행됨strict mode 스크립트와 non-strict mode 스크립트(자체 코드 혹은 서드파티 라이브러리)를 혼용하는 것은 오류를 발생시킬 수 있음(function () { 'use strict'; ..