문법 async function 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수, 암시적으로 Promise를 사용하여 결과를 반환 (Promise : async 함수에 의해 반환 된 값으로 해결되거나 async 함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값) await 연산자는 async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환 await 연산자는 async function 내부에서만 사용 가능 async function 함수명() { await 비동기 메서드명(); } 예제) function fetchData() { r..

개요 전통적인 자바스크립트의 비동기 처리를 위한 패턴으로 콜백함수가 존재 콜백함수의 경우, 가독성 및 에러의 예외처리 한계 ES6 Promise 등장하여 단점 보완 정의 Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체 Promise는 함수에 콜백을 전달하는 대신, 콜백을 첨부하는 방식의 객체 특징 콜백은 자바스크립트 Event Loop 가 현재 실행중인 콜 스택을 완료하기 전에는 절대 호출 되지않음 then() 을 여러번 사용하여 여러개의 콜백 추가 가능(chaning), 순서대로 콜백이 수행 예제) // Promise 객체 생성 const fetchData = new Promise((resolve, reject) => { // 비동기 작업 수행, setTimeout으로 대체 setT..

iterator 반복 처리가 가능한 객체 시퀀스를 정의하고 종료시의 반환값을 잠재적으로 정의하는 객체 반복자는 두 개의 속성(value, done)을 반환하는 next() 메소드 사용하여 객체의 iterator protocol 을 구현 반환되는 value 속성은 현재 iterator 가 가리키는 곳의 값을 가리키며, done 속성은 iterator 가 끝까지 도달했는지를 구분해주는 true/flase 값을 가짐 Array, String, Map, Set, DOM이 iterable, 이러한 요소를 탐색할 수 있게 하는 객체가 iterator 예제) const furitArr = ['사과', '배', '오렌지']; const iterator = furitArr[Symbol.iterator](); consol..

Spread 연산자 이터러블 오브젝트(Iterable Object)의 엘리먼트를 하나씩 분기 전개한 결과를 변수에 할당 / 호출하는 함수의 파라미터 인수 예제) 기존 객체를 복사, 새로운 객체를 반환 // 새로운 객체 생성 const book = { action : 'read' }; const js_book = { ...book, title: 'JS' }; const react_book = { ...js_book, title: 'react', price: '1000' }; console.log(book); console.log(js_book); console.log(react_book); console.log('------------------------------------------------'); ..

Destructuring(구조 분해 할당) 특징 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 JSON 규격의 객체나 배열은 쉽게 매핑하여 변수를 할당할 수 있고, 함수의 반환값을 여러 개로 할 수 있음 ES6 에서는 Destructing 을 통해 객체나 배열이 복잡하게 전달되는 함수들로 인하여 변수를 할당하고 속성에 접근해야할 때, 간편하게 할당 및 정의 예제) let num1, num2, rest; [num1, num2] = [100, 200] console.log(num1); console.log(num2); [num1, num2, ...rest] = [100, 200, 300, 400, 500]; console.log(rest); con..

템플릿 리터럴 문자열 표현식 특징 기존에 없었던 새로운 기능 역따옴표(`) 사용 변수 사용의 편리성 여러 줄의 문자열의 경우, "\n" 을 넣어 개행 예제) Name : 태그로 입력 시, change 이벤트 핸들럴를 통해 별도의 태그에 보여줌 역따옴표(`)의 변수 설정은 ${} 안에서 이루어지며, 일반 변수 뿐만 아니라 함수 호출이나 계산식 등을 넣을 수 있음 예제) (() => { function Test(strings, ...values) { console.log(strings); console.log(values); return "Test" } var str = "World"; console.log(Test `Test, ${str}!\n${2 * 2 + 2} End`); })(); -- 출력 결과 ..