ES6로 깔끔한 코드 만들기

 

이번에 프로젝트할 때 asnyc ~ await, arrow function, const & let script 기능을 사용했었는데, 프로젝트가 끝나고 여유롭게 ES6문법을 자세히(?) 보는 도중 놀라운 기능들이 많이 있다는 걸 알게 되었다. 진작 알았으면 좀 더 깔끔한 코드를 짤 수 있었을 텐데... 참고로 ES5가 표준처럼 쓰이다가 지금은 ES6~ES8까지 표준으로 쓰이는 추세인 것 같다. 밑에 링크를 통해 ES6 + 브라우저 지원 현황을 살펴보자.

 

참고 : https://kangax.github.io/compat-table/es6/

 

---

1. ES6(ECMAScript)?

: ECMA 인터내셔널의 ECMA-262 기술 규격으로 정의된 표준화 스크립트 프로그래밍 언어.

그냥 자바스크립트 표준 언어라고 생각하면 된다.

 

2. ES6 ~ ES8 간단 정리

2-1. ECMAScript 6 (2015)

arrows (화살표 함수)
classes (클래스)
enhanced object literals (object 메서드 선언 및 속성 선언)
template strings (템플릿 문자열)
destructuring (구조분해할당)
default + rest + spread (default 파라미터, rest 파라미터, 전개 연산자)
let + const (let, const block level 스코프 변수 선언)
iterators + for.. of
generators
unicode
modules
module loaders
map + set + weakmap + weakset
proxies
symbols
subclassable built-ins
promises (비동기 프로그래밍)
math + number + string + array + object APIs
binary and octal literals
reflect api
tail calls (꼬리 물기 최적화)

 

2-2. ECMAScript 7 (2016)

Array.prototype.includes()

 

2-3. ECMAScript 8 (2017)

Async Functions (async ~ await)
Shared memory and atomics
(공유된 메모리와 원자 / SharedArrayBuffer 객체와 Atomics 객체를 사용한 메모리 공유)

 

3. 앞으로 내가 자주 사용할 것 같은 기능들 정리.

 

3-1. Arrow Function (화살표 함수)

() => {...} // 매개변수가 없을 경우
X => {...} // 매개변수가 한 개일 경우 소괄호를 생략할 수 있다.
(x,y) => {...} //매개변수가 여러개인 경우는 소괄호를 사용한다.

X => { return x*x}
x => x*x // 함수 몸체가 한 줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return 된다.
()=>{
	const x =10;
    return x * x;
}

 

! 화살표 함수를 사용해서는 안 되는 경우

 

객체의 메서드를 정의할 때 화살표 함수를 사용하면 바인딩 과정을 생략하기 때문에 this가 가리킬 곳이 사라진다. 이럴 경우 향상된 객체 리터럴로 축약해서 쓰는 걸 추천한다.

 

const obj = {
	name : "solm",
    sayHi : () => console.log(`${this.name} 안녕`)
}

obj.sayHi(); // undefined 안녕

const obj = {
	name : "solm",
    sayHi(){
    	console.log(`${this.name} 안녕`)
    }
}

obj.sayHi(); // solm 안녕

 

같은 원리로, 이벤트 핸들러 선언 또한 화살표 함수를 사용하면 this가 전역 객체가 되기 때문에 원하는 코드를 작성하지 못하게 된다.

 

// 이벤트 핸들러 선언
btn1.onClick = () => {console.log(this)};
// btn1 클릭시 window 객체 출력 (this === window)

 

3-2. const and let

이건 전에 포스팅해둔 게 있다. 아래 참고.

https://solm-blog.tistory.com/2?category=858024 

ES6 for Vue.js - const & let

 

3-3. Template Literals (템플릿 리터럴)

굉장히 편하다고 생각한 기능! 문자열을 연결하기 위해 더하기 연산자를 사용할 필요 없이 백틱(`)을 사용해서 문자열 내에서 변수와 함께 사용할 수 있다. 예시 보면 바로 무릎을 탁 칠 것 ,,

 

//ES5
function func1(){
	return '이건 ' + title + ' 입니다.';
}

this.func1("ES5"); // 이건 ES5 입니다.

//ES6

const func2 = (title) => {
	return `이건 ${title} 입니다.`;
}

this.func2("ES6") // 이건 ES6 입니다.

 

3-4. Default Paramters (기본 매개 변수)

java defaultValue처럼 매개 변수가 없더라도 기본 매개 변수를 지정해 줄 수 있다.

// 적용 전
const func1 (name, age) => {
	return `안녕 ${name}, 내 나이는 ${age}야.`;
}

this.func1('영희'); // 안녕 영희, 내 나이는 undefined야.


// 적용 후
const func2 (name, age = 29) => {
	return `안녕 ${name}, 내 나이는 ${age}야.`;
}

this.func2('영희'); // 안녕 영희, 내 나이는 29야.

 

3-5. Array And Object Destructing (배열 및 객체 비구조화)

//ES5
const contacts = {
	famillyName : '박',
    name : '보영',
    age : 30
};

let famillyName = contacts.famillyName;
let name = contacts.name;
let age = contacts.age;

console.log(famillyName);
console.log(name);
console.log(age);

// 박
// 보영
// 30

//ES6

const contacts = {
	famillyName : '박',
    name : '보영',
    age : 30
};

let {famillyName, name, age } = contacts;

console.log(famillyName);
console.log(name);
console.log(age);

//박
//보영
//30

ES5에서는 각 변수에 각 값을 할당해 주어야 했는데, ES6에서는 중괄호로 간단하게 할당해줄 수 있다. 주의할 점은, 변수를 할당할 때 속성과 변수 이름이 같지 않으면 undefined가 반환된다. 그니까 속성 이름은 name인데 yourName 변수에 할당하면 undefined반환. 변수 이름을 바꾸고 싶으면 콜론을 사용해 바꿔줄 수 있다.

 

const contacts = {
	famillyName : '박',
    name : '보영',
    age : 30
};

let {familyName, name : ontherName, age} = contacts;
console.log(ontherName); // 보영

 

배열일 경우 객체와 동일한 구문을 사용하며 중괄호를 대괄호로 바꿔주면 된다.

 

3-6. Import and Export (가져오기 및 내보내기)

 

재사용성이 가능하게 import 및 export를 사용할 수 있다. detailComponent와 homComponent가 있다고 하자. detailComponent.js에서 detail 함수를 내보낼 예정이다.

 

//ES6

export default function detail(name, age){
	return `안녕 ${name}, 나는 ${age}야.`;
}

그리고 homeComponent.js에서 이 function을 사용하려면 import 해주면 된다.

 

import detail from './detailComponent';

console.log(detail('수영', 35));
// 안녕 수영, 나는 35살이야.

 

둘 이상의 모듈을 가져오려는 경우 중괄호에 넣어주면 된다. 

import {detail, userProfile, getUserInfo} from './detailComponent';

 

3-7. Rest Parameter and Spread Operator (나머지 매개 변수 및 확산 연산자)

 

Rest Parameter은 배열의 인수를 가져오고 새 배열을 반환하는 데 사용된다.

const arr = ['자바스크립트', '풀베개', '안녕', '보영아', '잘 지내니?'];

//비구조화를 이용해 값 얻기
const [va11, val2, ...rest] = arr;

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

console.log(func(rest));// 안녕 보영아 잘 지내니?

비구조화를 통해 arr의 첫 번째 배열 까지는 val1(자바스크립트), val2(풀 베개)에 저장이 되고 나머지 배열의 속성은 rest배열(안녕, 보영아, 잘 지내니?)에 저장된다. func 함수에 rest배열을 매개변수로 할당해주면 고차함수를 통해 배열의 내용이 출력된다. 

 

고차함수 참고 

https://solm-blog.tistory.com/24

javascript function 개념과 종류

 

Spread Operator은 Rest Parameter과 구문이 동일하지만 Spread Operator은 인수뿐만 아니라 배열 자체를 가리킨다. 그래서 for문이나 다른 메서드를 사용하는 대신 Spread Operator를 사용해서 배열의 값을 가져올 수 있다.

// ES5

function add(a, b){
	return a + b;
}

console.log(add(1,2,3,4,5)); 
// 출력 : 3

//ES6

function add(...args){
	let sum = 0;
    for(let i= 0; i < args.length; i++){
    	sum = sum + args[i];
    }
    
    return sum;
}

console.log(add[1]); // 출력 : 1
console.log(add[1,2]); //출력 : 3
console.log(add[1,2,3]); //출력 : 6

 

배열 추가 하기

let arr = ['A', 'B', 'C'];
let newArr = [...arr, 'D'];

console.log(newArr) // ['A', 'B', 'C', 'D']

 

배열 복사

let arr1 = [1,2,3,4,5];
let arr2 = [...arr1];

console.log(arr2) // [1,2,3,4,5]

 

배열의 요소를 인수로 함수에 전달

function sum(x, y, z) {
 	return x + y + z;
}

const numbers = [1,2,3];
console.log(sum(...numbers)); // 출력 : 6

 

3-7. Classes (클래스)

Class는 객체 지향 프로그래밍 (OOP)의 핵심이다. class를 사용하면 코드 구조가 좋아지고 코드를 더욱 안전하게 캡슐화할 수 있다.

 

기본 사용법

class myClass {
	constructor(){
    
    }
}

 

이제 new 키워드를 사용해 class 메서드와 속성에 액세스 할 수 있다.

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

const user = new myClass('보영', 30);

console.log(user.name); // 보영
console.log(user.age);  // 30

 

다른 class에서 상속하려면 extends 키워드 다음에 상속할 class 이름을 사용한다.

class myClass {
	constructor(name, age){
    	this.name = name;
        this.age = age;
    }
    
    sayHello(){
    	console.log(`안녕  ${this.name}, 나는 ${this.age}이야.`);
    }
}

// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
	userName(){
    	console.log(this.name);
    }
}

const profile = new UserProfile('보영', 30);

profile.sayHello(); // 안녕 보영 나는 30이야.
profile.userName(); // 보영