JavsScript Es6 문법정리 (1)
JavsScript Es6 문법정리 (1) — #javascriptes6 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. 1.이해가지 않는다고 뒤돌아가 ...
#javascriptes6
학습법 이론
학습을 하기 이전, 명심해야할 학습법이 있다.
1.이해가지 않는다고 뒤돌아가 다시 보지 말 것
2.외우지 말라
=> 자주 봐서 외워짐을 당하라
=> 크롬을 통해 copy and paste하라
- 이해하는게 중요하다
=> 왜 생겨났는지?
=> 왜 사용하는지?
===> 응용이 가능해진다.
4.새로운 지식을 볼때는 뇌를 비우기
Es6문법
가장 최근에 나온 Javascript문법
개발자라면 최신 트렌드에 민감할 것입니다. 개발언어는 발전할수록 작성해야할 코드가 줄어들어 더 세련된 코드로 개발을 진행할 수 있습니다. 언어가 발전하면서 더 다양한 기능과 더 간결한 코드로 높은 효율을 만들어냅니다. 뒤쳐지지 않는 개발자라면 최신 코드를 익히는 것은 필수입니다.
프론트 엔드 개발자라면 누구나 JavaScript에 대해 공부할 것입니다. JavaScript도 시대가 변하면서 계속 발전해 왔는데, 그중 가장 최신에 나온 버전이 Es6(ECMA6)입니다.
ES6버전에서 추가된 새로운 기능은 다음과 같습니다.
- const and let
- Arrow functions
- Template Literals
- Default Parameters
- Destructing
- Promises
- Classes
이외에도 더 다양한 기능이 추가되었지만, 가장 많이 사용되는 기능들을 추려서 정리해 보겠습니다.
Const and Let
우선 가장많이 사용하는 Const and Let 변수할당 문법입니다.
기존 Es5버전에서는 var을 사용하였는데 Es6부터는 const와 let을 사용하여 변수를 지정할 수 있습니다. var와 const/let의 차이는 다음과 같습니다.
var
| var a = 1;console.log(a);var a = 2;console.log(a)//1,2 |
|---|
var의 경우에 똑같은 변수를 다시 선언해도 문제가 일어나지 않습니다. a를먼저 1로 선언한뒤 뒤에 한번도 2로 선언해도 전혀 문제가 없습니다.
let
| let a = 1;console.log(a);let a = 2;console.log(a)//error |
|---|
let의 경우 똑같은 변수를 두번 선언할 수 없습니다. 다만 let은 할당된 변수의 값이 언제든지 변할 수 있습니다.
| let a = 1;console.log(a);a = 2;console.log(a);//2 |
|---|
const
| const a = 1;console.log(a);a = 2;console.log(a)//error |
|---|
const역시 let처럼 변수를 두번 선언할 수 없습니다. let과의 차이점은 할당된 변수의 값이 변할 수 없다는 것입니다.
Arrow function
화살표 함수(arrow function)는 기존 함수를 더욱 멋지고 세련된 코드로 만들어줍니다. 화살표함수를 사용하면 코드를 더 쉽고 체계적으로 읽을 수 있습니다.
| function myFunc(name) { return "hello" + name;}console.log(myFunc("철수")); |
|---|
기존 ES5로 작성한 코드를 아래와 같이 수정할 수 있습니다.
const myFunc = (name) =>{return hello ${name}}console.log(myFunc("철수")) |
|---|
받는인자가 하나라면 인자를 받는 소괄호를 생략할 수 있으며, 함수실행 코드가 한줄이라면 중괄호 생략이 가능합니다. 중괄호 생략시 암묵적으로 return을 포함하고 있기에 return 없이 적어줘야 합니다.
const myFunc = name => hello ${name} //인자가 하나라 소괄호 생략 + 함수식이 하나라 중괄호 생략console.log(myFunc("철수")) |
|---|
Template Literals (백틱)
기존의 Es5문법과 달리 Es6문법에서는 문자열을 연결하기 위하여 +기호를 생략해도 됩니다. 또한 변수와 일반 문자/숫자를 더욱 편리하게 적는 기능을 제공하고 있습니다.
기존 Es5문법
| function myFunc(name,age){return "저의 이름은"+name+"이고"+ " " + "저의" +" "+ "나이는" +age+"살입니다."}console.log(myFunc("철수",20));//저의 이름은 철수이고 저의 나이는 20살입니다 |
|---|
새롭게 바뀐 Es6문법
const myFunc = (name,age) =>{ return 안녕하세요 저의 이름은 ${name}이고 저의 나이는 ${age}입니다. } console.log(myFunc("철수",20));//안녕하세요 저의 이름은 철수이고 저의 나이는 20입니다. |
|---|
`` 백틱키를 사용하여 변수와 일반 문자열을 편하게 사용할 수 있습니다. 변수를 나타낼경우 ${변수명}으로 감싸주면 됩니다. 문자를 잇기 위하여 ++를 넣어주지 않아도 되며, 띄어쓰기를 위하여 따로 " "를 넣어줄 필요가 없습니다.
Default Parameters (기본 매개변수)
기존의 Es5문법에서는 매개변수에 값을 할당하지 않는다면 undefined로 값이 할당됩니다. Es6에서는 기본 매개변수에 값을 지정하여 값을 매개변수에 할당을 하지 않을때 생기는 오류를 막을 수 있습니다.
const myFunc = (name,age = 20) => { return 안녕하세요 저는 ${name}이고 저의 나이는 ${age}살 입니다. } console.log(myFunc("철수")); //안녕하세요 저는 철수이고 저의 나이는 20살 입니다. |
|---|
처음 함수를 선언할때 age=20으로 값을 할당하였기 때문에, 매개변수를 따로 할당하지 않아도 오류가 나지 않습니다.