🌞 JavaScript의 ES란?, ES5/ES6 문법 차이

⛅ JavaScript의 ES란?

ES는 ECMA Script의 약자
자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었다. 자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데, 이 두 스크립트가 너무 제각각이라, 표준이 필요하게 되었다.

표준을 만들기 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준 기구에 제출하였고 표준에 대한 작업을 ECMA-262란 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었다.
현재는 ES6 ECMA Script6의 규격을 따르고 있다.즉 ECMA 스크립트는 규격, 표준 즉, 스펙을 말한다.

⛅ ES5문법과 ES6문법의 차이

🌧 ES5문법

1.❗배열과 관련해서 새로운 메소드들이 생겼는데 대표적으로 forEach, map, filter, reduce, some, every와 같은 메소드가 생김.이 메소드들은 개발자가 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여주는 효과 있음.
2. object에 대한 getter/setter 지원
3. 자바스크립트 strict 모드 지원(더욱 세심하게 문법 검사)
4. JSON 지원(과거에는 XML을 사용하다가, json이 뜨면서 지원)
5. bind() 메소드가 생겼습니다. (this를 강제로 bind 시켜주는 메소드)

🌧 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파일에서

* 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))