💙 들어가며
ES6에서 ES5의 문제점을 보완한 것들에 대해서 배워보자!
✏️ 학습내용 정리
#ES6에 새로 추가된 내용들
💡 왜 ES라고 할까?
표준 자바스크립트 버전을 ECMAScript라고 하기 때문에 줄여서 ES라고 한다.
ES의 버전6를 ECMAScript 2015라고도 한다.
ES5의 기능을 그대로 가지고 오면서 ES6로 넘어왔기 때문에
ES5의 내용을 충분히 다루고 드디어 6로 넘어오게 되었다.
ES6로 넘어오면서 많은 것들이 달라졌다.
어떤 것들이 추가되었을까?
#ES6에서 크게 달라진 것1
값: 2진수와 8진수를 값으로 쓸 수 있게 되었다..!(드디어..)
2진수는 0b를 앞에 붙이고 8진수는 앞에0을 붙이는 방법으로 구분한다.
#ES6에서 크게 달라진 것2
변수를 선언하지 않아도 변수를 사용할 수 있던 ES5
지역변수 개념인 let이 생겼다!
💡 그러면 전역변수를 쓰고 싶으면 var를 쓰면 되나요?
var의 사용은 자제하자. 전역변수를 사용하고 싶다면 window.를 사용하자.
var는 지역변수의 개념으로 사용할 수가 없었다.
블록으로 지역을 구분해보아도 먹히지 않았고
for문 안에서 사용한 i를 var로 선언하면 for문 밖에서도 출력이 되었다.
💡 참고: 아래는 호이스팅에 대한 이야기
let을 사용하면 변수가 중복으로 선언되지 않기 때문에
위에서 선언한 변수를 덮어쓰기 할 수 있었던 가능성을 원천배제할 수 있게 되었다.
var랑 let을 같이 쓰면 어떨까?
💡 let x와 var x를 같이 쓰면 어떻게 될까?
{
let x = 50; // console에서 오류가 난다.
var x = 30;
console.log(x);
}
console.log("-----------------------------------")⭕ 출력결과:
이제 드디어 let 덕분에 중복된 변수 선언을 할 수 없게 되었다!
let이 var보다 먼저 선언되었든 나중에 선언되었든 상관없이
이제 중복선언 불가함!
다시 한 번 비교해보자면
var는 지역화가 전혀 의미가 없다.
💡 아래 지역의 y가 선언없이 출력될까?
{
let x = 100;
var y = 50;
console.log(x, y);
}
{
y = 200;
console.log(y);
}
console.log("-----------------------------------")⭕ 출력결과:
위의 지역에 선언한 y인데도 수정이 되고 출력도 된다.
지역화가 전혀 의미가 없다.
심지어 함수 안에 들어간 지역변수를 var로 해도 마찬가지이다.
💡 for문 안에 i가 출력될까?
{
for (var i = 0; i < 5; i++)
console.log(i)
console.log("반복문이 끝났는데도 i가 나올까?", i);
}⭕ 출력결과:
출력된다... 이 의미는 곧 우리가 for문 안에 i를 다 공유하고 있었다는 뜻..
var의 위험성을 다시 한 번 깨닫게된다.
이제 for문안의 것도 다 let을 써서 지역변수화 시키자.
#ES6에서 크게 달라진 것3
const 변수 등장! (상수형 변수)
더 이상 값을 변하지 않게 처리할 수 있는 const도 생겼다!
그러나 const라고 할지라도 배열이나 객체인 경우
안의 내용을 수정할 수는 있다.
💡 수정이 될까?
//변수가 달라지는 것에 대해서는 const가 되고
//그 안쪽의 내용이 달라지는 것은 상관이 없다.
const balls = [
new Ball(100, 100, "rgba(0,0,0,0.5)"),
new Ball(200, 100, "rgba(0,0,200,0.5)"),
new Ball(300, 300, "rgba(200,0,0,0.5)")
];
balls[2] = new Ball(200, 200); //const라고 해도 수정이 된다...
console.log(balls[2]);⭕ 출력결과:
const인데도 balls[2]의 값이 변경되었다.
#ES6에서 크게 달라진 것4: Template String
백틱이 등장하며 여러 줄의 문자열을 쉽게 표현할 수 있게 되었다.
원래 문자열은 내려쓰기를 할 수가 없다. (한줄단위이기 때문)
그래서 내려쓰기를 할 때 한 칸 띄어쓰고 역슬래시를 넣어주는 방법으로
여러 줄의 문자열을 다루는 방법도 사용해보고
중간에 변수를 넣기 위해서 문자열+를 사용한 방법도 많이 사용했다.
하지만, 백틱(`)이 생기면서 문자열에 변수를 대입하고 내려쓰기 하는 것이 더 쉬워졌다.
💡 백틱(`)은 어디에 있을까?
키보드 esc밑에 물결표 옆에 보면 싱글쿼터(')와 비슷하게 생긴 백틱(`)이 있다!
백틱을 사용하면 문자열 안에 변수를 넣을 때 훨씬 편리하다.
문자열을 사용하면 변수와 문자열을 구분하여 잘 표시해주었어야 했다.
하지만 백틱을 사용하면 문자열의 구조와 상관없이 변수를 바로 넣을 수 있다.
코드로 실험해보자.
💡 문자열 안에 변수를 넣어서 활용해보자.
let title = "ES6";
let color = "red";
let className = "note";
//기존에 문자열을 다루던 방법 더블쿼터를 두 번 쓸 수 없어서 바깥은 싱글쿼터로 처리
let template = '<section class="?"><h1 style="color:"></h1></section>';
//변수를 넣을 때는 +를 사용
let template1 = '<section class="' + className + '"><h1 style=color:"' + color + '";>' + title + '</h1></section>';
//백틱 사용
let template2 = `<section class=${className}><h1 style=color:"${color}";>${title}</h1></section>`;
console.log(template1);
console.log(template2)⭕ 출력결과:
문자열+를 사용하면 '+변수+'와 같은 식으로 처리하던 것을
백틱을 사용해서 훨씬 단순하게 처리할 수 있게 되었다.
그리고 내려쓰기를 하기에도 몹시 편해졌다.
백틱을 사용하면 블록처럼 콘솔에서 내려쓰기한 모양대로 출력하기 훨씬 쉽다.
내려쓸 때마다 ( \)를 해주지 않아도 된다. 진짜로 그냥 내려쓰기만 하면 된다.
💡 내려쓰기를 해보자.
//기존에 문자열을 다루던 방법 더블쿼터를 두 번 쓸 수 없어서 바깥은 싱글쿼터로 처리
let template = '<section class="?"><h1 style="color:"></h1></section>';
//변수를 넣을 때는 +를 사용
let template1 = '<section class="' + className + '"> \
<h1 style=color:"' + color + '";>' + title + '</h1> \
</section>';
//백틱 사용
let template2 = `
<section class=${className}>
<h1 style=color:"${color}";>${title}</h1>
</section>`;
console.log(template1);
console.log(template2);⭕ 출력결과:
백틱을 사용하면 다음과 같이 블록으로 처리하기도 좋다.
내려쓰기도 매우 가뿐!
만약 문자열 안에 이스케이프 문자가 포함될 경우에는 어떻게 해야 할까?
이것도 백틱에서는 String.raw라는 것을 통해 별도로 처리할 수 있다.
💡 문자열 안에 포함되지 않는 문자들을 포함하려면?
//변수를 넣을 때는 +를 사용
let template1 = '<section class="' + className + '"> \n \\" \
<h1 style=color:"' + color + '";>' + title + '</h1> \
</section> ';
//백틱 앞에 String.raw를 붙여넣으면
//앞에 이스케이프 문자도 일반 문자열로 출력된다.
let template2 = String.raw`
<section class=${className}> \n \\'
<h1 style=color:"${color}";>${title}</h1>
</section>`;
console.log(template1);
console.log(template2);⭕ 출력결과:
String.raw를 백틱 앞에 쓰면 문자열 안에 포함된 모든 것들을
날것 그대로 출력해준다.
(이스케이프 문자로 인식도 하지 않고 문자열 안에 포함되지 않는 문자도 쉽게 출력가능!)
#ES6에서 크게 달라진 것5: 향상된 JSON 객체표현식#1
향상된 JSON 객체 표현식
키값과 값으로 넣을 변수명이 똑같다면 변수명을 따로 적을 필요가 없다.
코드로 한 번 찍어보자.
💡 향상된 JSON 표현식을 써보자
console.log("----------------향상된 JSON 표기법1-------------------")
{
let kor = 30;
let eng = 20;
let math = 90;
let exam1 = { kor: kor, eng: eng, math: math }; //기존버전
let exam2 = { kor, eng, math }; //향상버전
console.log(exam1);
console.log(exam2);
}⭕ 출력결과:
동일하게 출력됨을 확인할 수 있다.
함수도 훨씬 간단하게 표기할 수 있게 되었다.
애초에 소괄호()가 함수를 의미하는 것이니 function이라는 워드 자체를 없앴다.
훨씬 간편하고 좋다!
💡 향상된 JSON 객체표기법(함수)
console.log("----------------향상된 JSON 표기법1-------------------")
{
let kor = 30;
let eng = 20;
let math = 90;
//기존버전 함수변수 넣기
let exam1 = {
kor: kor, eng: eng, math: math,
total: function () {
return this.kor + this.eng + this.math;
},
avg: function () {
return this.total() / 3;
}
};
//향상된 버전 함수변수 넣기
let exam2 = {
kor, eng, math,
total() {
return this.kor + this.eng + this.math;
},
avg() {
return this.total() / 3;
}
};
console.log(exam1);
console.log(exam2);
}⭕ 출력결과:
두 식 모두 똑같이 나오고 있음을 알 수 있다.
기존 버전보다 향상된 버전일 때 함수의 이름까지 인식함을 알 수 있다.
function()이 아니라 total()이니까 이름있는 함수가 되었음!
#ES6에서 크게 달라진 것6: 향상된 JSON 객체표현식#2
자바스크립트는 타입을 기반으로 하는 녀석이 아니기 때문에
인터페이스를 정의하거나 사용할 수가 없었는데,
이를 위해서 JSON을 변경하였다.
속성명을 정의할 때 변수가 속성(key값)으로 들어갈 수 있게 되었다.
대괄호를 활용하면 변수가 key값으로 올 수 있다.
그런데 이렇게 되면 발생하는 문제점이 있다.
변수명을 key로 사용하는 것의 문제점을 알아보기 위해
일단 변수를 key값으로 사용해보자.
💡 대괄호를 쓰면 변수를 key값으로 쓸 수 있다고?
console.log("----------------향상된 JSON 표기법2-------------------")
{
let kor = 30;
let eng = 20;
let math = 90;
let aa = "com";
let exam = {
kor, eng, math,
total() {
return this.kor + this.eng + this.math;
},
avg() {
return this.total() / 3;
},
[aa]: 50
};
console.log(exam.com);
}⭕ 출력결과:
aa라는 변수가 key값으로 들어갔고 값을 대입할 수 있게 되었다.
그런데 변수명이 쉽게 바뀔 수 있기 때문에
프로그램을 일관적으로 유지하기가 어려워질 수 있겠다.
💡 이렇게 하면 출력이 될까?
let kor = 30;
let eng = 20;
let math = 90;
let aa = "com";
let exam = {
kor, eng, math,
total() {
return this.kor + this.eng + this.math;
},
avg() {
return this.total() / 3;
},
[aa + "1"]: 50
};
console.log(exam.com1);⭕ 출력결과:
대괄호 안에서 변수가 바뀔 수 있다..
그럼 이 위험한 것을 왜 가능하게 했을까?
나중에 심볼이라는 녀석을 배우게 될 것인데
자바스크립트가 객체지향을 지원하게 되는데,
다형성을 구현하기 위해 이런 기능을 도입하게 되었다.
💡 다형성을 구현하기 위한 방법: 객체의 key값으로 변수명이 올 수 있다.
형식명칭을 사용할 수 없기 때문에 심볼을 이용해서 다형성을 구현했음
심볼을 사용하기 위한 목적으로 사용하는 것이란 점만 기억하자.
그러니 이렇게 사용할 수 있지만,
이렇게 사용하기 위한 용도가 아니라는 점만 양지하자.
#ES6에서 크게 달라진 것7: Object Destructuring#1
변수를 선언하는 방법이 새로 생겼다.
중괄호를 묶어서 옆에 객체를 써주면 객체의 지역변수를 뽀개서
각각 변수로 선언해주는 Object Destructuring 기능이 생겼다!
얼마나 편해졌는지 코드로 직접 찍어보자. 일명 객체뽀개기!
✅ 객체는 구조화되어있기 때문에 뽀개기라는 직관적인 단어를 사용하면 더 잘 와닿는 것 같다.
let {kor, eng} = exam;에서 연산 부분은 중괄호{}이다!
💡 기존 Destructuring vs 향상된 Destructuring
console.log("----------------Object Destructuring #1-------------------")
{
let exam = { kor: 10, eng: 20, math: 30 };
console.log(exam.kor, exam.eng);
// let kor = exam.kor;
// let eng = exam.eng;
let { kor, eng } = exam;
console.log(kor, eng);
}⭕ 출력결과:
exam.kor라고 출력하나 객체 뽀개기를 통해 얻은 kor, eng라고 출력하나 동일한 값이 출력된다.
객체의 지역변수를 각각 변수로 선언하는 방법이 훨씬 단순화되었다.
exam에 없는 변수도 객체 뽀개기 할 때 넣을 수 있으나
그러면 객체에 포함이 되는 것일까?
💡 com이라는 변수가 추가될까?
let exam = { kor: 10, eng: 20, math: 30 };
console.log(exam.kor, exam.eng);
let { kor, eng, com = 10 } = exam;
console.log(kor, eng, com);
console.log(exam.kor);
console.log(exam.com);
console.log(com);
console.log(exam);⭕ 출력결과:
객체 안에는 com이라는 속성과 값이 추가되지 않는다.
객체와 별개로 com이라는 지역변수가 따로 생겼다.
그럼 객체의 속성명을 변경할 수도 있을까?
기존의 방법대로 별도의 지역변수를 선언해서 넣어야 할까?
💡 exam.kor를 korean이라는 지역변수로 선언하고 싶다.
let exam = { kor: 10, eng: 20, math: 30 };
console.log(exam.kor, exam.eng);
// let korean = exam.kor; //기존방법
let { kor: korean } = exam; //객체뽀개기 사용!
console.log(korean);⭕ 출력결과:
객체뽀개기를 사용해서 객체의 속성의 이름도 변경하면서 지역변수로 선언하였다.
여기서 헷갈리지 말아야 할 점은 변수명이 kor이 아니라 korean이라는 점이다.
그럼 객체 안에 객체가 있을 때 한 번에 뽀갤 수도 있을까? 가능하다!
💡 이중구조의 객체 뽀개기!
//이중구조 객체 exam (안에 student 속성이 객체이다.)
let exam = {
kor: 10,
eng: 20,
math: 30,
student: {
name: 'newlec',
phone: '010-1111-2222'
}
};
console.log(exam.kor, exam.eng);
//TIP: 여기서 변수는 kor이 아니라 korean이다.
let { kor: korean } = exam;
console.log(korean);
//이중구조 뽀개기
//student: 콜론 옆에 오는 것들은 변수들이다
//때문에 그 안에서 또 다시 객체뽀개기를 할 수 있다.
let { kor, student: { name, phone } } = exam;
console.log(kor, name, phone);⭕ 출력결과:
name과 phone만 찍어도 값이 나온다.
※ 객체뽀개기 한 것 뒤에 콜론을 붙였을 때 뒤에 오는 것은 원래 별칭이다.
(또 다른 변수명! 마치 kor --> koreans)
때문에 strudent:aa라고 하면 aa라는 인스턴스 변수에 student의 내용이 담기는 것이고
student: {name, phone}이라고 하면 객체 뽀개기가 되는 것이다.
두 가지의 차이를 잘 기억하자.
배열 뽀개기도 가능할까? 완전 가능!
✅ 배열도 구조화되어있기 때문에 뽀개기라는 직관적인 단어를 사용하면 더 잘 와닿는 것 같다.
let [kor1, kor2, kor3] = kors;에서 연산 부분은 대괄호[]이다!
※단 이번에는 배열이기 때문에 객체처럼 key값이 없고 순서가 있음에 주의하자
💡 배열뽀개기를 해보자.
let kors = [10, 20, 30];
//기존 방법
//let kor1 = kors[0];
//let kor2 = kors[1];
//let kor3 = kors[2];
//배열뽀개기 해보기
let [kor1, kor2, kor3] = kors;
console.log(kor1, kor2, kor3);⭕ 출력결과:
배열뽀개기도 성공!
기존의 방법대로 했다면 3번 해야 할 일을 1번에 처리할 수 있게 되었다.
그런데 배열에는 순서가 있다.
만약에 특정 값만 빼고 변수에 저장하고 싶다면 어떻게 해야할까?
💡 배열의 2,3번째 값만 변수에 저장하고 싶다면?
let kors = [10, 20, 30];
//1번째 값만 건너뛰고 출력하기
let [, kor1, kor2] = kors;
console.log(kor1, kor2);⭕ 출력결과:
1번째 값을 건너뛰기 위해서 빈공간에 쉼표(, )를 넣어주었다.
정상적으로 20과 30만 kor1과 kor2에 담겼다.
만약 이미 선언된 변수가 있을 때
그 변수를 활용하고 싶다면 어떻게 할 수 있을까?
꼭 변수를 선언해서 뽀개는 것만 가능하다고 생각해서는 안된다.
이미 있는 변수를 활용해서 뽀개는 것도 가능하다.
💡 배열 2개를 뽀갤 때 kor1, kor2라는 변수를 돌려쓰기 해보자.
let kors = [10, 20, 30];
let kors1 = [90, 80];
//변수 선언하면서 뽀개기
let [, kor1, kor2, kor3 = 9] = kors;
console.log(kor1, kor2, kor3);
console.log(kors);
console.log(kor3);
//그냥 뽀개기
[kor1, kor2] = kors1;
console.log(kor1, kor2, kor3);
console.log(kors1);
console.log(kors);⭕ 출력결과:
각각의 배열은 그대로 유지하면서 변수를 돌려쓰기 성공!
배열 뽀개기를 사용하면 값들의 위치를 바꾸는 것이 훨씬 간단해진다.
💡 배열안에 값들 순서를 바꿔보자
let kor = 20;
let eng = 30;
//원래 kor, eng의 값 출력하기
console.log(kor, eng);
//왼쪽 배열값에 오른쪽 배열 값을 대입하자
[eng, kor] = [kor, eng];
//그러면 kor, eng의 값이 바뀐다!
console.log(kor, eng);⭕ 출력결과:
kor는 20 → 30으로
eng는 30 → 20으로 바뀌었다.
※ 배열 자체가 바뀌는 것이 아니다.
그냥 지역변수의 값만 바꾼 것이기 때문에 배열을 출력하면 원래 그대로 나온다.
(객체 뽀개기를 해서 나온 애들은 지역변수, 배열과는 유기적 관계가 아니다.)
이중배열 일 때는 어떻게 뽀개야 할까?
💡 이중배열도 쉽게 뽀개보자!
let kors = [[20, 30, 40, 30,], [50, 80, 70, 90]];
//이중배열 뽀개기
let [[kor1, kor2], [kor3, kor4]] = kors;
console.log(kor1, kor2, kor3, kor4);⭕ 출력결과:
이중배열을 뽀개서
첫번째 배열의 [0], [1]값, 두번째 배열의 [0], [1]값을
각각 kor1, kor2, kor3, kor4라는 기존의 변수에 담았다.
기존 변수들을 이용한 뽀개기에
객체뽀개기와 배열뽀개기를 같이 활용해보자.
💡 객체 뽀개기를 할 때 유의할 점
[]; 배열은 독단적으로 한 문장으로 쓸 수 있음
{ }; 객체는 이렇게 독단적으로 한 문장으로 못 씀 (그래서 선언하면서 뽀개기만 가능)
({}); 이렇게 해야 객체를 한 문장으로 독단적으로 쓸 수 있음 (변수 새로 선언 안하고 돌려쓰기 가능)
💡 객체뽀개기와 배열뽀개기를 동시에 적용해보자
let kor1, kor2, eng;
let kors = [10, 20, 30];
let exam = { kor: 20, eng: 30, kors };
({ kor: kor1, eng, kors: [, , kor2] } = exam);
console.log(kor1, eng, kor2);⭕ 출력결과:
객체의 kor, eng값을 가지고 오고 kors의 3번째 값만 kor2라고 이름했다.
💙 마치며
1.
ES5에 비해서 ES6는
훨씬 표현방법이 간단해지고
상식적(?)인 선에서 처리가 가능해졌다.
특히나 인상적이었던 점은 아래와 같았다.
- 지역변수의 등장(let, const)
- 백틱(` ) 사용이 가능해졌다는 점
- 함수를 단순하게 표기할 수 있게 되었다는 점
- 객체뽀개기
이제는 더 이상 var로 인해서 고통받지 않으리..
