자바스크립트

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

새로운 문자열 함수 추가 모던 자바스크립트에 들어서며 유용한 문자열 함수가 많이 생겼다. 잘 알아두면 코드의 양과 질에 큰 기여를 할만큼 좋은 것들이 많다. 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() 코드 포인트를 숫자로 전달받아 해당하는 유니코드 문자열..

자바스크립트 replace 메서드 정규식 특수 대체 패턴

정규표현식 특수 대체 패턴 (Special Replacement Patterns) 이란? String.prototype.replace() 에서 사용 가능한 특수한 대체 패턴이다. 패턴 살펴보기 $&: 매칭된 문자를 삽입하고 싶을 때 사용하는 패턴이다. $`: 매칭된 문자의 앞 부분을 삽입하고 싶을 때 사용하는 패턴이다. $': 매칭된 문자의 뒷 부분을 삽입하고 싶을 때 사용하는 패턴이다. $n: n 번째 캡쳐링 그룹을 삽입하고 싶을 때 사용하는 패턴이다. $$: $ 자체를 삽입하고 싶을 때 사용하는 패턴이다. 활용 예제 살펴보기 아래에 나오는 [ㄱ-힣] 은 한글 유니코드를 전부 매치시킬 수 있는 정규표현식이다. $& "hello. 안녕 world. 세상".replace(/[ㄱ-힣]+/g, "($&..

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

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

자바스크립트가 문자열을 표현하는 방식 (feat.UTF-16)

자바스크립트의 문자열 표현 방식 UTF-16 자바스크립트 문자열은 유효하지 않은 대리쌍을 허용하는 일련의 UTF-16 코드 유닛이다. 위의 글을 읽었는데 어떤 의미인지 이해했다면, 더이상 아래의 글을 읽을 필요가 없다. UTF-16 이란? 자바스크립트 문자열의 표현 방식이다. 흔히 볼 수 있는 문자열 인코딩 방식이다. UTF-8 이 더 많이 쓰이긴 한다. 우리가 사용하는 문자를 비트 (bits) 로 나타낸 것이다. 16비트 코드 유닛 1개 혹은 2개로 문자를 표현한다. 1개로 표현되는 경우를 Basic Multilingual Plane 내부에 있다고 한다. 2개로 표현되는 경우를 Basic Multilingual Plane 외부에 있다고 한다. Basic Multilingual Plane (BMP) Ba..

자바스크립트 정규표현식, named capturing group 이란?

Named Capturing Group 이란? 정규표현식의 한 기능으로 패턴에 매칭된 그룹에 특정한 이름을 주는 것이다. (?pattern) 와 같은 문법으로 사용 가능하다. 예제 코드 (자바스크립트) 코드 /(?\d{4})-(?\d{2})-(?\d{2})/.exec("2002-07-28"); 콘솔 결과 (4) ['2002-07-28', '2002', '07', '28', index: 0, input: '2002-07-28', groups: {…}] 0: "2002-07-28" 1: "2002" 2: "07" 3: "28" groups: day: "28" month: "07" year: "2002" index: 0 input: "20..

자바스크립트 정규 표현식, exec() 메서드란?

RegExp.prototype.exec() 메서드란? 인자로 받은 문자열 (str) 에서 match 를 찾아내고 result array 혹은 null 을 반환한다. 자바스크립트 정규표현식을 다룰 때 쓴다. 코드 예제 검색 성공 사례 const regex1 = RegExp("foo*", "g"); const str1 = "table football, foosball"; let array1; while ((array1 = regex1.exec(str1)) !== null) { console.log("array1", array1); console.log(`Found ${array1[0]}. Next starts at ${regex1.lastIndex}.`); } /* array1 ['foo', ..

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

비동기 버전의 이터레이터, 이터러블, 제너레이터 자바스크립트에서 반복을 배우다보면 만나게 되는 개념들이 있다. 이터레이터, 이터러블 제너레이터 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 = ["..

자바스크립트 모듈 (Module) 이란 무엇인가요?

모듈은 왜 필요한가요? 애플리케이션이 고도화되면, 스크립트 소스코드의 양도 증가합니다. 결국 많은 양의 소스코드를 효율적으로 관리하기 위해서 모듈이라는 개념이 필요해집니다. 초기의 자바스크립트는 간단한 스크립트를 지향했기 때문에 모듈을 문법 차원에서 지원하지 않았습니다. ES6 (ES2015) 이후부터 공식적으로 모듈 문법인 export, import 문법을 지원합니다. 이전에는 AMD, CommonJS, UMD 와 같은 시도가 있었습니다만 이제는 사라지는 추세입니다. 자바스크립트의 모듈이란 무엇인가요? 단지 하나의 .js 파일을 의미합니다. .js 파일 내부에서는 export 와 import 문법을 이용해 함수, 변수 등을 교환하여 사용할 수 있습니다. 가져올 js 파일이 모듈이라면 strict mod..