자바스크립트/웹개발자를 위한 자바스크립트의 모든 것

웹 개발자를 위한 자바스크립트의 모든 것 6장 이터러블, 이터레이터, 제너레이터

이터레이터(iterator) 란? next() 메서드가 있는 객체이다. next() 를 호출할 때마다 시퀀스의 다음 값과 완료 여부를 나타내는 플래그를 반환한다. 이터러블(ietrable) 이란? 이터레이터를 가져오는 표준 메서드가 있는 객체이다. Symbol.iterator 프로퍼티에서 iterator 를 반환하는 메서드를 구현하면 된다. 프로퍼티로 얻어오는 것이 아니라, 메서드로 얻어오는 이유는 매번 가장 첫번째 원소를 가리키는 iterator 를 반환하고 싶기 때문일 것이라 추측한다. 이터레이터 명시적으로 사용해보기 const a = ["a", "b", "c"]; const it = a[Symbol.iterator](); console.log("it", it); // Object [Array Ite..

웹 개발자를 위한 자바스크립트의 모든 것 5장 새로운 객체 기능

계산된 속성 이름 (computed property name) 계산된 속성 이름 (computed property name) 은 표현식의 결과를 프로퍼티의 이름으로 쓸 수 있게 해준다. 예제1 const name = "answer"; const obj = { [name]: 100, }; console.log(obj); 예제2: 작동 순서 알아보기 let counter = 0; const obj = { [counter++]: counter++, [counter++]: counter++, }; console.log(obj); // {"0": 1, "2": 3} 단축 속성 (shorthand property) 단축 속성 (shorthand property) 은 프로퍼티의 키와 값이 동일할 때 아래와 같이 표현..

웹 개발자를 위한 자바스크립트의 모든 것 4장 클래스

자바스크립트 클래스 ES6 가 나오기 이전에는 프로토타입을 이용해 클래스처럼 구현하는 것이 가능했다. ES2015(ES6) 가 나온 이후에는 클래스처럼이 아닌 클래스를 구현하는 것이 가능해졌다. 클래스 기본 문법 살펴보기 class Color { constructor(r = 0, g = 0, b = 0) { this.r = r; this.g = g; this.b = b; } get rgb() { return `rgb(${this.r}, ${this.g}, ${this.b})`; } set rgb(value) { // TODO ... } toString() { return this.rgb; } static fromCSS(css) { // TODO ... } } let c = new Color(30, 144..

웹 개발자를 위한 자바스크립트의 모든 것 3장 새로운 함수 기능

화살표 함수와 this, super, 그 외 화살표 함수 화살표 함수는 ES6 에서 새로 도입되었다. 쉼표 연산자 (Comma Operator) 를 사용하여 map 반환하기 MDN - Comma Operator handlers = handlers.map((handler) => (unregister(handler), register(handler))); 쉼표로 이어진 값을 평가하고 가장 마지막 값을 반환한다. map 의 본문을 간략화하고 싶을 때 사용할 수 있다. 이런식으로 사용하는 것을 추천한다기보다는 간혹 이런식으로 작성된 코드를 볼 수 있어서 알아두면 좋다. 화살표 함수의 this this 를 갖지 않는다. 대신 바로 바깥 스코프의 this 를 가진다. 화살표 함수는 new 키워드로 생성할 수 없지만..

웹 개발자를 위한 자바스크립트의 모든 것 2장 let, const 정리

let 과 var 의 공통점 var a; // undefined let b; // undefined 유효한 값으로 초기화하지 않아도 된다. 유효한 값으로 초기화하지 않은 경우 undefined 가 할당된다. 반면 const 는 즉시 초기화하지 않으면 에러가 던져진다. var 가 갖는 가장 큰 문제 var의 문제점 짚기 글에 var 의 문제가 나와있다. 함수 레벨 스코프를 갖는다는 생각보다 큰 영향력을 가진다. 변수 유지 관리를 힘들게 한다. 코드가 내가 작성한 의도와 다르게 동작할 수 있다. 의도와 다르게 동작하는 코드들 function jumpOut() { var a = [1, 2, 3]; for (var i = 0; i < a.length; ++i) { var value = a[i]; console...

웹 개발자를 위한 자바스크립트의 모든 것 1장 ES2015 - ES2020 정리

Ecma, ECMAScript, TC39 자바스크립트는 Ecma International 에 의해 "ECMAScript" 로 표준화된다. ECMAScript 표준은 ECMA-262이다. 표준 담당자는 TC39(Technical Committee) 조직의 일원이다. ES6 와 ES2015 ES6 와 ES2015 는 같은 버전이다. 자바스크립트 버전은 ES1, ES2, ... 처럼 순차적으로 늘어나다 2015년부터 버전의 년도를 표기하기 위해 ES6, ES2015 라는 표기를 병행했다. 예정된 변경사항을 참조할 때는 ESnext ES.next 와 같은 표현을 사용한다. 자바스크립트 엔진의 역할 자바스크립트 구문 분석 인터프리트 혹은 기계어로 컴파일 사양대로 작동하는 환경 내에서 결과 실행 브라우저별 자바스크..