ES6 기능 정리(ECMAScript 6)

ECMA라는 것은 표준화된 JavaScript를 만들기 위해 만들어진 사양을 의미 합니다.

그에 따른 버전인 ES6 버전에 대해서 간단하게 내용을 요약하여 보았습니다.

 

1. 변수 선언 방법의 변화(let, const)

 - let 은 블록 범위이며 값이 지정되어도 값을 바꿀 수 있습니다.

 - const도 블록 범위로 사용 되지만 값은 바꿀 수 없는 상수 입니다.

var a = 1
if(1 == 1){
    var a = 234  //함수 내부에 선언되지 않았으므로 글로별 변수와 대체
    console.log(a)  //234
} 
console.log(a)  //234

//////////////////////////////////////////////////
let b = 1
if(1 == 1){
    let b = 234  //if 조건문에서의 블록화
    console.log(b)  //234
} 
console.log(b)  //1

//////////////////////////////////////////////////
const c = 3
if(1 == 1){
    const c = 234  //error!
    console.log(c)
} 

 

2. 템플릿 리터럴(Template Literal)

 - 기존에 문자열을 합치는 경우에 더하기(+) 연산자를 통해 하였습니다.

 - 백틱(숫자 1 옆에있는 기호)을 활용하여 간결하게 표현 할 수 있습니다.

 - 표현하고자 하는 데이터는 달러$ 기호와 중괄호{} 를 통해서 표기하며, 간단한 연산도 가능 합니다.

//기존 문자열 출력 방식
let data = 1234
let desc = 'data is '
console.log(desc + data)

//변경
let data = 1234
let desc = `data is ${data}, ${data * 3}`
console.log(desc)

 

3. 반복문 (for in, for of)

let array = ['a', 'b', 'c']
for(let i in array){
    console.log(i)   //0, 1, 2 (인덱스 값이 출력 됩니다.)
}

for(let i of array){
    console.log(i)  //a, b, c
}

 

4. 기본 매개변수(Default Parameters)

 - 함수에서 기본 값을 지정하여 줄 수 있습니다.

function fun(a = 5, b = 5, c = 10) {
    return a + b + c
}
console.log(fun()) // 20이 출력 됩니다.

 

5. 화살표 함수(Arrow Function)

 - 화살표 함수는 기존의 함수를 간결하게 표현 해 주는 기능 입니다.

 - 일반함수와 화살표함수와의 가장 큰 차이는 일반함수는 자신만의 데이터를 가질 수 있는 반면, 

   화살표 함수는 그렇지 못하다는 점 입니다.

function fun(arg){
    console.log(arg)
    return arg
}
fun(1) //1이 출력됩니다.

let fun2 = (arg)=>{
    console.log(arg)
    return arg
}
fun2(1)   //1이 출력됩니다. 

//////////////////////////////////////////////////

function fun(arg){
    this.name = arg
}
new fun(1234).name  //1234가 출력됩니다.

let fun2 = (arg)=>{  //new 연산자를 통한 생성은 불가능
    this.name = arg
}
new fun2(1234).name  //에러발생!

 

6. 객체 정의 방법(Define Object)

 - 객체를 정의하는 방법이 편리 해 졌습니다.

 - 무조건 key : value로 정의하던 부분을 생략을 해서 사용 할 수 있습니다.

let fun = {
    name : 'picachoo',
    print(){  // 콜른(:)없이 표기 가능
        console.log(this.name)
    }
}
fun.print()  //picachoo

let width = 100
let height = 200
let position = { width, height }  //콜른(:)없이 표기 가능
console.log(position)  // { width : 100, height : 200 }

 

7. 객체의 복사(Copy Object)

 - Object 객체에 assing이라는 함수가 추가 되었습니다.

 - 배열, 객체 등 참조하는 값을 복사 할 때 얕은 복사를 할 수 있습니다.  * 수정 : 2022-05-20

let array = [1,2,3,4]
let new_array = Object.assign([], array)  //기본값에 복사할 값을 넣습니다.
                                          //기본값에 0,0,0,5,6이 있으면 위 array의 1,2,3,4가 0,0,0,0을 대체하고
                                          //나머지 5,6이 뒤에 추가 됩니다.                                          
array[0] = 123
console.log(array)  //123, 2, 3, 4
console.log(new_array) //1, 2, 3, 4  -> array의 변경에 대해 영향받지 않음.

 

8. 계산된 속성 이름(Computed Property Name)

 - key와 value값을 가진 객체는 key값을 이제 동적으로 부여 할 수 있습니다.

 - 한번 동적으로 부여된 key 값은 변경 할수는 없습니다.

let KEY = 'name'
let data = {
    [KEY] : 'value',  //동적으로 적용 가능
    [`change_${KEY}`] : 'value2'
}
console.log(data)  // { name : value, change_name : value2 }

KEY = 'change?'  
console.log(data) //이미 할당이 끝난 값은 변경 불가능  { name : value, change_name : value2 }

 

9. 구조분해 할당(Destructing Assignment)

 - 데이터를 할당하려면 대입 연산자를 통해서 할 수 있었습니다. 예)  var a = 1; var b = a;

 - 데이터를 할당 하는 기능을 간결하게 할 수 있게 되었습니다.

 - 배열 값은 대괄호[]를 사용해서 간단하게 할당 할 수 있으며, 객체값은 중괄호{}를 사용해 할당 할 수 있습니다.

//일반적인 사용 방법
let arr = ['1', '2', '3']
let [one, two, three] = arr
console.log(one) // 1
console.log(two) // 2
console.log(three) // 3

let [, , wow] = arr  //첫번째, 두번째를 빈값으로 선언
console.log(wow)  //3 


//////////////////////////////////////////////////
//값 할당(서로 바꾸기)
let num = 123;  
let text = 'hi'; 
[num, text] = [text, num]
console.log(num, text)


//////////////////////////////////////////////////
//객체의 값에 대해 적용
let data = {width : 100, height : 200}
let {width, height} = data
console.log(width)  //100
console.log(height)  //200

//////////////////////////////////////////////////
//다양한 변환
let param = {
    jsn : {
        name : 'hello',
        number : 1543
    },
    arr : [
        {arr_name : 'world', index : 4567},
        {arr_name : 'world record', index : 5513},
    ],
    param_text : 'im param_text'
}

let {jsn : {name : re_name}, arr : [{arr_name : new_name}], param_text} = param

//re_name은 param.jsn.name을 변환하여 별칭을 준 값
//new_name은 param.arr배열의 첫번째 arr_name을 변환하여 별칭을 준 값
//param_text는 param.param_text의 값을 변수명 그대로 사용한 값(별칭부여X)
console.log(re_name, new_name , param_text)

 

10. 전개구문 연산자(Spread operator)

 - 자바에서의 가변인자와 비슷한 기능 입니다.  * 앗차..자바를 안써보신분도 있겠구나..

 - 받으려는 데이터를 n개(가변)로 하여 받을 수 있습니다.

//일반 사용법
function numbers(...arg){
    console.log(arg)
}
numbers(1,2,3,4,5)  // 1,2,3,4,5  -> 배열 타입 입니다.


//////////////////////////////////////////////////
//대입하기
let number = [1, 2, 3, 4, 5]
let [one, two, ...nums] = number

console.log(one) // 1
console.log(two) // 2
console.log(nums) // [3, 4, 5]


//////////////////////////////////////////////////
//객체 복사
let obj1 = { string: 'bar', int: 42 }
let obj2 = { ...obj1 }
console.log(obj1, obj2)  


//////////////////////////////////////////////////
//배열 복사
let arr = [1,2,3,4,5]
let arr2 = [...arr]
arr[0] = 100
console.log(arr)  // 100,2,3,4,5
console.log(arr2) // 1,2,3,4,5

 

11. 클래스(Class)

 - 클래스라는 기능은 1개의 영역 안에 다양한 함수, 변수 등을 집어넣고 사용 할 수 있게 해주는 기능 입니다.

 - 클래스는 new 연산자를 통해서 생성 할 수 있으며, 호이스팅이 되지 않으므로 유의하여야 합니다.

 - 클래스에서 함수는 function을 제거하고 선언 합니다.

 - 클래스에서 static 함수는 new로 생성된 변수에서 접근하는 것이 아니라 클래스에서 바로 접근해야 합니다.

 - 클래스는 다른 클래스를 상속 받아서 기존 클래스의 기능을 이어받을 수 있습니다.

//클래스 사용 방법
class Building {
    constructor(width, height) {
        this.width = width
        this.height = height
    }
    log(){  //function을 생략하고 함수를 사용
        console.log(this.width, this.height) 
    }
    static print(num){  //static 함수
        console.log(num) 
    }
}

let apt = new Building(100, 200)
console.log(apt.width, apt.height) //100, 200
Building.print(200)  //200  -> 오류 발생 : apt.print(200)


//////////////////////////////////////////////////
//상속받아 사용하는 방법
class Apart extends Building {  //상위클래스의 생성자를 구현해야 함.
    constructor(width, height) {  
        this.width = width
        this.height = height
    }
    //log, print 함수를 지니고 있음.
}

let apt2 = new Apart(100, 200)
console.log(apt2.width, apt2.height) //100, 200
Apart.print(200) 

 

12. 모듈(Modules)

 - export, import 를 통해 나누어서 개발된 파일(*.js)간의 관계를 유지하여 줍니다.

 - js파일에서 전달할 기능은 export, 사용하는 곳에서는 import를 선언하여 서로의 위치를 참조하게 합니다.

 - 기존에 html파일에서 <script />테그로 사용하는 경우 속성값인 type을 module로 해야 합니다.

* test.js
export const test_number = 1234

* test2.js
import * as testCode from "./test.js"

console.log(testCode.test_number)  //1234

 

13. 약속(Promise)

 - 비동기 프로세스의 순서를 보장할 때 사용합니다.

 - Ajax나 특정 파일 입출력 행위에 대해서 순서가 보장 될 때 주로 사용 합니다.

let prom = (num) => {
    return new Promise((res, fail) => {
        if (num > 4) {
            res(num)  //성공이면,
        } else {
            fail("err")  //에러발생
        }
    })
}

prom(5)
    .then(val => console.log(val)) // 5 출력
    .catch(err => console.log(err))

 

이상으로 ES6 문법에 대해서 간단하게 정리하여 보았습니다.

그러나 ES6 문법의 거의 대부분은 익스플로러(Explorer)에서 동작하지가 않습니다.. 그렇기 때문에 아직도 많은 수의 웹 개발자 분들이 ES6문법의 해택을 받지 못하고 있습니다.

하루 빨리 대한민국의 생태계가 빨리 바뀌어 익스플로러가 종료 되었으면 하는 바램 입니다.

궁금한 점이나 틀린 내용이 있으면 언제든 연락 주세요! :)