ECMAScript 6부터 추가된 데이터 타입 : 심벌(Symbol), 템플릿 리터럴(Templete literals)
심벌은 ES6부터 추가된 몇 가지 새로운 기능(이터레이터, instanceof 재정의, 메서드의 다양한 확장 방법 등)을 이해하기 위해 필요한 기초 지식이며,
템플릿 리터럴을 사용하면 복잡한 문자열 처리를 간결하게 표현할 수 있다.
[1] 심벌
심벌은 ES6부터 추가된 새로운 원시 값. 자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값
🔹 심벌 생성 : Symbol()
Symbol()은 호출될 때마다 새로운 값을 만든다.
var sym1 = Symbol(); var sym2 = Symbol(); console.log(sym1 == sym2); // → false
Symbol()에 인수를 전달하면 생성된 심벌의 설명을 덧붙일 수 있다.
심벌의 설명은 toString() 메서드를 사용해서 확인 가능
var HEART = Symbol("하트");
console.log(HEART.toString(); // → Symbole(하트)
이런 심벌을 사용해서 오셀로 게임을 만들 때 활용할 수 있다. 심벌은 유일무이한 값이기 때문이다.
var NONE = Symbol("none");
var BLACK = Symbol("black");
var WHITE = Symbol("white");
🔹심벌과 문자열 연결하기 : Symbol.for()
문자열과 연결된 심벌을 생성.
전역 레지스트리에 심벌이 만들어진다. 또한 전역 레지스트리에서 그 심벌을 위에 지정한 문자열로 불러올 수 있다.
var sym1 = Symbol.for("club");
var sym2 = Symbol.for("club");
console.log(sym1 == sym2); // → true
이 기능을 사용하면 코드의 어느 부분에서도 같은 심벌을 공유할 수 있다. 심벌과 연결된 문자열은 Symbol.keyFor()로 구할 수 있다.
var sym1 = Symbol.for("club");
var sym2 = Symbol("club");
console.log(Symbol.keyFor(sym1); // → club
console.log(Symbol.keyFor(sym2); // → undefined
[2] 템플릿 리터럴
ECMAScript 6부터 추가된 문자열 표현 구문
템플릿이란 일부만 변경해서 반복하거나 재사용할 수 있는 틀을 말함
템플릿 리터럴을 사용하면 표현식의 값을 문자열에 추가하거나 여러 줄의 문자열을 표현할 수 있다.
🔹 기본적인 사용법
역따옴표(`)로 묶은 문자열
— 역따옴표로 블로그 게시 시에 에러가 발생하여 ° 표시로 대신함 —
°I'm going to learn Javascript.°
템플릿 리터럴에서는 일반적인 줄 바꿈 문자를 사용할 수 있다. 물론, 이스케이프 시퀀스(\n)을 사용할 수도 있다.
var t = °Man errs as long as he strives.°;
이것을 문자열 리터럴로 표현한다면 다음과 같다. 물론, 앞서 나온 것과 같이 템플릿 리터럴에서도 이스케이프 시퀀스를 사용해서 나타낼 수도 있다.
var t = "Man errs as long as \nhe strives.";
var t = °Man errs as long as\nhe strives.°;
그런데 이스케이프 시퀀스를 그대로 나타내고 싶다면?
템플릿 리터럴에서는 String.raw를 붙이면 되고, 문자열 리터럴에서는 \\n 과 같이 표현한다.
var t = String.raw°Man errs as long as\nhe strives.°;
var t = "Man errs as long as \\nhe strives.";
🔹보간 표현식
템플릿 리터럴 안에는 플레이스 홀더를 넣을 수 있다.
플레이스 홀더 표기법 : ${…}
플레이스 홀더란 사용자 입력값처럼 실행 히점에 외부에서 주어지는 값을 표현식에 반영하고자 할 때, 그것이 들어갈 수 있도록 마련한 장소.
자바스크립트 엔진은 플레이스 홀더 안에 든 … 부분을 표현식으로 간주하여 평가
이를 활용하며 문자열 안에 변수나 표현식의 결과값을 삽입할 수 있다.
var a = 2, b = 3;
console.log(°${a} + ${b} = ${a+b}°); // → 2 + 3 = 5
var now = new Date();
console.log(°오늘은 ${now.getMonth()+1} 월 ${now.getDate()} 일입니다.°); // → 오늘은 8월 1일입니다.
모든 코드에서 ${ } 안에 든 표현식이 평가되어 문자열로 바뀌었다.
< 참고문헌 >
🔹주 참고문헌 : 모던 자바스크립트 입문 – 이소 히로시 지음, 서재원 옮김
🔹MDN Web Docs
