ES6 문법 : 템플릿 문자열(template string)
-> 문자열 안에 변수와 연산식을 혼합하여 사용한다.
특징1) 작은따옴표('') 대신 백틱(`)으로 문자열 표현
특징2) 템플릿 문자열에 특수 기호 $를 사용하여 변수 또는 식 포함 가능
예시) 병합 연산자로 표현된 코드를 템플릿 문자열로 바꿔보자
// 병합 연산자 사용
var cart = { name: '도서', price: 1500 };
var getTotal = function(cart) {
return cart.price + '원';
};
var myCart = '장바구니에' + cart.name + '가 있습니다. 총 금액은 ' + getTotal(cart) + '입니다.';
// 템플릿 문자열 사용
var cart = { name: '도서', price: 1500 };
var getTotal = function(cart){
return `${cart.price}원`;
};
var myCart = `장바구니에 ${cart.name}가 있습니다. 총 금액은 ${getTotal(cart)}입니다.`;
변수 사용하기(가변 변수, 불변 변수)
가변 변수 : let 키워드
-> let으로 선언한 변수는 읽거나 수정할 수 있다.
불변 변수 : const 키워드
-> const로 선언한 변수는 읽기만 가능하다.
-> 불변 변수는 값을 다시 할당할 수 없는 것이지 값을 변경할 수는 있다.
화살표 함수
기존 자바스크립트의 함수 사용 방법
function add(first, second){
return first + second;
}
var add = function(first, second) {
return first + second;
}
화살표 함수 사용 방법 -> function 키워드 생략하고 인자 블록(())과 본문 블록({}) 사이에 => 표기
var add = (first, second) => {
return first + second;
};
var add = (first, second) => first + second;
var addAndMultiple = (first, second) => ({ add: first + second, multiply: first * second });
반응형
'REACT' 카테고리의 다른 글
리액트 시작하기(1) (0) | 2022.08.12 |
---|