[JavaScript] ES6 문법을 간단히 정리해보자.

---

👀 갑자기 이런걸 정리하는 이유

최근 Udemy에서 React.js 강의를 듣고 있다고 블로그에 한 두 번 거론했던 기억이 있다. 그 강의를 들으면서 절실히 느껴지는 것이 기본기였고, 기본기를 다지려 이런저런 방면으로 노력을 하고 있다. 그 중 리액트로 웹 애플리케이션을 작성하는 데에 있어서 가장 기본적이고 가장 중요한 것이 '차세대 JavaScript 문법 (ES6)'이라는 생각이 들었다.

 

그래서 동영상 강의를 비롯해서 구글을 돌아다니기도 하고, 책도 읽어가며 나름대로 정리해 본 내용을 블로그에도 포스팅을 해놓아야겠다는 생각이 들어서 이렇게 갑작스럽게 ES6의 핵심적인 문법들을 올리게 되었다. 부족한 내용도 있고, 아직은 어떻게 해야 잘 활용할 수 있는지 잘은 모르겠지만, 혹시라도 부족한 부분이, 더 덧붙여야 할 부분이 있다면 부담갖지 말고 댓글로 조언을 해달라고 부탁드리고 싶다.

 

---

let과 const, 새롭게 변수와 상수를 선언하고 정의하기

var

기존 JavaScript에서는 변수를 선언할 때 아래와 같이 var 키워드를 통해서 선언하였다.

하지만 var의 경우 변수의 중복 할당 문제에서 자유롭지 못하다.

위와 같은 경우 console에 찍히는 값은 맨 처음 할당한 값인 1이 아닌 반복문에서 의미없이 10번이나 할당한 2다.

let

ES6 문법인 let 키워드 변수 선언은 이런 중복 할당 문제에서 자유롭다.

위와 같은 경우에는 코드가 실행조차 되지 않거나 JSBin에서는 처음 할당된 값인 1이 console에 출력된다.

Const

const 키워드는 Kotlin과 Python 같이 비교적 타입 추론이 강력한 언어들에서 쓰이는 val 키워드와 유사하게 '상수'의 개념이다.

const 키워드를 통해 선언된 상수는 할당된 값을 추후에 변경할 수 없다.

ES6에서는 후술할 화살표 함수처럼 함수 또한 const 키워드를 통해 상수로 선언할 수 있기 때문에 중요하다고 볼 수 있다.

 

 

화살표 함수 (Arrow Function)

화살표 함수의 용법은 별도로 포스팅을 먼저 해두었기 때문에 링크로 대체하겠다. 머쓱... ^^;;;

[JavaScript] 화살표 함수(Arrow Function) 기본 용법 정리

대신에 화살표 함수가 갖는 특징을 이곳에 따로 정리해보도록 하겠다.

화살표 함수는 익명 함수 (Anonymous function) 다.

익명 함수란 함수명 대신 변수(상수)명에 함수 코드를 저장하는 구현 방식이다.

익명 함수의 소스 코드는 변수(상수)값이기 때문에 끝에 세미콜론을 대입하여야 한다.

익명 함수 호출 시에는 변수명을 함수명처럼 사용할 수 있다.

화살표 함수는 const, let 키워드를 사용해서 변수명에 함수 코드를 저장하므로 익명 함수다.

화살표 함수가 제한되는 경우

• 메소드로 사용되는 경우
• 생성자로 사용되는 경우 등

 

Array / Object Destructuring (배열 / 객체의 구조 분해 할당)

배열 디스트럭처링

디스트럭처링은 구조 분해 할당 혹은 비구조화 할당이라고 부른다.

기존에 선언 및 할당되어 있던 배열 및 객체의 요소(프로퍼티)를 다른 배열 혹은 변수, 객체로 옮길때 유용하게 사용할 수 있다.

디스트럭처링의 기본 용법은 아래와 같다.

배열을 구조 분해 할당하는 예제이다. 기존에 선언 및 할당되어 있는 arry 배열의 요소 1, 2, 3 중 첫번째와 세 번째 요소를 상수 one, three에 담고 2는 아무데도 할당하지 않는다. 디스트럭처링 시에는 기존 배열의 인덱스를 동일하게 설정하여 할당해주어야 하며, 할당받지 않을 부분은 콤마(,)로 비워주면 된다.

 

그렇다면 기존의 배열의 요소는 2개이고, 배열을 복사하며 할당하고 싶은 변수는 3개라고 가정했을 때, 어떻게 구조 분해 할당을 할 수 있을까? 그 방법은 아래와 같다. 

배열 디스트럭처링은 React.js의 Hook 중 하나인 useState를 사용할 때 쉽게 볼 수 있는 문법이다.

객체 디스트럭처링

구조 분해 할당은 배열 뿐만 아니라 객체에도 적용할 수 있다. 객체의 특정 프로퍼티만을 빼올 때 유용하게 사용할 수 있다.

human 객체는 name 프로퍼티의 값이 'Taeun', age 프로퍼티의 값이 22로 구성되어 있다. 배열 구조 분해 할당과 동일하게 객체 구조 분해 할당 또한 프로퍼티의 순서에 맞게 구조 분해 할당을 해주면 된다.

 

 

Spread & Rest

스프레드와 레스트는 '연산자'이며 점 세 개로 표현된다. ...

동일한 연산자를 사용하지만 스프레드와 레스트는

Spread

스프레드는 배열의 원소나 객체의 프로퍼티를 나누는 데에 사용한다. 좀 더 간단히 말하자면 'spread'의 뜻과 같이 배열이나 객체를 펼쳐놓는 이미지로 생각하면 쉽다.

예제는 준비하지 못했지만 배열 구조 분해 할당과 마찬가지로 객체의 프로퍼티도 위와 같이 복사해 올 수 있다.

Rest

레스트 연산자는 함수의 인수 목록을 배열로 합치는 데에 사용한다. 

sortArgs() 함수는 매개변수를 무한히 받을 수 있다. 1개 이상의 매개변수가 들어온다면 모두 배열로 통합되어 함수 내에서 배열 매개변수에 대한 배열 메소드를 적용할 수 있다.

---

여기까지가 내가 공부한 React.js를 시작하기 전에 알아두면 좋을만한 ES6 문법 정리다. 이리저리 많은 자료를 보고 내 것으로 만든다고 했으나 아직도 설명하라면 부족한 부분이 더 많을 것 같다는 생각이 든다. 기본기를 다지기 위해 시작한 공부이니만큼 확실히 내것으로 만들면 좋을텐데. 혹시나 부족한 설명이 있다면 부디 댓글로 알려주시기를 부탁드린다. 나 스스로도 더 공부가 되었다고 생각할 때 다시 한 번 꺼내 보고 부족한 부분을 메꿀 수 있도록 해야겠다.