[Javascript] Javascript와 ES6

JavaScript의 특징

 - 웹 브라우저에서 동작하는 유일한 프로그래밍 언어

 - 인터프리터 언어

 - 크롬 V8엔진 같은 모던 JS엔진은 인터프리터 + 컴파일러 장점 결합 => 처리속도 느리다는 인터프리터의 단점 극복.

 

 

ES6 주요 특징

1. const, let (Block Level Scope)

before es6.

var

- 함수 레벨 스코프 

- 변수의 선언과 초기화가 동시에 일어남

=> 선언 이전에 참조시, undefined 출력 (에러가 안뜸)

- 할당 전에 변수를 참조해도 undefined가 출력.

  (호이스팅이 일어나기때문에)

console.log(name) // undefined

var name = 'bae'

 

after es6.

let, const

- 블록 레벨 스코프

- 선언과 초기화 단계가 나누어짐. 스코프에 변수를 등록은 하지만, 초기화 단계는 변수 선언문에 도달해야 이루어지므로

=> 선언 이전에 참조시, TDZ에 빠져 reference Error 발생

console.log(name) // Reference Error

let name = 'bae'

2. Template Literals

문자열 중간에 변수나 함수호출 등 삽입할때 + '' 조합 사용 안해도 됨.

let name = 'bae';

// Before es6
console.log("Hi, I am" + name + '.');

// After es6
console.log(`Hi, I am ${name}.`);

3. Arrow Functions

화살표 함수가 등장하면서 코드 양을 줄일 수 있게됨

 

규칙1. 화살표함수가 전달받는 인자가 1개가 아닌, 2개 이상인 경우 괄호 사용

규칙2. 화살표함수 내용에 한줄이상의 코드를 작성하려면 => 중괄호와 return 사용

 

4. Spread Operator

- Spread 연산자는 배열이나 객체의 속성을 펼쳐서 사용할 수 있게 해준다.

- ★ES6에서 객체나 배열의 깊은 복사를 위해 사용되는 대표적인 방법이다. 

 

cf. 깊은복사 vs 얕은 복사

얕은복사는 참조값을 복사 (즉 복사본을 만드는 것이 아니라 참조값을 통해 객체를 공유)

깊은복사는 값을 복사 (독립적인 메모리에 값 자체를 할당하여 생성, 즉 객체의 복사본을 만든다.) 

 

ES5 에서는 객체 프로퍼티를 다른 객체에 복사하는 방법은

   [1] Object.assgin() 활용

   [2] 수동으로 단일로 접근하여 복사

하는 방법이 있다.

 

 

- ES5의 Object.assgin()(객체), apply() (배열)를 대체한다.

// ES5
var person = {
    name: 'bae',
    age: 28
};

// ES5 - 1. Object.assgin() 활용 
var updatedPerson = Object.assign({}, person, {
    age: 25,
    gender: 'male'
});

// ES5 - 2. 수동으로 복사
var updatedPerson = {
    name: person.name,
    age: 25, // 새로운 값으로 업데이트
    gender: 'male'
};

console.log(person); // { name: 'bae', age: 28 }
console.log(updatedPerson); // { name: 'bae', age: 25, gender: 'male' }


// ES6 - Spread 연산자
const person = {
    name: 'bae',
    age: 28,
}

const updatedPerson = {
    ...person,
    age: 25,
    gender: male;
}

console.log(person) // { name: 'bae', age: 28 }
console.log(updatedPerson) // {name: 'bae', age: 25, gender: male }

5. Rest Parameter

spread 연산자와 똑같이 생겼지만, 반대의 역할을 한다.

=> 즉, 개별 요소를 하나의 배열로 만들어 주는 역할

 

주로 함수의 파라미터를 동적으로 처리할때 유용하다고한다.

함수에서 개수가 정해지지 않은 여러 인자들을 배열로 처리하게 해줌

function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}


console.log(sum(1, 5, 8)); // 14
console.log(sum(1, 2, 3, 4, 5)); // 15

 

 

6. Destruturing Assginment

'구조분해할당'

객체와 배열로부터 프로퍼티를 쉽게 꺼낼 수 있는 문법

// 이렇게 객체가 있다고 가정
const person1 = {
	name: 'bae',
    age: 28,
    gender: male,
    phoneNumber: '010-0000-0000',
}

// ES5
var name = person.name;
var age: person.age;
var gender: person.gender;


// ES6
let { name, age, gender, phonNumber } = person;

=> 객체 안의 프로퍼티를 가져오는 코드가 확실히 간결해지는것을 볼 수 있다.

7. Promise

자바스크립트의 비동기 콜백지옥을 해결하기 위해 나온 객체.

내용은 실행되었으나 결과를 아직 반환하지 않은 객체이다.

pending상태, 이행상태, reject상태 이렇게 3가지 상가 있다.

 

cf. 콜백지옥: 콜백함수를 전달하는 과정이 반복되어 가독성이 떨어질 정도로 깊어지는 현상. 주로 이벤트 처리나 서버 통신과 같은 비동기 작업 수행을 위해 콜백지옥이 자주 등장했다고 한다.

 

8. Class

자바스크립트는 프로토타입 기반 객체지향 언어이다.

ES5에서는 생성자 함수, 프로토타입, 클로저를 사용해 상속 및 캡슐화의 개념을 구현할 수 있었다.

 

ES6부터는 다른 객체지향 언어처럼 class 키워드를 사용하여 클래스를 정의할 수 있다.

getter, setter를 활용한 필드값 조회 및 할당, extends 키워드를 사용하여 상속기능 등이 가능 

 

9. Module

처음으로 모듈에 대한 표준이 도입되었고, 그 이전에는 CommonJS 등의 방식의 모듈시스템 사용.

- export, import등을 활용해 JS파일 자체가 모듈이 되어, 다른 모듈에서 가져오거나 내보낼수있다.

- 생성한 js모듈을 브라우저가 인식할수있어야 하므로 script 태그에 type="module"을 지정한다.

 

=> 모듈을 사용할 수 있게 되면서부터, 재사용 가능 코드를 캡슐화 할 수 있게 되었다.

=> 파일단위의 모듈 스코프를 외부에서 사용 가능하게 되었다.

ES8

Async, Await 

Callback과 Promise 처럼 비동기 처리에 쓰이는 문법이다.

Callback과 Promise보다 직관적이고, 이전 문법에서 나왔던 꼬리에 꼬리를 무는 코드가 나오는 단점을 해결하였다.

 

하지만 Async/ Await 문법은 Promise와는 달리 에러 헨들링 기능이 없기 때문에 Try~ catch 문을 활용해 에러 핸들링을 해야한다고 한다.