javascript (38) 썸네일형 리스트형 <Review> You Don't Know JS - 타입과 문법, 스코프와 클로저 1. 소개 - 제목 : You Don't Know JS - 타입과 문법, 스코프와 클로저 - 저자 : 카일 심슨 / 이일웅, 최병현 공역 - 출판사 : 한빛미디어 - 페이지 : 282p - 목차 PART I 타입과 문법 1장 타입 2장 값 3장 네이티브 4장 강제변환 5장 문법 PART I I 스코프와 클로저 1장 스코프란 무엇인가 2장 렉시컬 스코프 3장 함수 vs 블록 스코프 4장 호이스팅 5장 스코프 클로저 부록 A 다양한 환경의 자바스크립트 부록 B 스코프와 렉시컬 this 2. 리뷰 * 내용 크게 2개의 파트로 구성되어 있다. "타입과 문법"에서는 자바스크립트의 타입과 문법에 대해 상세하게 다루고 있다. 배열, 문자열, 숫자 등의 내장 타입부터 특수 값, 값 vs 레퍼런스, 네이티브 객체, 강제.. <ES2022> ES2022 Features 1. 소개 - 올해는 작년보다 많은 기능이 추가되었다. 특히 객체지향을 위한 클래스의 기능들이 눈에 띈다. TS나 바벨을 기존에 사용했던 개발자들이라면 이미 쓰고 있었던 기능이라 새삼스러울 수도 있지만 정식 스펙으로 채택된 건 ES2022이다. - ES2022외의 다른 버전의 스펙이 궁금하다면 필자의 다른 글도 참고해보길 바라며, ES2022의 기능들에 대해 알아보자. 2. 기능 * Class Fields - 클래스 필드에 많은 기능이 추가 되었다. tc39에 표기되어있는 바로는 Private instance methods and accessors, Class Public Instance Fields & Private Instance Fields, Static class fields & Private S.. <JS> 특수 값과 레퍼런스 1. 값 아닌 값 * undefined와 null - 자바스크립트에서는 undefined 타입과 null 타입이 존재한다. 이들은 각각 undefined와 null 값만을 갖는 타입이다. 즉 둘은 타입과 값이 같다. 둘 다 '빈 값' 또는 값이 아님을 의미한다. 하지만 둘은 엄연히 차이가 있다. - null은 식별자가 아닌 특별한 키워드이므로 변수를 할당할 수 없다. 그러나 undefined는 식별자로 쓸 수 있어서 변수를 할당할 수 있다. - 느슨한 모드에서는 전역 스코프에서도 undefined라는 식별자에 값을 할당할 수 있고, 심지어 모드에 상관없이 지역 변수를 생성할 수 있다. function foo() { "use strict" var undefined = 2; console.log(undefi.. <ES2021> ES2021 Features 1. 소개 - ES2021 에는 다음과 같은 기능들이 추가되었다. 2. 기능 * Replace All - es2021에서 드디어 자바스크립트에도 replaceAll 이 생겼다. 자바스크립트의 replace는 가장 처음에 등장하는 문자열을 변경하는 메서드이다. 따라서 해당하는 문자열을 모두 바꾸려면 반복문을 돌리든지 정규표현식의 g 옵션을 사용했어야 했다. const str = 'harry is a developer. harry is smart.'; const test1 = str.replace('harry', 'IU'); console.log(test1); // IU is a developer. harry is smart. - 위의 코드를 보면 'harry' 라는 문자열은 2개 이지만 먼저 나온 문자열만.. <JS> 제너레이터 1. 제너레이터 * 제너레이터란 - 일반적으로 함수는 0개 또는 하나의 값을 반환한다. 하지만 제너레이터(generator)는 반환값을 여러개로 만들 수 있다. - 제너레이터는 일반적인 함수가 아닌 제너레이터 함수를 통해 만들게 된다. * 제너레이터 만들기 - 제너레이터는 '*' 키워드와 함께 만들 수 있다. function* test() { yield 1; yield 2; return 3; } const generator = test(); const one = generator.next(); const two = generator.next(); const three = generator.next(); console.log(one); // { value: 1, done: false } console.lo.. <ES10> ES2019 Features 1. 소개 - 이번 ES2019 에서도 크게 새로운 기능은 추가되지 않고, 편의성과 관련된 기능들이 몇가지 추가되었다. 2. 기능 * Object fromEntries const arr = [ ["x", "11"], ["y", "22"], ["z", "33"], ]; const obj = Object.fromEntries(arr); console.log(obj); // { x: '11', y: '22', z: '33' } - Object 에 fromEntires 메서드가 추가되었다. 이는 entries 와 정반대의 기능을 하는 메서드이다. entries가 객체를 2차원배열로 만드는 기능이라면 fromEntires는 2차원배열을 객체로 만드는 역할을 한다. * Array flat const arr = [1.. <ES9> ES2018 Features 1. 소개 - ES9라도고 불리는 ES2018은 2018년에 소개된 ECMA Script의 2018버전이다. - 2015만큼은 아니지만 꽤 유용한 기능들이 추가되었다. 객체에서도 나머지 연산자와 스프레드 연산자를 사용할 수 있게 되었고, 비동기 반복이 편리해졌다. 2. 기능 * Spread Properties const obj = { x: 11, y: 22, z: 33 }; const foo = { a: 9999, ...obj }; console.log(foo); // { a: 9999, x: 11, y: 22, z: 33 } - 기존에 배열에서만 사용되었던 스프레드연산자가 객체에서도 사용가능하게 되었다. - 위를 통해 편리하게 얕은복사가 가능해졌다. * Rest Properties const obj =.. <이벤트루프> 태스크 큐 : 마이크로태스크 큐 & 매크로태스크 큐 1. 소개 * 소개 - 지난 장에서 봤듯이 비동기 작업은 태스크큐에서 대기하다가 콜스택으로 넘어가서 실행된다. - 그렇다면 여러개의 비동기 작업이 들어가면 어떻게 될지 알아보자. - 아래에서 사용되는 이미지와 코드는 이전 포스트의 연장선이므로 이전 포스트를 보지 않았다면 보는 것을 권장한다. 2. 실행 * 태스크 큐 - 먼저 동일한 비동기 동작이 여러 개가 있을 경우를 살펴보자. function myFunc1() { Promise.resolve().then(() => { console.log("promise1"); }); myFunc2(); Promise.resolve().then(() => { console.log("promise3"); }); console.log("bye"); } function m.. <이벤트루프> JS와 이벤트루프 1. 소개 * JS 와 이벤트루프 - 이벤트 루프(event loop)는 태스크가 들어오면 이를 처리하고, 잠들고, 처리하는 일련의 과정을 반복하는 자바스크립트의 루프를 의미한다. 그렇다면 이것이 무슨 의미가 있을까. - 자바스크립트는 '단일 스레드' 기반의 언어이다. 하지만 자바스크립트를 써본 사람들은 이미 알겠지만 여러 작업이 동시에 처리되고 있음을 알 수 있다. 이러한 작업에 필요한 것이 '이벤트 루프'이다. - 정리하면 자바스크립트는 태스크를 처리하는 이벤트 루프를 통해 비동기 방식으로 동시 작업을 지원한다. - 이 때 알아둬야 할 것은 이벤트 루프는 ECMAScript 스펙에 등재된 것이 아닌 브라우저나 노드JS에서 지원하는 것이라는 점이다. 자바스크립트 엔진은 단일 호출 스택(Call Stac.. <ES8> ES2017 Features 1. 소개 - ES2017은 전년도에 발표된 ES2016보다는 많은 기능이 추가되었다. ES8로도 불리는 ES2017의 가장 큰 변화는 역시 async, await의 등장이다. 2. 기능 * Padding a String - 문자열에 패딩 메서드가 추가되었다. const month = "8"; const number = "1.2"; const padMonth = month.padStart(2, "0"); const padNumber = number.padEnd(5, "x"); console.log(padMonth); // 08 console.log(padNumber); // 1.2xx - padStart와 padEnd 모두 첫 번째 인자에 string 길이를 제한하고, 그 길이보다 모자란 부분을 두 번째.. 이전 1 2 3 4 다음
