[JavaScript] ES6 문법

 

 

여러 강의를 들으면서 공부를 해오고 있는데 ES6문법을 주로 사용하고 있어서 이참에

ECMAScript2015 또는 ECMAScript 6이라고도 하는 ES6문법을 정리해보려고 한다. 

 

 ES6 문법의 주요 특징

- const, let 변수

const는 ES6에서 새로 등장한 키워드다! 말 그대로 constant(상수)역할을 하는데

반드시 선언과 동시에 초기화해야 한다. 재할당이 금지 되어있다. 

const 키워드는 재할당을 금지할 뿐, 불변을 의미하진 않는다. 

 

const 키워드로 선언된 변수에 원시 값을 할당한 경우 값을 변경할 수 없다. 

하지만 const 키워드로 선언된 변수에 '객체'를 할당한 경우 값 변경이 가능하다. 

let은 변경 가능하며, 재할당도 가능하다. 

 

let 과 const는 블럭 단위에서 동작한다는 공통점이 있다. 변수는 범위 내에서만 동작합니다.

 

 

=> 정리

- ES6를 사용한다면 var 키워드는 지양하는 게 낫다. 

- 재할당이 필요한 경우에는 let을 사용하고, 최대한 변수의 스코프는 좁게 한다.

- const 키워드는 재할당이 금지 되어있어서 제일 안전하다.

 

변수를 선언할 때는 일단 const 키워드를 사용하자! 

 

- Arrow 함수

화살표 함수는 코드의 가독성을 높혀주고, 깔끔하게 만들어준다는 큰 장점이 있다

function 키워드와 return, {} 를 사용할 필요가 없다. 그래서 함수를 좀 더 깔끔하게 만들어준다!

 

또, map, filter, reduce와 같은 내장 함수와 함께 사용할 수 있다.

//ES5

 var x = function(x,y) {
	 return x * y;
 }
 
 //ES6
 
 const x = (x,y) => x * y;

 

- 템플릿 리터럴

 

템플릿 리터럴 또는 템플릿 strings는 꽤 멋집니다. 문장을 연결하기 위해 (+)를 사용할 필요가 없고, 

`(백틱)을 사용해 변수를 문장 안에 사용할 수 있습니다. 

 

//ES5

function myFun1(name,age){
	return "Hi" + name + "Your age is" + age + "years old!";
}
console.log(myFun1("Min",20))
//=> "Hi Min Your age is 20 years old"

//ES6

const myFun = (name,age) => {
	return `Hi ${name} Your age is ${age} years old!`;
}
console.log(myFun1('Min',20))
//=> "Hi Min Your age is 20 years old"

 

 

 완전 편함.

 

- 기본 매개변수 Default parameters

매개변수를 작성하는 것을 잊었을 때, 매개변수를 이미 디폴트값으로 정의해두었기 때문에 오류를 return하지 않습니다.

그래서 개발자가 매개변수를 놓쳐도 오류를 반환하지 않고 기본 매개변수를 리턴해줘서 오류를 우선 처리할 수 있습니다. 

 

const myFun = (name, age=22) => {
	return `Hello ${name} your age is ${age} years old`;
}

console.log(myFun('Min'))
//age값을 입력하지 않아도 기본 파라미터로 age에 22가 return된다.

 

- 배열 및 객체 비구조화 (Array and object destructing)

 

비구조화는 배열 또는 객체의 값을 새로운 변수에 좀 더 쉽게 할당할 수 있습니다. 

 

//ES6

const contacts = {
	name: 'Min',
    familyName: 'Kim',
    age:26
}

let {name, familyName,age} = contacts
console.log(name); //Min
console.log(familyName); //Kim
console.log(age); //26

 

속성 이름과 다른 곳에 변수를 할당하면 undefined가 반환됩니다.

 프로퍼티의 이름이 name인 곳에 username 변수에 할당한다면, undefined가 반환됩니다.

 

프로퍼티의 이름과 변수의 이름을 같게 지어야 하지만, 변수의 이름을 바꾸고 싶을 때

: 콜론을 대신 사용하면 됩니다. 

 

//ES6

const contacts = {
	name: "Min",
    familyName: "Kim",
    age: 26
}

let {name:userName , familyName, age} = contacts
console.log(userName)

 

배여레서도 객체와 같은 문법을 사용하면 됩니다. 대신, { } 괄호를 [ ] 괄호로 교체하면 됩니다!

 

- Import and export 

 

자바스크립트에서 import와 export를 사용하는 것은 굉장합니다. 

독립적이고 재사용가능한 컴포넌트를 만들 수 있도록 도와주니까요.

 

만약 JS의 MVC 프레임워크에 익숙하다면 대부분 컴포넌트를 다루기 위해 import와 export를 

사용하는 것을 봤을 겁니다. 그들은 실제로 어떻게 동작할까요?

 

 export는 모듈을 다른 JS컴포넌트에서 사용할 수 있도록 내보냅니다. 

우리는 import를 사용해서 우리의 컴포넌트로 모듈을 가져옵니다. 

 

 

- Promises

 

Promises는 ES6 문법에서 새롭게 등장했습니다. 비동기적인 코드를 작성하는 방법인데요. 

우리가 API에서 데이터를 가져오거나 시간이 약간 걸리는 함수를 실행할 때 사용하면 됩니다. 

Promises는 이런 문제들을 쉽게 만들어주니까요.

 

const myPromise = () => {
	return new Promise((resolve, reject) => {
    	resolve("Hi the Promise execute successfully")
    })
}

console.log(myPromise());

 

데이터를 가져온 후 함수를 실행하고 싶다면, Promise를 사용하면 됩니다. 

Promise는 resolve와 reject라는 두개의 파라미터를 가지는데요.

이 파라미터들은 앞으로 예상되는 오류를 처리해줍니다.

 

fetch함수는 Promise함수를 반환합니다!

 

- Rest parameter and Spread operator (잔여 매개변수와 확산 연산자)

Rest paramete은 배열의 인수를 가져오거나 새로운 배열을 반환하는데 사용되곤 합니다. 

 

const arr = ["said", 20, "자바스크립트중독자", "안녕", "Said", "잘지내"];

//비구조화로 값 가져오기
const [var1, var2, var3, ...rest] = arr;

const Func = (restOfArr) => {
	return restOfArr.filter(item=>{return item}).join(" ");
}

console.log(Func(rest)); //안녕 said 잘 지내

 

확산 연산자는 잔여 매개변수와 같은 문법 구조를 가진다. 다른 점은 확산 연산자는 인수뿐만 아니라 배열 자체를 가져감. for 구문이나 다른 메소드를 사용하지 않아도 확산 연산자를 통해 배열의 값을 가져올 수 있음!

 

const arr = ["said", 20, "자바스크립트중독자", "안녕", "Said", "잘지내"];

const Func = (...anArray) => {
	return anArray;
}

console.log(Func(arr));
//배열 값 다 가져옴

 

 

- 클래스

 

클래스는 객체지향 프로그래밍(OOP)에서 중요한 존재다. 클래스는 코드를 안전하게 캡슐화해준다.

클래스를 사용하면 코드를 좀 더 멋진 구조로 만들어주게 됩니다. 

 

이제 new 키워드를 이용해 class의 메서드와 속성에 접근할 수 있습니다

 

class myClass{
	constructor(name,age) {
    	this.name= name;
        this.age=age;
	}
}

const Home = new myClass("Min",20);
console.log(Home.name) //Min

다른 클래스에서 상속받기 위해 extends 키워드를 사용할 수 있습니다. 

 

 

- 정리하고 느낀 점

Rest parameter and Spread operator 부분이 좀 헷갈려서 추가적인 공부가 필요할 것 같다.

그래도 전체적으로 정리해서 머릿 속에 좀 정리된 기분이 든다. 

 

 

참고자료.

<모던 자바스크립트 Deep Dive - 이웅모 저>

https://www.freecodecamp.org/news/write-less-do-more-with-javascript-es6-5fd4a8e50ee2/

JavaScript ES6 — write less, do more