[Javascript ES8] 기초 문법 15. async, await

async, await async과 await 은 ES8에 나온 새로운 문법이다. 먼저 async는 함수 앞에만 붙일 수 있는 키워드로, 함수가 실행될 경우 promise 오브젝트를 자동으로 남게 해 준다. 그러나 성공의 경우만 가능한 것이 단점이다. 때문에 await을 사용한다. await는 '프로미스를 해결할 때 까지 기다리라' 는 뜻이다. 프로미스가 성공하면 실행되고, 실패할 경우 에러를 발생하고 멈춘다. 따라서 실패를 다루기 위하여 try-catch문을 사용해야 한다. 아래 코드를 실행하면 await에 따라 프로미스 속의 'promise실행' 이 먼저 출력되고, try 문으로 성공했을 경우에만 전달받은 연산의 결과를 출력한다.

• format_list_bulleted JavaScript/JavaScript 기초
• · 2022. 12. 21.
• textsms

[Javascript ES6] 기초 문법 14. Promise

Promise Promise는 성공과 실패 여부를 판정하여 저장할 수 있도록 도와주는 문법이다. promise 객체를 하나 생성해주고, 성공과 실패를 판정하는 콜백함수를 작성해 준 다음 .then을 사용해 성공 및 실패 여부에 따라 실행할 문장을 작성할 수 있다. then은 성공 시 실행되는 문장이며, catch는 실패했을 때 실행될 문장을 가리킨다. 프로미스에는 resolved, pending, rejected라는 세 개의 상태가 있다. resolved 성공 상태 pending 판정 대기 상태 rejected 실패 상태 아래의 코드로 5초 뒤에 성공, 또는 실패 판정을 하는 코드를 실행해보자. login에 false를 주었기 때문에 반드시 실패 판정을 저장하는 코드이다.

• format_list_bulleted JavaScript/JavaScript 기초
• · 2022. 12. 21.
• textsms

[Javascript ES6] 기초 문법 13. synchronous, asynchronous

synchronous, asynchronous 자바스크립트는 동기적으로 실행되는 언어이다. 동기적이라는 것은 쉽게 '순차적으로' 실행된다는 뜻이다. 만일 아래와 같은 코드가 있다면, console.log(1) console.log(2) console.log(3) 순서대로 1 2 3 이라는 로그가 출력된다. 그러나 자바스크립트를 실행하는 웹브라우저는 비동기적으로 작동한다. 쉽게 말해 '오래 걸리는 작업은 제쳐두고, 빨리 걸리는 것부터 실행한다' 는 뜻이다. 이 [오래 걸리는 작업] 에는 setTimeout, addEventListener, ajax 함수 등이 있는데, 웹브라우저의 비동기적 특성 때문에 읽는 시점과 실행되는 시점에 차이가 있다. 아래의 코드를 실행한다고 가정해보자. console.log(1)..

• format_list_bulleted JavaScript/JavaScript 기초
• · 2022. 12. 21.
• textsms

[Javascript ES6] 기초 문법 13. Import, Export

Import, Export import, export를 통해 다른 js 파일에 작성한 내용을 가져오거나 내보낼 수 있다. import 변수작명 from '경로' export default 내보낼내용 export default는 한번만 사용할 수 있지만, export는 여러번 사용할 수 있다. 따라서 여러개를 export 할 때 export를 사용한다. export만 하였을 경우에는, export와 import의 이름을 동일하게 사용해야 한다. export 한개로 여러개를 내보내고자 할 때는 중괄호를 사용해 주어야 한다. export {a,b} import {a,b} 또는, 변수 왼쪽에 export를 써도 된다. //export 옆에 있는 내용이 모두 export된다. export let name='cha..

• format_list_bulleted JavaScript/JavaScript 기초
• · 2022. 12. 21.
• textsms

[Javascript ES6] 기초 문법 12. Destructuring

Destructuring array Destructuring은 여러개의 변수에 한번에 값을 저장할 때 사용한다. a,b,c 세개의 변수에 각각 2,3,4라는 값을 한번에 집어넣고 싶다면, 양옆을 배열 형태로 맞추어 값을 넣어주면 된다. 값을 전달받지 못했을 때 사용할 default 값도 = 등호를 사용하여 만들어 줄 수 있다. Object 객체에도 같은 방식을 통해 값을 할당해 줄 수 있다. = 등호를 중심으로, 양 옆의 모양과 변수명을 맞추어주면 된다. name에는 'chali'가, age 에는 24가 들어가게 된다. 마찬가지로 default값을 줄 수도 있다. 변수를 오브젝트 객체에 할당할 때, 만일 key이름과 value의 이름이 똑같다면 아래와 같은 방법으로 사용할 수 있다. 하단의 두 코드는 같..

• format_list_bulleted JavaScript/JavaScript 기초
• · 2022. 12. 20.
• textsms

[Javascript ES6] 기초 문법 10. get, set

Get, Set get과 set 키워드를 이용하여 데이터를 꺼내 사용하고, 변경하는 함수를 만들 수 있다. get은 데이터를 꺼내서 사용하는 함수에 사용하며, 반드시 return문이 있어야 하고, 파라미터를 가질 수 없다. 그러나 set은 데이터를 변경하는 함수에 사용되며, 1개의 파라미터를 가질 수 있다. 만들어진 get과 set 함수는 오브젝트이름.get함수이름 및 오브젝트이름.set함수이름 = '넣을값' 으로 사용할 수 있다. class에도 동일하게 사용할 수 있다.

• format_list_bulleted JavaScript/JavaScript 기초
• · 2022. 12. 20.
• textsms