Javascript - 템플릿, 삼항조건연산자

Javascript

 

ES6 이후 문법의 특징

- var 예약어 → let, const 예약어
- 프로토타입 → 클래스 함수로 바뀜
- 비동기 처리방식 : 간결해짐
- 모듈이라는 개념 추가
- 템플릿 리터럴(``) - 백틱 활용

 

ES6 이전과 이후를 비교해보자 (템플릿 활용)

✨ 기본 문법

 

ES6 이전

var string1 = "안녕하세요";
var string2 = "반갑습니다!";
var greeting1 = string1 + ", " + string2;
console.log(greeting1); // 안녕하세요, 반갑습니다!

 

 

ES6 이후

var string3 = "안녕하세요";
var string4 = "반갑습니다!";
var greeting2 = `${string3}, ${string4}`;
console.log(greeting2); // 안녕하세요, 반갑습니다!

→ 문자열 결합하면 보기도 어렵고 겁나 번거로운데,

백틱과 템플릿 활용하니 아주 간단해짐

 

 

✨ 객체 형태

 

ES6 이전

var product1 = {
    name : "곰인형",
    price : "7,200원"
};
var message1 = "상품 " + product1.name + "의 가격은 " + product1.price + " 입니다.";
console.log(message1);

 

ES6 이후

var product2 = {
    name : "곰인형",
    price : "7,200원"
};
var message2 = `상품 ${product2.name}의 가격은 ${product2.price} 입니다.`;
console.log(message2);

 

 

✨ 숫자 형태

 

ES6 이전

var value1 = 1;
var value2 = 2;
var result1 = "구입한 총 수량은 " + value1 + value2 + "개 입니다.";
console.log(result1); // 12개 입니다. (1 + 2 = 12)
//var result1 = "구입한 총 수량은 " + (value1 + value2) + "개 입니다.";
//console.log(result1); // 3개 입니다. (1 + 2 = 3)

즉, 문자결합 연산자는 문자열 + 숫자열 → 문자열
아 근데 + 빼고는 다 숫자로 연산된다;

어이X

 

ES6 이후

var value3 = 1;
var value4 = 2;
var result2 = `구입한 총 수량은 ${value3 + value4}개 입니다.`;
console.log(result2); // 3개 입니다. (1 + 2 = 3)

 

 

✨ 삼항조건연산자

삼항조건 연산자란 (논리형식 ? A(참) : B(거짓))

 

ES6 이전

var msg1 = 10 > 12; // false
var result_bool1 = "논리형 값은 " + (msg1 ? "참" : "거짓") + " 입니다.";
console.log(result_bool1);

 

ES6 이후

 var msg2 = 10 < 12; // true
var result_bool2 = `논리형 값은 ${msg2 ? "참" : "거짓"} 입니다.`;
console.log(result_bool2);