자바스크립트/모던 자바스크립트

모던 자바스크립트, 편의 유틸 문자열 메서드

새로운 문자열 함수 추가 모던 자바스크립트에 들어서며 유용한 문자열 함수가 많이 생겼다. 잘 알아두면 코드의 양과 질에 큰 기여를 할만큼 좋은 것들이 많다. String.raw() console.log("안녕\n\n하세요"); /* 출력결과: 안녕 하세요 */ console.log(String.raw`안녕\n\n하세요`); /* 출력결과: 안녕\n\n하세요 */ 이스케이프 시퀀스를 그대로 출력하고 싶을 때 사용할 수 있다. 실무 예제: 파일 경로 표현하기 console.log(String.raw`C:\Users\jakeSeo\files\my_excel.xlsx`); /* 출력결과: C:\Users\jakeSeo\files\my_excel.xlsx */ 보통 윈도우즈의 경로를 표현할 때 \ 가 Escape..

모던 자바스크립트, UTF-16 이슈 해결에 관련된 문자열 함수

UTF-16 과 관련된 변화 사항 자바스크립트는 UTF-16 인코딩을 통해 문자를 표현한다. 인코딩 방식에서 생기는 여러 이슈들이 있었는데, ES2015 이후에 이를 해결하기 위해 바뀐 것들이 몇가지 있다. 코드 포인트 이스케이프 시퀀스 (Code point escape sequence) 유니코드 6.0 부터 이모지가 유니코드에 추가되었다. 이모지는 8비트의 코드 유닛 2개로 표현된다. 코드 포인트 이스케이프 시퀀스는 2개의 코드 유닛을 이용한 문자를 작성하기 위해선 번거로웠던 부분을 해결한다. console.log("\uD83D\uDE0A"); // 😊 console.log("\u{1F60A}"); // 😊 String.fromCodePoint() 코드 포인트를 숫자로 전달받아 해당하는 유니코드 문자열..

모던 자바스크립트, 템플릿 리터럴과 템플릿 태그 함수

템플릿 리터럴 정규표현식 리터럴(//g), 문자열 리터럴(""), 배열 리터럴([]) 처럼 리터럴의 한 종류이다. 백틱( ` )으로 구분되는 리터럴이며, 악센트(accent)라고도 한다. 리터럴 중간에 Place Holder (${}) 를 이용하여 표현식을 리터럴에 삽입할 수 있다. 문자열을 이용할 때 "myName = " + name 과 같은 행위를 편하게 만들어준다. 이스케이프 시퀀스는 일반 문자열과 동일하게 동작한다. \n 가 중간에 온다면, 동일하게 개행으로 취급되는 것을 볼 수 있다. 리터럴이란, 더이상 쪼갤 수 없는 값의 표현이다. 심볼(Symbol()) 도 리터럴이다. 기본 사용법 const name = "jake"; console.log(`my name is ${name}`); const ..

모던 자바스크립트, 비동기 버전의 이터레이터, 이터러블, 제너레이터

비동기 버전의 이터레이터, 이터러블, 제너레이터 자바스크립트에서 반복을 배우다보면 만나게 되는 개념들이 있다. 이터레이터, 이터러블 제너레이터 ES2018 부터 이터레이터, 이터러블, 제너레이터의 비동기 버전이 있다. 비동기 이터레이터는 {done, value} 형태의 객체를 반환하는 것은 같은데, value 에 Promise 객체가 들어있다. asyncIterator.next() 는 {value: Promise, done: false} 와 같은 형태의 객체를 반환한다. 그런데 asyncIterator 가 비동기로 호출되어야 하기 때문에, 이용 시 asyncIterator.next().then(v => ...) 와 같은 형태가 되도록 설계되어 있다. 이터레이터의 비동기 버전 만들어보기 function f..

모던 자바스크립트, async await

async/await 구문의 특징 async/await 은 비동기 코드 작성을 단순화한다. async 함수는 암시적으로 프라미스를 만들고 반환한다. async 함수 내부 await 은 Promise 확정 전까지 대기하는 지점을 표시한다. async 함수가 Promise 확정을 기다리는 동안 스레드는 다른 코드를 실행할 수 있다. for, a + b, try/catch/finally 등 다양한 식이나 구문 안에 await 이 포함될 수 있다. await 이 포함되는 경우 비동기식이 된다. Promise 가 거절 (reject) 되는 경우, 예외이다. Promise 가 이행 (resolve, fulfill) 되는 경우, 이행 값이 await 표현식의 결과가 된다. resolve 와 reject 가 await..

모던 자바스크립트, 제너레이터 (Generator)

제너레이터란? function * 문법으로 생성할 수 있는 특수한 함수이다. 작업 중간에 일시 정지가 가능하다. 멋진 점은 일시정지된 상태로 진행된 작업 정보를 기억하고 있는 것이다. 값을 생성하고 선택적으로 새 값을 받아들인 다음 필요한 만큼 계속 진행할 수 있다. 내부적으로 제너레이터 함수는 제너레이터 객체를 만들고 반환한다. 이터레이터는 값만 생성하는 반면, 제너레이터는 값을 생성하고 소비할 수 있다. 단방향으로 값을 주기만하는 것이 아니라, 값을 받아들이고 그에 따른 값을 주는 것이 가능하다. 제너레이터 객체를 수동으로 생성하는 것도 가능하지만 보통은 function * 문법으로 단순화하여 생성한다. 기본 제너레이터 함수 생성하기 function* simple() { for (let n = 1; ..

모던 자바스크립트, 이터러블 (iterable) 과 이터레이터 (iterator)

이터레이터(iterator) 란? next() 메서드가 있는 객체이다. next() 를 호출할 때마다 시퀀스의 다음 값과 완료 여부를 나타내는 플래그를 반환한다. ex) {value: 10, done: false} 이터러블(iterable) 이란? 이터레이터를 가져오는 표준 메서드가 있는 객체이다. Symbol.iterator 프로퍼티에서 iterator 를 반환하는 메서드를 구현하면 된다. 프로퍼티로 얻어오는 것이 아니라, 메서드로 얻어오는 이유는 매번 가장 첫번째 원소를 가리키는 iterator 를 생성하여 반환하고 싶기 때문일 것이라 추측한다. for of 와 iterator iterator 를 구현하여 iterable 객체를 만들면, for of 문에 의해 반복이 가능하다. const a = ["..

모던 자바스크립트, 프라미스 2 - 유틸 메서드와 작업 패턴 그리고 안티 패턴

Promise 의 유틸 메서드 상황에 따라 편리하게 이용 가능한 유틸 메서드도 제공한다. Promise.all() 모든 Promise 가 resolve() 여야 then() 을 실행한다. 서로 의존하지 않고 병렬로 수행될 수 있는 여러 개의 비동기 작업이 있는데, 결과를 내기 위해서는 각 비동기 작업의 결과 값이 필요할 때 유용하다. ex) 3개의 영상의 조회수를 구하고 그 합을 구해야 한다면? const viewCount1 = getAsyncViewCount1(); const viewCount2 = getAsyncViewCount2(); const viewCount3 = getAsyncViewCount3(); viewCount1.then((count1) => { viewCount2.then((count..

모던 자바스크립트, 프라미스 1 - 기본 개념

프라미스 (Promise) 란? ES2015 에서 생겼다. 비동기 결과를 나타내는 객체이다. 작업을 비동기화하진 않으며, 비동기식의 결과를 관찰하는 방법이다. 여러 언어에서 promise, future, deferred 라는 다양한 이름으로 불리는 패턴이다. Promises/A+ 사양에 크게 의존한다. ES2018 에서 나온 async 와 상호작용하는 방식으로 많이 쓰인다. Promise 라는 이름은 엔진이 어떠한 비동기 작업을 하겠다고 약속한다는 의미에서 지어졌다고 한다. 프라미스를 사용하는 이유 프라미스는 자바스크립트에서 지원하는 대수타입의 모나드이며, 비동기 작업에서 서로간의 제어를 분리할 수 있도록 도와주는 역할을 한다. 비동기 작업의 제어권은 자바스크립트 엔진의 비동기 큐에게 맡기고, 비동기 작..

모던 자바스크립트, 디스트럭처링 (Desctructuring)

디스트럭처링 (Destructuring) 이란? 객체 혹은 배열을 분해하여 내부 요소를 추출하는 것이다. 일반적으로 직접 추출하는 것보다 더 간결하다. 기본값, 이름 변경, 중첩 및 나머지 구문 등을 제공한다. 함수의 매개변수에서 명확성과 표현력을 제공한다. 객체 디스트럭처링 디스트럭처링의 형태 객체 리터럴과 매우 흡사하다. 다만, value 에 객체 리터럴처럼 값을 넣는 것이 아니라, 요소를 가질 변수명을 넣는다. const obj = { first: 1, second: 2 }; const { first: f, second: s } = obj; console.log(f, s); 아래는 한단계 더 발전시킨 더 직관적인 예제이다. const { first: a } = { first: 42 }; consol..

자바스크립트 클래스 3 - 상속

서브클래스 ES5 에서 상속을 구현하는 방식은 꽤 복잡했다. class 문법이 생기면서 이러한 부분이 많이 개선되었다. class ClassWithAlpha extends Color {} extends 를 이용하면, 두 개의 상속 체인이 생성된다. 해당 생성자로 생성된 객체에 대한 병렬상속관계라고 한다. 하나는 생성자 자체에 있으며, 하나는 생성자의 프로토타입 객체에 있다. 생성자 상속 체인 ColorWithAlpha 서브클래스 생성자를 만든다. Color (슈퍼클래스 생성자 함수) Color 의 프로토타입을 만들어 모든 정적 속성/메서드를 ColorWithAlpha 에서 접근 가능하게 한다. Function.prototype 이외의 프로토타입을 갖는 함수의 개념이 등장한다. 프로토타입 체인 서브클래스 ..

자바스크립트 클래스 2 - 클래스 바디

클래스 바디의 필드와 메서드 클래스 바디란 {} 내부의 요소들을 말한다. 클래스 바디엔 대표적으로 상태를 저장하는 필드와 상태를 이용해 동작을 수행하는 메서드가 있다. 클래스의 바디에 올 수 있는 요소의 경우의 수 종류: Getter, Setter, Method, Field 위치: Static, Instance 접근: Public, Private 클래스의 바디에 오는 요소는 위 3가지를 모두 가져야 한다. 총 16가지 조합이 가능하다. 클래스에만 있는 특별한 것들 생성자 정적 초기화 블록 클래스 필드 추가하기 class ExampleClass { constructor() { this.field = 1; } } const c = new ExampleClass(); console.log(c.field); /..