본문 바로가기

JS57

Async, Await (feat. Generator) Async, Awaitasync/await는 ES7(2017)부터 추가된 것으로, 이를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있음명세의 차이가 있을 뿐 async 함수를 호출하면 명시적으로 Promise 객체를 생성하여 리턴하지 않아도 Promise 객체를 리턴함 async function greet(){ return 'hi!'}const hi = greet()console.log(hi) // Promise {: 'hi!'} ▶ Async, Await 기본 구조async 키워드는 function 앞에 붙임(function 앞에 async를 붙이지 않으면 syntax Error 발생)await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용할 수 있음 기존 비동기 .. 2024. 6. 13.
이터레이터(Iterator), 제너레이터(Generator) 이터레이터(Iterator)Enumerable객체에 자동으로 생성되는 객체속성(property attribute)에는 [[enumerable]]라는 속성이 있음 [[enumerable]]은 프로퍼티 열거 가능 여부를 나타냄 [[enumerable]]이 true인 객체는 프로퍼티 요소를 열거할 수 있음Iteration직역하면 반복으로 객체의 프로퍼티 조회를 반복하기 위해서는 [[enumerable]]이 true여야 함 for ... in과 for...of에 대한 문법을 살펴보면 대상이 enumerable 해야한다고 명시되어 있음 - for...in은 일반 객체(iterable이 아님)도 순회하지만 for...of는 iterable 요소들만 반복 가능 ▶ 이터레이션 프로토콜(Iteration Protocol.. 2024. 6. 13.
Promise (Macro/Micro task) 프로미스(Promise) 자바스크립트는 비동기 처리를 위해 콜백 함수를 사용함하지만 콜백을 남용하게 되면 흔히 말하는 콜백 지옥에 빠질 수 있음 자바스크립트는 콜백 함수의 단점을 보완하며 효율적인 비동기 처리를 위해서 ES6부터 Promise 도입 ▶ Promise 객체어떤 작업에 관한 '상태 정보'를 갖고 있는 객체작업의 결과가 promise 객체에 저장됨(promise 객체를 보면 작업이 성공했는지, 실패했는지 알 수 있음) new Promise((resolve,reject)=>{}) Promise의 Callback 함수는 두가지 인자를 받음resolve 메소드: Promise 객체의 골백함수가 제대로 수행(fulfilled) 되었을 때 호출reject 메소드: Promise 객체의 골백함수가 거부(.. 2024. 6. 12.
Proxy(Object.defineProperty와 비교) 프록시(Proxy)Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로,가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달 되기도 함 Proxy의 사전적 뜻은 '대리인', '대리'라는 뜻으로 자바스크립트에서도 대리인의 역할을 수행함 프록시 객체(Proxy object)는 대상 객체(Target object) 대신 사용됨대상 객체를 직접 사용하는 대신, 프록시 객체가 사용되며 각 작업을 대상 객체로 전달하고 결과 다시 코드로 돌려줌 이러한 방식을 통해 프록시 객체는 자바스크립트의 기본적인 명령에 대한 동작을 사용자 정의 가능하도록 함객체 자체가 처리하는 특정 명령을 정의할 수 있게 되는 것이런 명령의 종류는 속성검색.. 2024. 6. 12.
Class(extends, super) 클래스(class)원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 공장처럼 찍어낼 수 잇음쉽게 생각해서 클래스 = 붕어빵 기계 그리고 객체 = 붕어빵으로 보면 됨 ▶ 클래스를 사용하는 이유자바스크립트는 프로토타입(prototype) 기반의 객체지향 프로그래밍 언어임ES6부터 추가된 클래스는 직관적으로 쉽게 코드를 읽을 수 있게 만들어 줄 뿐만 아니라 작성하기도 쉽고class 기반 언어에 익숙한 개발자가 더 빠르게 적응할 수 있음 prototypefunction Me(name) { this.name = name;}Me.prototype.wow = function () { console.log("WOW!");};let person = new Me("Jason");person.wow(); // WO.. 2024. 6. 12.
맵(Map), 셋(Set) 맵(Map)데이터와 키를 같이 저장할 수 있는 자료 구조맵은 키가 있는 데이터를 저장한다는 점에서 객체(obj)와 유사▶ 맵의 특징Key-value의 한 쌍으로 이루어진 데이터 집합본래 key 삽입 순서를 기억어떤 value(객체와 원시값*)든 key 혹은 value로 사용될 수 있음(key의 타임에 제약이 없음)삽입 순서로 요소를 반복(루프는 각 반복에 대해 for...of 루프의 [key, value] 배열을 반환)Key 중복 허용 불가(동일한 키로 값을 추가하면 기존 값을 덮어씀)Value에는 중복이 허용NaN 도 key로 쓸 수 있음Key equality는 sameValueZero 알고리즘을 기반으로 함뛰어난 검색 속도를 가지고 있다는 장점이 있음인덱스가 따로 존재하지 않아서 iterator를 사.. 2024. 6. 12.
구조 분해(Destructuring), 나머지/전개 연산자(Rest/Spread Operator) 구조 분해(Destructuring)구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식즉, 배열([]) 혹은 객체({}) 안의 값을 편하게 꺼내 쓸 수 있는 문법 ▶ 배열 구조 분해좌항이 호출될 변수의 집합, 우항이 할당할 값좌항의 각 요소에는 각 index를 가지는 배열값이 할당됨 let a = [1, 2, 3, 4, 5];let [b, c] = x;console.log(b); // 1console.log(c); // 2 필요하지 않은 배열 요소를 쉼표(,)을 이용해 무시할 수 있음 let [a, ,b] = [1, 2, 3];console.log(a); // 1console.log(b); // 3 변수에 기본값을 할당하면, 분해한 값이 .. 2024. 6. 12.
ES-Module(ESM, ECMAScript Modules) ES-Module(ESM)ES Module은 ES6부터 도입된 모듈 시스템export 및 import문을 사용하여 분리되어 있는 자바스크립트 파일 간의 접근을 가능하게 만들어줌 ▶ ES Module 등장 배경기존의 웹은 자바스크립트의 비중이 크지 않았고, 따라서 큰 스크립트가 필요하지 않았음웹의 발전에 따라 점점 자바스크립트의 중요도가 커지고, 여러 스크립트 파일을 쓰며 상호작용해야 했음이를 처리하기 위해 JQuery 등으로 해결(각각의 script 파일을 전역 스코프처럼 사용)했지만 여러 문제점이 발생했음script 파일들을 올바른 순서대로 정렬해야 하기 때문에 순서가 뒤틀리면 에러를 발생하위에 있는 script가 상위 script의 상태를 쉽게 변경시키는 '전역 오염'이 발생하기 쉬움모든 script.. 2024. 6. 11.
화살표 함수(Arrow Function) 화살표 함수(Arrow Function)ES6부터 화살표 함수라는 새로운 문법 방식으로 함수를 만들 수 있게 됨화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있지만모든 경우 화살표 함수를 사용할 수 있는 것은 아님 ▶ 화살표 함수 문법 표현매개변수 표현 매개변수가 하나뿐이면 매개변수의 괄호 부분을 생략// 매개변수가 없을 경우() => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있음x => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없음(x, y) => { ... } 함수 몸체 표현함수 몸체 내의 코드가 한줄이고 단순히 return문 밖에 없다면 중괄호와 return 키워드를 생략// single.. 2024. 6. 11.