자바스크립트 (59) 썸네일형 리스트형 <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 레퍼런스, 네이티브 객체, 강제.. <Review> 이펙티브 타입스크립트 1. 소개 - 제목 : 이펙티브 타입스크립트 - 저자 : 댄 밴더캄 / 장원호 역 - 출판사 : 인사이트 - 페이지 : 344p - 목차 1장 타입스크립트 알아보기 2장 타입스크립트의 타입 시스템 3장 타입 추론 4장 타입 설계 5장 any 다루기 6장 타입 선언과 @types 7장 코드를 작성하고 실행하기 8장 타입스크립트로 마이그레이션하기 2. 리뷰 * 내용 크게 8장으로 구성되어 있고, 각 장마다 5~10개의 소단원(아이템)이 엮여있다. 총 62개의 아이템으로 이루어져있으며 타입스크립트를 효과적으로 사용하는 방법을 기술하고 있다. 처음에는 가볍게 타입스크립트에 기본적인 부분을 소개하지만 뒤로 갈수록 깊은 내용을 다룬다. 각 아이템마다 개념과 기술을 설명하고 예제를 상세하게 보여준다. 자연스럽게 타입.. <디자인 패턴> 싱글톤 패턴 1. 소개 싱글톤 패턴에 대해 patterns.dev는 다음과 같이 소개하고 있다. Singletons are classes which can be instantiated once, and can be accessed globally. This single instance can be shared throughout our application, which makes Singletons great for managing global state in an application. 간단히 말해 싱글톤은 단 한번만 인스턴스화되는 클래스이며, 전역상태를 관리하는 데 용이한 패턴이라는 것이다. 2. 싱글톤 * 개념 - 앱 전반에서 사용되는 숫자 카운터가 있을 때, 흔히 아래와 같이 작성할 수 있다. let coun.. <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. 소개 * 배경 - 최근 기업 면접을 다니며 가장 자주 받은 질문 중 하나가 클로저에 대한 질문이었다. 간단하게만 묻고 넘어가는 기업도 있었지만 내가 어디까지 생각해봤는지 물어보는 기업도 있었다. 그래서 클로저가 무엇인지부터 시작해서 깊이 있게 고찰해보려 한다. * 클로저란 - 클로저는 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수를 의미한다. 자바스크립트의 렉시컬 환경은 외부 렉시컬 환경을 가리키는 outer 가 존재한다. - 알다시피 자바스크립트는 렉시컬 스코프를 따르므로 식별자가 현재 스코프에 존재하지 않으면 선언된 위치를 기준으로 외부 환경에서 해당 변수를 찾는다. - 결과적으로 자바스크립트의 함수는 모두 클로저이다. function func() { const x = 10; ret.. <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 3 4 ··· 6 다음
