크롬, 사파리, 파이어폭스, 엣지같은 브라우저의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다. 브라우저마다 ES6지원율도 다르기때문에 최신사양으로 작성된 코드를 구형 브라우저에서 문제 없이 동작시키기 위한개발 환경을 구축하는 것이 필요하다. 이번장에서는 트랜스파일러인 Babel과 모듈 번들러인 Webpack을 이용하여 개발환경을 구축해보려한다.필자는 궁금했다. 리액트를 CRA로 구축해서 개발을해와서 따로 Babel과 웹팩 이런설정을 안해주어도 문제가 없는걸까?cra프로젝트 환경설정되있는 package.json 파일을보니 CRA는 webpack, babel 등을 다 포함하고 있다.편하게 바로 개발할수있는 기능을 제공하는 보일러 플레이트이다. CRA 만들시 npm 명령어를 쓰는데 npm..

객체리터럴 방식으로 객체생성하는 방식 이외에도 다양한 방법으로 생성할 수 있다.이번장 에서는 생성자 함수를 사용하여 객체를 생성하는 방식을 살펴본다.17.1 Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈객체를 생성하여 반환한다.const person = new Object();person.name = 'Lee';person.sayHello = function () { console.log("hello my name is " + this.name);};console.log(person); // { "name": "Lee" }person.sayHello(); // hello my name is Lee생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말..

18.1 일급 객체다음과 같은 조건을 만족하는 객체를 일급 객체라 한다.무영의 리터럴로 생성할수있다. 즉 런타임에 생성이 가능하다.변수나 자료구조(객체, 배열 등)에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환값으로 사용할 수 있다.// 1. 함수는 무명의 리터럴로 생성할 수 있다.// 2. 함수는 변수에 저장할 수 있다.// 런타임(할당단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.const increase = function (num) { return ++num;};const decrease = function (num) { return --num;};// 2. 함수는 객체에 저장할 수 있다.const auxs = { increase, decrease };//..

16.1 내부 슬롯과 내부 매서드const o = {};o.[[Prototype]] // -> Uncaught SyntaxErroro.__proto__ // Object.prototype 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖는다.내부슬롯과 내부 메서드는 ECMAScript 사양에 정의된대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다.[[Prototype]] 내부 슬롯의 경우, proto 를 통해 간접적으로 접근할 수 있다.  16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체자바스크립트 엔진은 프로퍼티를 생성할때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동정의한다. 프로퍼티 어트리뷰트..

15.1 var 키워드로 선언한 변수의 문제점15.1.1 변수 중복선언 허용var 키워드로 선언한 변수는 중복선언이 가능하다.var x = 1;var y = 1;var x = 100;var y; // 초기화문이 없는건 무시console.log(x); // 100console.log(y); // 1중복선언, 값할당됬다면 의도치않게 먼저 선언된 변수값이 변경되는 부작용이 발생한다.15.1.2 함수 레벨 스코프var 키워드로 선언한 변수는 오직 함수블록만을 지역스코프로 인정한다.var x = 1;if(true) [ var x = 10;}console.log(x); // 10코드블록내에서는 모두 전역변수가 되므로 값이 변경되었다.15.1.3 변수호이스팅console.log(foo) // undefinedfoo ..

14.1 변수의 생명주기14.1.1 지역변수의 생명주기전역변수의 생명주기는 애플리케이션의 생명주기와 같다.하지만 함수내부에서 선언된 지역변수는 함수가 호출되면 생성되고 종료하면 소멸한다.console.log(x); // referenceErrorfunction foo() { console.log(x); // undefined var x = "local"; console.log(x); // local return x;}foo();console.log(x); // referenceError 변수선언은 코드가 한줄씩 순차적으로 실행되기전에 런타임이전단계에서 자바스크립트 엔진에 의해 먼저실행된다고 앞장에서 다뤘었다.하지만 지역변수 x는 함수호출전에는 생성되지않는다. 함수가 호출된후 그다음 자바스크립트 엔진이..