[JavaScript] template literals, object literal syntax extension

template literals

---

백틱(`)엔 특별한 기능이 있습니다. 표현식을 ${…}로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 쉽게 삽입할 수 있죠. 이런 방식을 템플릿 리터럴(template literal)이라고 부릅니다.

<script>
  function hello(firstName, lastName) {
    console.log("Hello " + firstName + " " + lastName + ". Welcome!");
  }
  hello("won", "Kim");

  // template literals
  function hello2(firstName, lastName) {
    console.log(`Hello ${firstName} ${lastName}. Welcome!`);
  }
  hello2("rin", "Ha");
</script>

 

object literal syntax extension

---

Object를 선언하는 시점에  []를 이용해서 키(key)를 변수명을 사용해서 정의할 수 있음

 

<script>
  // 오브젝트 선언
  let person = {
    firstName: "John",
    lastName: "Doe",
  };

  // object literal syntax extension
  let type = "Name";

  let score = {
    point: 95,
    [type]: "Kim", // Name: "Kim" 과 같다.
  };
</script>

 

참고자료

https://ko.javascript.info/string

https://www.javascripttutorial.net/es6/object-literal-extensions/