환경
- Visual Studio Code
- Node v10.16.3
- Window OS
ES2015+
자바스크립트는 매년 새로운 버전을 출시하고 있다.
노드는 주기적으로 버전을 올리며 변경된 자바스크립트 문법을 반영한다.
2015년에 자바 스크립트 문법에 매우 큰 변화가 있었다.
ES2015(ES6라고도 불린다)가 등장했다!!!
ES2015부터 다른 언어들의 장점들을 본딴 편리한 기능이 많이 추가됐다.
노드 6버전부터 ES2015 문법을 사용할 수 있다.
const, let
var로 변수를 선언하곤 했다.
하지만 이제 var는 const와 let이 대체한다.
기본적인 차이점으로는 var는 함수 스코프(범위)를 가진다.
이에 반해 const와 let은 블록 스코프를 가진다.
코드를 보면서 이해하자.
1
2
3
4
5
6
7
8
9
if (true) {
var x = 3
}
console.log(x) // 3 출력
if (true) {
const y = 3
}
console.log(y) // ReferenceError: y is not defined
위의 에러로 이해할 수 있다.
var의 변수는 if문의 중괄호를 벗어나도 사용할 수 있다.
이에 반해 const는 if문의 중괄호를 벗어나니 변수에 접근할 수 없다.
이게 스코프의 차이다.
const와 let의 차이는 불변과 변수이다.
const는 한 번 선언하면 다른 값을 대입할 수 없다.
하지만 let은 다른 값을 대입할 수 있다.
템플릿 문자열
백틱(`)의 탄생.
Tab 위에 있다.
문자열을 나타낸다. 특이한 점은 문자열 안에 변수를 넣을 수 있다.
코드를 보면서 이해하자.
1
2
3
4
5
6
7
8
9
10
11
12
13
var num1 = 1
var num2 = 2
var result = 3
var string = num1 + ' 더하기 ' + num2 + ' 는 \'' + result + '\''
console.log(string)
const num1 = 1
const num2 = 2
const result = 3
const string = `${num1} 더하기 ${num2}는 '${result}'`
console.log(string)
기존에는 더하기 기호, 작은 따옴표 혹은 큰 따옴표를 이스케이프해야 해서 불편했었다.
백틱의 탄생으로 이러한 불편함을 해소해주고, 깔끔함을 제공할 수 있다.
화살표 함수
1
2
3
4
5
6
7
8
9
10
11
function add1(x, y) {
return x + y
}
const add2 = (x,y) =>{
return x+y
}
const add3 = (x,y) => x + y
const add4 = (x,y) => (x + y)
기존의 function 함수도 사용할 수 있고, 화살표 함수를 사용할 수 있다.
화살표 함수에서는 function 선언 대신 => 기호로 함수를 선언한다.
위의 코드들은 다 같은 기능을 수행하는 코드이다.
프로미스
노드에서는 주로 비동기 프로그래밍을 한다. 특히 이벤트 방식 때문에 콜백 함수를 자주 사용한다.
ES6부터는 자바스크립트와 노드의 API들이 콜백 대신 프로미스 기반으로 재구성 된다.
프로미스는 규칙이 있다.
-
프로미스 객체를 생성해야 한다. (new Promise로 생성)
-
resolve와 reject를 매개변수로 갖는 콜백 함수를 넣어 준다.
이렇게 만든 promise 변수에 then과 catch 메서드를 붙일 수 있다.
프로미스 내부에서 resolve가 호출되면 then이 실행되고, reject가 실행되면 catch가 실행된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const condition = true
const promise = new Promise((resolve, reject) => {
if (condition) {
resolve('성공')
}
else {
reject('실패')
}
})
promise.then((message) => {
console.log(message)
})
.catch((message) => {
console.log(message)
})
async/await
노드 7.6 버전부터 지원되는 기능. 자바스크립트 스펙은 ES2017.
async/await 문법은 프로미스를 사용한 코드를 한 번 더 깔끔하게 줄여줍니다.
위의 promise 코드를 async/await를 이용해 바꿔보자.
1
2
3
4
5
6
async function findAndSaveUser(Users) {
let user = await Users.findOne({})
user.name = 'zero'
user = await user.save()
user = await Users.findOne({ gender: 'm' })
}
에러를 처리하는 부분이 없으므로 try catch를 넣어준다
1
2
3
4
5
6
7
8
9
10
11
async function findAndSaveUser(Users) {
try {
let user = await Users.findOne({})
user.name = 'zero'
user = await user.save()
user = await Users.findOne({ gender: 'm' })
}
catch (error) {
console.log(error)
}
}
화살표 함수로 만들어보자
1
2
3
4
5
6
7
8
9
10
11
const findAndSaveUser = async (Users) => {
try {
let user = Users.findOne({})
user.name = 'zero'
user = await user.save()
user = await Users.findOne({ gender: 'm' })
}
catch (error) {
console.log(error)
}
}
Reference
- Node.js의 교과서 (조현영 지음)
