JavaScript ES6 문법 정리
const and let
ES6에서 추가된 변수 선언 방법입니다.
변수 재 선언
var의 경우 변수를 한번 더 선언했음에도 오류가 발생하지 않습니다.
var foo = "foo"
console.log(foo) // foo
var foo = "pee"
console.log(pee) // pee
let의 경우 변수를 한번 더 선언할 경우 오류가 발생합니다. (const의 경우도 마찬가지로 오류가 발생합니다.)
let foo = "foo"
console.log(foo)
let foo = "pee" // Uncaught SyntaxError: Identifier 'foo' has already been declared
console.log(foo)
const 와 let 차이점
let의 경우 값의 재할당이 가능하지만, const에서는 값을 재할당 할 수 없습니다.
let foo = "foo"
console.log(foo)
// let foo = "pee" // Uncaught SyntaxError: Identifier 'foo' has already been declared
// console.log(foo)
foo = "pee"
console.log(foo)
const foo = "foo"
console.log(foo)
foo = "pee" // Uncaught TypeError: Assignment to constant variable.
console.log(foo)
var의 경우 변수 선언이 사용보다 늦어도 오류가 발생하지 않습니다.
console.log(foo) // undefined
var foo = "foo"
const와 let의 경우
console.log(foo) // Uncaught ReferenceError: Cannot access 'foo' before initialization
let foo = "foo"
호이스팅
자바스크립트에서는 소스코드를 실행하기전에 소스코드 평가 과정이라는 것을 거치게 됩니다.
이 때 모든 변수와 함수의 선언을 스코프 최상단으로 올리게 되는데, 이를 호이스팅이라고 말합니다.
위 처럼 var이 undefined로 오류가 발생하지 않고 실행된 이유는 호이스팅 때문인데,
위의 var을 사용한 변수 선언은 실제로 아래와 같이 표현됩니다.
var foo
console.log(foo) // undefined
foo = "foo"
그렇다면 let과 const는 호이스팅이 발생하지 않을까?
let, const도 호이스팅이 발생합니다.
그러나 var 처럼 undefined의 할당은 이루어지지 않고, 변수의 선언만 이루어집니다.
이게 구글링을 하다보면 호이스팅 발생한다는 사람들도 있고 아니라는 사람들도 있는데;;
Javascript 공식문서에서 호이스팅이 발생한다고 설명하고 있습니다.
다른 글들에 속지마시길!
화살표 함수
ES6에서 새로 등장한 함수를 선언하는 방법으로 전통적인 함수표현의 간편한 대안이다. (더 간결하다.)
ES5 함수 선언
var foo = function fooFunction(x) { return x * x }
ES6 화살표 함수 선언
var foo = x => { return x * x }
const(or var or let) 변수명 = (매개변수1, 매개변수2) => { 함수 몸통 }
- 매개변수가 없을 경우 : () (빈 소괄호를 이용)
- 매개변수가 하나일 경우 : 매개변수 (소괄호 생략 가능)
람다식을 아신다면 람다식과 비슷하다고 볼 수 있을 것 같습니다.
템플릿 리터럴
문자열을 연결하기 위해 더하기(+) 연산자를 사용할 필요없이
백틱(`)을 사용하여 문자열 내에서 변수를 사용할 수 있습니다.
이전 문법
function foo(name, age) {
return name + "의 나이는 " + age + "입니다."
}
console.log(foo("찬해형", 27)) // 찬해형의 나이는 27입니다.
템플릿 리터럴 이용
const foo = (name, age) => {
return `${name}의 나이는 ${age}입니다.`
}
console.log(foo("찬해형", 27)) // 찬해형의 나이는 27입니다.
기본 매개변수
매개 변수를 쓰지 않은 경우 함수의 매개변수에 기본값이 정의되어 있다면 기본값을 사용하도록 합니다.
const foo = (age = 5) => {
return 나이는 ${age}
}
console.log(foo()) // 나이는 5
배열 및 객체 비구조화 할당
비구조화를 통해 배열 또는 객체의 값을 새 변수에 더 쉽게 할당할 수 있습니다.
비구조화 할당을 사용하지 않을 경우 각각 변수 생성 후 object의 key에 접근하여 할당해야합니다.
const object = {
chanhae: "찬해",
inho: "인호",
hyeonwoo: "현우",
seungje: "승제"
}
const ch = object.chanhae
const ih = object.inho
const hw = object.hyeonwoo
const sj = object.seungje
console.log(ch)
console.log(ih)
console.log(hw)
console.log(sj)
비구조화 할당을 사용할 경우 코드가 훨씬 간단해집니다.
const object = {
chanhae: "찬해",
inho: "인호",
hyeonwoo: "현우",
seungje: "승제"
}
const {chanhae, inho, hyeonwoo, seungje} = object
console.log(chanhae)
console.log(inho)
console.log(hyeonwoo)
console.log(seungje)
만약 객체 내의 key값과 다른 이름으로 사용하고 싶다면 아래와 같이 합니다.
const {chanhae: ch, inho, hyeonwoo, seungje} = object
console.log(ch)
console.log(inho)
console.log(hyeonwoo)
console.log(seungje)
// 콜론과 함께 사용할 이름 지정.
// 만약 객체의 key값과 다르게 사용하면 undefined가 반환됩니다.
비구조화 할당은 배열에서도 같은 방법으로 적용 가능합니다.
나머지 매개변수 및 확장 연산자
나머지 매개변수
현재 인덱스부터 마지막까지 하나의 변수에 할당하고 싶을 때 사용가능합니다.
const arr = ["찬해", "인호", "승제", "현우"]
const [ch, ih, ...rest] = arr
console.log(ch) // 찬해
console.log(ih) // 인호
console.log(rest) // ["승제", "현우"]
만약 arr의 값이 변경되면 나머지 매개변수 연산을 통해 얻은 배열의 값이 변경될까?
나머지 매개변수 사용
// 배열의 값을 변경하기위해 let 으로 선언
let arr = ["찬해", "인호", "승제", "현우"]
// 나머지 매개변수 이용하여 배열 복사
let [ch, ...rest] = arr
// 승제 자리 찬해로 변경
arr[2] = "찬해"
console.log(arr) // ["찬해", "인호", "찬해", "현우"]
console.log(rest) // ["인호", "승제", "현우"]
let arr = ["찬해", "인호", "승제", "현우"]
rest에 arr 바로 대입
let rest = arr
arr[2] = "찬해"
console.log(arr) // ["찬해", "인호", "찬해", "현우"]
console.log(rest) // ["찬해", "인호", "찬해", "현우"]
나머지 매개변수 연산에서는 arr의 값이 변경되어도 rest배열의 값은 변경되지 않았으므로, 깊은 복사가 일어난것을 알 수 있습니다.
배열을 그대로 변수에 대입할 경우, arr의 값이 변경되면 rest 배열의 값도 변경되었습니다.
전개 연산자
const arr = ["찬해", "인호"]
const arr2 = ["승제", "현우"]
const newarr = [...arr, ...arr2]
console.log(arr) // ["찬해", "인호"]
console.log(arr2) // ["승제", "현우"]
console.log(newarr) // ["찬해", "인호", "승제", "현우"]
배열을 이어 붙일 때 전개연산자를 통해 쉽게 이어붙일 수 있다.
객체에서도 가능!
const obj = {ch: "찬해", ih: "인호"}
const obj2 = {sj: "승제", hw: "현우"}
const newobj = {...obj, ...obj2}
console.log(obj) // { ch: "찬해",ih: "인호" }
console.log(obj) // { sj: "승제",hw: "현우" }
console.log(newobj) // { ch: "찬해",ih: "인호", sj: "승제", hw: "현우" }
프로미스
비동기 코드를 사용할 때 쓰기 좋은 ES6문법입니다.
이전에는 라이브러리로 이용할 수 있었으나, ES6부터 언어 차원에서 지원하게 되었다.
책에서는 ES5에서 기본으로 제공한다고 나와있는데.. 구글링하면 다 ES6부터라고 함;;
스택 오버플로우 문서찾아보니 ES6부터 지원하는게 맞는것 같음!
프로미스를 사용하지 않고 비동기 함수를 수행하는 방법
var async1 = function(param, callback) { callback(param*2); }
var async2 = function(param, callback) { callback(param*3); }
var async3 = function(param, callback) { callback(param*4); }
var start = 1;
async1(start, result => {
async2(result, result => {
async3(result, result => {
console.log(result); // 24
});
});
});
보는것과 같이 callback 함수가 중첩되면서 들여쓰기 때문에 코드 가독성이 매우 떨어집니다.
function async1 (param) {
return new Promise(function(resolve, reject) { // 프로미스 객체 생성, resolve는 성공, reject는 실패
resolve(param*2); // 요청이 성공했을 때 resolve를 보낼 수 있음. 만약 에러가 발생했다면 reject()로 오류전달
});
}
function async2 (param) {
return new Promise(function(resolve, reject) {
resolve(param*3);
});
}
function async3 (param) {
return new Promise(function(resolve, reject) {
resolve(param*4);
});
}
var start = 1;
async1(start)
.then(async2)
.then(async3)
.then(result => {
console.log(result); // 24
})
.catch((err) => {
console.log(err)
});
프로미스 요청은 then 메소드로 비동기 요청을 이어붙일 수 있습니다. 이전 promise가 resolve되었다면 그 다음 promise가 실행됩니다.
여러개의 프로미스 체인중 하나라도 reject되었다면 마지막에 달린 catch()로 내려가서 에러를 처리합니다.
fetch 메서드로 promise 체인 사용해보기
function request() {
fetch('https://api.github.com/orgs/nodejs', {
method: 'GET', // url에 get 요청 보냄.
})
.then(response => { // response 받은 값을 리턴
return response.json();
})
.then(data => { // 리턴받은 값을 로그로 찍음
console.log(data);
});
}
request();
실행가능한 코드는 모두 JSFiddle에서 테스트 했습니다.
Reference
https://velog.io/@kimhscom/JavaScript-%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC
https://velog.io/@recordboy/%EC%A0%84%EA%B0%9C-%EC%97%B0%EC%82%B0%EC%9E%90Spread-Operator
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
https://han41858.tistory.com/11
