JavaScript 템플릿 문자열, 모듈, 클래스 ( Template string, Modules, Class, ES6 )

Template String(템플릿 문자열)

내장된 표현식을 허용하는 문자열 리터럴.

예제로 설명하는 방법이 더 쉬워서 바로 적어보면 다음과 같다.

 

사용 방법

1. 변수에 템플릿 문자열 삽입 후 사용

let story = `Hello, World! I'm "24"`
console.log(story) // Hello, World! I'm "24" 출력

위와 같이 변수 뒤에 내용들을 `(grave accent)로 감싸면 공백, 따옴표 등 작성한 그대로 출력할 수 있음

2. 템플릿 문자열 안에 변수 삽입 가능

const a = "takeU";
const b = 24;

ES5에서는 위에서 선언한 상수 a,b를 문자열 안에 출력하려면 아래와 같이 작성했다.

console.log("Hello " + a + " I'm " + b + " year's old")

하지만 템플릿 스트링을 사용하면 다음과 같다.

console.log(`Hello ${a} I'm ${b} year's old`)

이처럼 `에 넣어주고 변수는 ${}사이에 넣어주면 위와 같은 결과를 얻을 수 있다.
1번에서 설명한 것과 같이 공백과 따옴표도 그대로 출력이 되어 간단하게 사용할 수 있음

 

Modules(모듈)

모듈이란?

어플리케이션을 구성하는 개별적 요소를 모듈이라 부르며 (.js 확장자의 개별 파일)
기능별로 쪼개져 있어 필요한 기능을 불러다가 프로젝트에 삽입해 사용할 수 있음.

모듈을 내보내고 가져올 때 export, import를 사용한다

export와 import
한가지의 모듈 내에서 선언한 내용을 다른 모듈에서 사용할 수 있게 할 때 export로 내용을 내보낸다.
export는 다음과 같이 사용한다

//num.js
export const random = Math.random();

export function double(x) {
    return 2 * x;
}

위와같이 상수, 함수, 클래스 등 원하는 내용을 export로 내보내며 일일이 써주지 않고 묶어서 내보낼 수도 있다.

const random = Math.random();

function double(x) {
    return 2 * x;
}

export { random, double };

위에서 export로 내보낸 내용을 다른 모듈에서 import로 다음과 같이 불러온다

//main.js
import { random, double } from './num.js';

만약 불러올 모듈이 많다면 한번에 불러올 수도 있다

//main.js
import * as num from './num.js';

이름을 바꿔서 import할 수도 있다.

import { random as ran, double as db } from './num.js';

모듈의 장점은 유지보수의 용이함, 성능 향상 등 보다 편하게 개발할 수 있는 환경을 만들 수 있다.

 

Class ( 클래스 )

객체지향 언어에서 핵심이 되는 Class! 우리는 왜 클래스를 사용해야 할까?

우선 클래스를 알기 전에 객체지향에 대해 알아야 하는데 짧게 설명하긴 어렵겠지만, 객체지향이란것은 “데이터 하나하나의 고유한 특성들을 각각의 객체로 구분해 놓고, 내용을 구성함에있어 필요한 내용 즉, 각각의 객체를 연결함으로써 구현하는 패턴” 이라고 표현할 수 있을 것 같다.

객체지향에서 코드를 조금더 효율적으로 작성하기 위해서 나온 개념인 클래스는 각각의 객체를 생성하기 이전에 반복되거나 비슷한 코드를 그룹화 할 때 사용을 한다.

이제 JavaScript에 대해 알아보자.
JavaScript는 프로토타입 기반 객체지향 언어이다.

보통 객체지향 언어라 하면 위에서 설명한 클래스 기반인 경우가 많아 다른 언어를 공부했던 사람들은 JavaScript가 낯설게 느껴질 수 있지만,
ES6에 클래스를 생성하는 방법을 추가해 기존에 알던 개념으로 보다 빠르게 이해하고 쉽게 사용할 수 있을 것이다.

ES6에서도 이전에 없던 새로운 방법으로 클래스를 구현하는 것이 아닌 기존에 알고 있던 함수로 구현을하며,
이는 prototype 기반 패턴의 Syntatic sugar이다.
여기서 Syntatic sugar란 컴퓨터 언어를 사람이 이해하고 쉽게 사용할 수 있도록 구성해 놓은 것을 의미한다.

 

사용 방법

먼저 용어에 대해 알아보면
Class(클래스) - 객체의 특성을 정의
Object(객체) - 클래스의 인스턴스
Instance(인스턴스) - 객체의 실체화

쉽게 자동차에 비유해 이해해 보면
클래스가 자동차이면, 자동차의 종류인 페라리, 람보르기니 등을 객체라 표현한다.

즉, 클래스의 인스턴스를 객체라 부르는 것이다.

이제 클래스 선언 방법에 대해 알아보자

기존 ES5로 클래스를 선언할 때는 prototype을 이용해 구현을 했음

//ES5
function Box(length, width) {
    this.length = length;
    this.width = width;
}
Box.prototype.calculateArea = function() {
    return this.length * this.width;
}
var box = new Box(2, 2);
box.calculateArea(); //4

과정을 살펴보면 함수를 선언할 때 첫 글자를 대문자로 설정하는데 이를 생성자(constructor) 함수라 하며,
new 키워드로 새로운 객체를 생성할 수 있고,
this를 사용해 생성자 함수로 생성될 객체의 속성을 지정한다.

그 후에 prototype 메소드를 사용해 선언한 클래스(Box)에서 새로운 객체로 확장하는데 이런 방식 때문에 자바스크립트를 프로토타입 기반 프로그래밍 언어라 부른다.
프로토타입 사용의 장점은 객체에 같은 메소드로인해 메모리를 낭비하지 않도록 해주는 것이다. 즉 자바스크립트에서 클래스와 같은 의미로 사용을 하는 것이다.
따라서 효율적으로 코드를 짜기 위해서는 새로 만드는 모든 메소드(예제 코드에서는 calculateArea)는 프로토타입 안에 넣어야 한다.

위의 코드에서 calculateArea 메소드를 생성 한 뒤에 box에 원형 객체 Box에 인자를 넣은 값을 담고
box.calculateArea()로 프로토타입에 선언한 메소드를 호출하면 정의한 연산을 거쳐 값이 출력된다.

이제 ES6에서 클래스를 정의하는 방법을 알아보자

//ES6
class Box {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }
  calculateArea() {
    return this.length * this.width;
  }
}
let box = new Box(2, 2);
box.calculateArea(); // 4

다른 언어에서 클래스를 생성할 때와 비슷하게 생성을 한다.
class로 새로운 클래스를 선언을 해주는동시에 속성과 메소드까지 정의를 해주고
호출을 할때는 마찬가지로 new키워드로 새로운 객체를 생성해 메소드를 호출해 결과값을 출력한다.