📌 ES란?
"ECMAScript"의 약자. ECMAScript는 JavaScript 언어의 표준화된 버전을 말합니다.. JavaScript는 웹 개발에서 널리 사용되는 프로그래밍 언어이며, ECMAScript는 이 JavaScript 언어의 규격을 정의한 문서입니다. 비교적 최근 문법입니다.
ES5 와 비교해서 ES6에는 javascript를 편리하게 사용할 수 있는 많은 문법들이 도입되었습니다.
📌 탬플릿 문자열
var str1 = "안녕하세요";
var str2 = "반갑습니다";
var greeting = `${str1} ${str2}`;var product = {name:"도서", price:"4200원"};
var message = `제품 ${product.name}의 가격은 ${product.price} 입니다. `var value = false;
var operator1 = `곱셈 ${10*20}`
var operator2 = ` ${value ? '참' : '거짓'} 입니다.`탬플릿 문자열은 작은 따옴표 대신 백틱 ``` 으로 문자열을 표현합니다.. 또한템플릿 문자열에 특수기호 $를 사용하여 변수 또는 식을 포함할 수도 있습니다.
📌 전개 연산자
var array1 = ['one','two'];
var array2 = ['three','four'];
const combined = [...array1, ...array2];var array1 = ['one','two'];
var [first, second, three = 'empty', ...others] = array1;디스트럭처링 구문을 사용하여 array1 배열의 요소를 변수로 추출합니다. 각 변수의 할당은 배열의 순서에 따라 이루어집니다.
first변수는array1배열의 첫 번째 요소인'one'에 할당됩니다.second변수는array1배열의 두 번째 요소인'two'에 할당됩니다.three변수는array1배열의 세 번째 요소로 할당됩니다. 하지만array1배열에는 세 번째 요소가 없으므로 기본값인'empty'가 할당됩니다.others변수는 나머지 요소들을 배열로 할당합니다. 여기서는array1배열에 더 이상 요소가 없으므로 빈 배열[]이 할당됩니다.
결과적으로, 코드 실행 후에는 다음과 같은 변수들이 생성되고 값이 할당됩니다:
first:'one'second:'two'three:'empty'others:[]
이렇게 배열 디스트럭처링을 사용하면 배열의 요소를 각각 개별 변수로 추출하여 사용할 수 있습니다.
func(...args){var[first, ...others] = args;}- 마찬가지로 args의 첫번째가 first에 들어가고 나머지가 others에 들어갑니다.
전개 연산자를 이용한 객체 병합
var obj1 = {one:1, two:2, other:0};
var obj2 = {three:3, four:4, other:-1};
var combined ={
...obj1,
...obj2,
} //{one:1, two:2, three:3, four:4, other:-1 }
var combined ={
...obj2,
...obj1,
}//{one:1, two:2, three:3, four:4, other:0 }두 객체를 병합할 때 중복된 키값들은 마지막에 사용한 객체의 값으로 덮어씁니다.
var {other, ...others} = combined;
// other = 1;
// others = {one:1, two:2, three:3, four:4};객체에서 특정 값을 추출할 때는 추출하려는 키 이름을 맞추고 나머지는 전개 연산자로 선언된 변수에 할당할 수 있다.
📌 가변 변수와 불변 변수
### 가변 변수
let num = 1;
num = num * 3;let으로 선언한 변수는 읽거나 수정할 수 있습니다. 하지만 같은 변수이름으로 재선언 할수는 없습니다.
불변 변수
불변 변수는 값을 다시 할당할 수 없는 것이지 값을 변경할 수는 있다.
const num = 1;
num = 0;해당 코드는 오류가 발생한다.
const arr1 = []
arr1.push(1). //arr = [1]
arr1.splice(0,0,0) // arr1 = [0,1]
arr2.pop(); //arr2=[1]const obj = {};
obj['name'] = '이름';
Object.assign(obj,{name:"새이름"}) // obj = {name:'새이름'}
delete obj.name; // obj = {};변경할 수 없다고 했지만 다음과 같은 편법이 존재합니다. 이는 객체의 값이아닌 주소를 참조하고 있기 때문에 발생하는 현상입니다. 이런것을 무결성 제약 조건에 위배되었다 라고 합니다.
| 가변 내장 함수 | 무결성 내장 함수 |
|---|---|
| push() | concat() |
| splice(s,c,...items) | slice(0,s) |
| .concat(...items, slice(s+c)) | |
| pop() | slice(0,len-1) |
| shift() | slice() |
실제로 실무에서도 가변 변수보다 불변 변수를 더 많이 사용합니다.
📌 클래스
es6 에서는 class 키워드로 클래스를 정의하므로 코드가 훨씬 간결해집니다. java와 같은 언어를 알고 있다면 훨씬 보기 편합니다.
예시 코드
class Shape{
static creat(x,y) { return new Shape(x,y)}
name = "Shape";
constructor(x,y){. //생성자 함수
this.move(x,y)
}
move(x,y){
this.x = x;
this.y = y;
}
area(){
return 0;
}
}
var s = new Shape(0,0);
s.area(); // 0class 키워드로 Shape 클래스를 정의했습니다. 생성자 함수도 추가되었으며 객체가 생성될 때 함께 만들어질 변수나 클래스 변수를 클래스 선언 블록안에 같이 정의할 수 있습니다. 더불어 var let const를 사용하지 않는다는 점도 주의해야 합니다.
구현과 상속
class Circle extends Shape {
constructor(x,y,radius){
super(x,y);
this.radius = radius;
}
area(){
if(this.radius == 0) return super.area();
return this.radius * this.radius;
}
}
var c = new Cirecle(0,0,10);
c.area();// 100extends 키워드를 사용해서 Shape 클래스를 상속할 수 있습니다. 그리고 부모 함수를 참조할 때 super()를 사용합니다. 다만 ES6에서는 다중 상속이나 인터페이스는 지원하지 않습니다.
📌 화살표 함수
화살표 함수는 익명 함수를 선언하여 변수에 대입하는 방법과 유사합니다.
var add = (a, b) => {
return a + b;
}
var add =(a,b) => a+b; //return 문 하나만 있을 때난 {} return 키워드 생략 가능 var addAndMultiple = (a,b) => ({add:a+b, multiply:a*b})객체가 통째로 리턴된다.
이처럼 화살표 함수는 표현식을 간단하게 하고 커링과 같은 디자인 패턴에서 사용되는 함수를 바노한할 때 계단형 함수 선언과 같은 구조가 만들어 지지 않게 해준다는 장점이 있습니다.
function addNumber(num){
return function(value){
return num + value;
}
}
var addNumber = num => value => num + value; 코드가 훨씬 간결해 졌습니다.
또한 화살표 함수는 콜백 함수의 this 범위로 생기는 오류를 방지하기 위해 bind() 함수를 사용합니다.
class MyClass{
value = 10;
constructor(){
var addThis2 = function(a,b){
return this.value+a+b;
}.bind(this);
var addThis3 = (a,b) => this.value + a + b;
}
}- addThis2 : bind함수를 사용하여 this의 범위를 유지하고 있다.
- addThis3 : bind함수가 생략되고 간결해젔다.
📌 객체 확장 표현식과 구조 분해 할당
객체 확장 표현식
var x = 0;
var y = 1;
var obj = {x,y};- 키 값을 생략하면 자동으로 키의 이름으로 키값을 지정한다.
var randomKeyString = 'other';
var combined = {
['one' + randomKeyString] : 'some value',
};([ ])대괄호를 사용하여 표현식을 작성하며 추가하여 계산된 키값을 사용할 수 있다.
var obj2 = {
x,
methodA(){ console.log("A")},
methodB(){ return 0; }
}function 키워드를 생략해서 함수를 선언할 수 있다.
구조 분해 할당
var list = [0,1]
var [
item1,
item2,
item3 = -1,
] = list; //. [0,1,-1][item2, item1] = [item1, item2] - 자리 변경하기
var obj = {
key1 : 'one',
key2 : 'two'
}
var {
key1 : newKey1,
key2,
key3 = 'default key3 value',
} = obj;
console.log(newKey1); // 'one';
console.log(key2); // 'two';
console.log(key3); // 'default key3 value'newKey1이라는 새로운 이름으로 값이 할당되었습니다.key2와 같은 키 값을 가진 값이 할당되었다.key3은obj에 없는것이기 때문에 기본값이 할당된다. 만약key3의 값이obj에 있다면 해당 값으로 덮어씌워진다.
var[ item1, ...otherItem] = [0,1,2];
var{key1, ...others} = {key1:'one', key2:'two'};
//otherItems = [1,2];
//other = {key2:'two'}📌 라이브러리 의존성 관리
이전에는 스크립트를 참조하는 순서가 매우 중요했습니다. 순서가 바뀌면 오류가 발생하기도 했지만 ES6문법에서 많이 개선되었습니다.
import MyModule from './MyModule.js';
import {ModuleName} from './MyModule.js';
import {ModuleName as RenamedModuleName} from './MyModule.js';
function Func(){
MyModule();
}
export const CONST_VALUE = 0;
export class MyClass{};
export default new Fun();- MyModule은 export default 로 지정한 모듈입니다.
- 이름을 맞춰 모듈안의 특정 모듈을 가져올 수 있습니다.
- 모듈의 이름이 충돌할 경우 as를 통해 이름을 변경하여 불러올 수 있습니다.
- export를 사용하여 변수나 클래스를 참조할 수 있습니다.
📌 배열 함수
forEach()
function parse(qs){
var queryString = qs.substr(1); //' queryString = 'banana=10&apple=20&orange=30'
var chunks = queryString.split('&');
var result={};
for (var i = 0;i<chunks.length;i++){
var parts = chunks[i].split('=');
var key = parts[0];
var value = Number.isNaN(Number(parts[1])) ? parts[1] : Number(parts[1]); //숫자가 아닐수도 있기 때문
result[key] = value; // key가 string이기 때문에 이렇게 넣어야함
}
return result;
}forEach()를 사용하면 좀더 간편해 진다.
function parse(qs){
var queryString = qs.substr(1); //' queryString = 'banana=10&apple=20&orange=30'
var chunks = queryString.split('&');
var result={};
chunks.forEach((chunk)=>{
var parts = chunk.split('=');
var key = parts[0];
var value = Number.isNaN(Number(parts[1])) ? parts[1] : Number(parts[1]); //숫자가 아닐수도 있기 때문
result[key] = value; // key가 string이기 때문에 이렇게 넣어야함
});
return result;
}구조 분해를 통해 좀 더 간단하게 변경할 수 있다.
function parse(qs){
var queryString = qs.substr(1); //' queryString = 'banana=10&apple=20&orange=30'
var chunks = queryString.split('&');
var result={};
chunks.forEach((chunk)=>{
var [key, value] = chunk.split('='); //구조 분해
result[key] = value; // key가 string이기 때문에 이렇게 넣어야함
});
return result;
}map()
만약 가변 변수가 아닌 불변 변수만을 사용하려면 map() 함수를 사용하면 됩니다. map은 기존 배열을 건드리지 않고 새로운 배열을 반환하기 때문입니다.
function parse(qs){
var queryString = qs.substr(1); //' queryString = 'banana=10&apple=20&orange=30'
var chunks = queryString.split('&');
var result =chunks.map((chunk)=>{
var [key, value] = chunk.split('='); //구조 분해
return { key, value } // key가 string이기 때문에 이렇게 넣어야함
});
return result;
}reduce()
앞에서 작성한 코드로 얻은 결과 값은 객체가 아닌 배열입니다. 만약 객체를 배열로 변환하고 싶다면 reduce() 함수를 사용하면 됩니다.
function sum(numbers){
return numbers.reduce((total, num)=>total+num,0);
}
sum([1,2,3,4,5,6,7,8,9,10]);두 번째 인자에는 초기값(0)을 전달합니다. 그러면 reduce() 함수는 변환 함수의 첫번째 인자를 이전 결괏값(total) 두번째 인자를 배열의 각 요솟값(1,2,3,4…) 으로 생각하여 순환 할당하면서 함수를 실행합니다.
이때 초기값으로 전달한 0은 total에 할당됩니다.
실무에서 reduce() 함수는 보통 배열의 특정 자료형으로 변환하는데 사용합니다.
function parse(qs){
var queryString = qs.substr(1); //' queryString = 'banana=10&apple=20&orange=30'
var chunks = queryString.split('&');
return chunks.map((chunk)=>{
var [key, value] = chunk.split('='); //구조 분해
return { key, value } // key가 string이기 때문에 이렇게 넣어야함
}).reduce((result, item) => {
result[item.key] = item.value;
return result; //result에 계속 쌓임
},{}); //초기값 선언
}이처럼 reduce는 반환값을 배열에서 객체로 변환시킬 수 있습니다.
