본문 바로가기

Language/JavaScript

 (47)
<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. 컴파일러 이론 * 스코프 소개 - 프로그래밍 언어라면 변수에 값을 저장하고 그 값을 가져다 쓰고 수정할 수 있다. 하지만 여기서 의문이 드는 점이 있다. 변수는 어디에 있는가? 변수가 필요할 때 프로그램은 그것을 어떻게 찾는가? - 위 질문에서 알 수 있듯 변수는 어디에 저장되는지, 어떻게 찾을지를 정의한 규칙이 필요하다. 이것이 바로 스코프이다. * 컴파일러 이론 - 자바스크립트는 일반적으로 인터프리터 언어로 분류한다. 하지만 실제로는 컴파일러 언어이다. 다른 컴파일러 언어처럼 코드를 미리 컴파일하거나 컴파일한 결과를 분산시스템에서 이용할 수 있는 것은 아니다. 그럼에도 불구하고 자바스크립트 엔진은 컴파일러가 하는 일들을 우아하게 처리하고 있다. - 컴파일러 언어의 처리 과정을 살펴보자. 소스 코..
<JS> 암시적 변환 1. 암시적변환 - 암시적 강제변환(이하 암시적 변환)은 부수 효과가 명확하지 않게 숨겨진 형태로 일어나는 타입변환이다. 대부분 암시적 변환은 위험하고 나쁜 코드라고 생각하기 쉽다. 필자 또한 그랬고 수많은 개발자들도 그렇게 생각하고 있다. 하지만 암시적 변환의 목적은 불필요한 상세 구현을 줄이는 것이다. 이미 나도 모르는 사이에 읽기 좋은 코드를 위해 쓰고 있었을 수도 있다. - 먼저 JS코드를 보기 전에 엄격한 타입 언어에서 말하는 이론적인 의사코드를 보자. SomeType x = SomeType(AnotherType(y)) - 어떤 y 값을 SomeType인 x에 할당하였다. 이 언어에서는 바로 SomeType으로 변환할 수 없어서 중간단계를 거쳤다고 가정하였다. 이를 만약 다음과 같이 작성할 수 ..
<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개 이지만 먼저 나온 문자열만..
<ES2020> ES2020 Features 1. 소개 - ES2020 에서는 드디어 BigInt와 matchAll이 추가되었다. 그 외에도 globalThis와 옵셔널체이닝, 널병합연산자 등 편의를 위해 자주 쓰이는 기능들이 추가되었다. 2. 기능 * BigInt - 자바스크립트의 숫자 최댓값은 2^53 - 1로 제한되어있다. 더 큰 정수를 저장할 수 없는 것은 아니지만 처리할때 문제가 발생하곤 한다. let limit = Number.MAX_SAFE_INTEGER; console.log(limit); // 9007199254740991 limit++; console.log(limit); // 9007199254740992 limit++; console.log(limit); // 9007199254740992 limit++; console.log..
<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..

티스토리툴바