Template Literals | Destructuring | class

모든 포스팅은 인프런 ECMAScript6: 빠르게 배우는 ES6 스킬과 비동기 프로그램 의 내용을 담고 있으며

출처는 아래의 주소로 "김형태"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

www.inflearn.com/course/es6-ecmascript-6

ECMAScript 6: 빠르게 배우는 ES6 스킬과 비동기 프로그래밍 - 인프런

---

1. Template Literals 

 

 # 표현식과 템플릿 문자열

- 백틱(backtick) 문자를 사용한다.

- 템플릿 문자열 표현식을 처리한다.(이를 통해 문자열의 외부 변수를 입력할 수 있다.)

 

템플릿 문자열이라는 기능을 도입하여,

싱글쿼테이이션 또는 더블 쿼테이션이 아닌 백틱 문자를 사용하여 문자열을 표현 하는 방식을 "템플릿 문자열 표현식"이라고 한다.

 

 

위와 같은 표기법으로 멀티라인 스트링을 만들 수 있다. ($는 표현식 사용임. 표현식으로 계산식을 넣을 수도 있다.)

 

표현식을 사용하면, 위의 6번 라인과 같이 함수를 호출 할 수도 있다.

 

2. Destructuring

 

#비구조화 할당

 

- 구조화된 object나 array를 비구조화 하여 변수에 할당

 

객체 또는 배열에서 데이터를 분석하여 각각의 변수에 할당하는 것을 의미한다. 이를 이용하여 json형식의 객체나 배열을 쉽게 변수에 할당 할 수 있다.

let data = [{
	
    const : 1,
    list: [{
    
        name : ["jack","paul"],
        group : "sports"
    }] 
}]

let [{count, list: [{name,group}]}] = data;
console.log(`
count : ${count}
group : ${group}
`)

let 선언자 옆에 배열 표현식으로 동일하게 배치만 해주면 된다.(객체도 마찬가지임)

 

아래 코드도 보면 Productobject에서 인자로 객체 표현식을 받고 있다. 함수에서 객체를 리턴할 때 비 구조화 할당을 통해 여러 구조로 받을 수 있다.

function productObject({name, price, color}) {
    return {
    productName : "This product name : " + name,
    addToCart(){
        console.log(name + "is added");
     },
     detailView(){
        console.log(`
        ${productName}
        price : ${price}
        color : ${color}
        `);
     }
   };
}
var {productName, addToCart, detailView} = productObject({name:"apple", price:199, color:"silver"});
addToCart();
detailView();

 

결과는 다음과 같다.

 

3. class

 

# 클래스(: class)

기존에는 객체지향을 구현하려고 할 때 function을 생성자로 사용하였다. 표현력이 떨어지다 보니 코드의 복잡도가 커졌다.

 

이러한 문제를 해결하기 위해 class키워드가 추가 되었다. 이로 인해 객체 지향 프로그래밍이 편리해졌다.

 

아래 코드를 살펴보면 class키워드를 사용하여 클래스를 정의하였고 생성자 함수는 constructor라는 이름으로 정의하였고 이는 클래스가 생성될 때 기본적으로 

호출이 되는 함수이다.

class Lang {
	
    constructor(name){
    	this.name = name;
    }
    getName(){
    	return this.name;
    }
}
let lang = new Lang("Language");
console.log("Lang.getName();" + lang.getName());

다음과 같이! 클래스는 new키워드로 객체를 만들어 사용한다.

객체를 생성할 때 전달한 인자 Language 생성자의 매개변수로 전달되어 name을 초기화 하였으며, getName메서드를 통해 Language가 출력된 것이다.

 

# class 상속

- extends 키워드를 사용하여 다른 객체 지향 언어들처럼 상속이 가능.

 

아래 코드를 보자

class Lang {
    constructor(name){
    	this.name = name;
    }
    getName(){
    	return this.name;
    }
}
let lang = new Lang("Language");
console.log("lang.getName();"+ lang.getName());

class Javascript extends Lang{
	constructor(name) {
    	super(name);
    }
}
let js = new JavaScript("JavaScript");
console.log("js instanceof JavaScript : " + (js instanceof JavaScript));
console.log("js instanceof Lang : " + (js instanceof Lang));
console.log("js.getName():" + js.getName());
    

자바스크립트의 자식 클래스를 초기화 하려면 먼저 부모 클래스의 생성자를 호출해야 하므로,  super메소드를 통해 부모 클래스의 생성자를 호출해야 한다.

 

 

결과는 다음과 같다.

 

이 예제에서 알 수 있는 것은 :

 

- js는 javascript생성자로 생성된 instance 이면서, 

 javascript가 Lang의 자식 클래스 이므로 "Lang의 인스턴스 여부가 true가 나온것을 확인 할 수 있다"라는 것.

 

- 또한 부모 클래스의 변수와 메소드를 상속받아 정의하지 않은 함수까지도 사용할 수 있다는 것을 알 수 있다.

 

 

#정리

 

-  class 함수는 내부적으로 함수처럼 동작한다.

- 클래스와 상속으로 객체지향 프로그래밍을 가능하게 하였다.