Deepdive to Template literals

pongdangยท2022๋…„ 6์›” 24์ผ
0
post-thumbnail

๐Ÿšจ ์˜ค๋Š˜์˜ ๋ฌธ์ œ์ƒํ™ฉ

์˜ค๋Š˜ JSON.stringify() ๋ฅผ ์žฌ๊ท€ํ•จ์ˆ˜๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๊ณผ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค. ์ฝ”๋“œ์ž‘์„ฑ์€ ์–ด๋ ต์ง€ ์•Š์•˜๋Š”๋ฐ ์˜ˆ์ƒ์น˜๋„ ๋ชปํ•œ ๊ณณ์—์„œ ์‹œ๊ฐ„์„ ๋งŽ์ด ์Ÿ์•˜๋‹ค. ๋ฐ”๋กœ, Template literals...
์ด๊ฒŒ ์™œ ๋ผ..? ๋ผ๋Š” ๋ง๋งŒ ์ˆ˜ ์‹ญ๋ฒˆ ์™ธ์น˜๋ฉด์„œ ์•Œ๊ฒŒ ๋œ ์‚ฌ์‹ค์„ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

๐Ÿ’ฆ ๋ฌธ์ œ์˜ ์ฝ”๋“œ

์•„๋ž˜๋Š” ํ•จ์ˆ˜์— ๋“ค์–ด์˜จ ์ธ์ž๊ฐ€ ๊ฐ์ฒด์ผ ๋•Œ, ์‹คํ–‰๋˜๋Š” ์ฝ”๋“œ์ด๋‹ค.

  1. ์ƒˆ๋กœ์šด ๋ฐฐ์—ด temp ๋ฅผ ์„ ์–ธํ•œ๋‹ค.

  2. ํ‚ค์˜ ๊ฐ’์ด undefined ์ด๊ฑฐ๋‚˜ function ์ด๋ผ๋ฉด stringify๊ฐ€ ๋˜๋ฉด ์•ˆ๋˜๋ฏ€๋กœ ๋ฌด์‹œํ•œ๋‹ค.

  3. ํ‚ค์˜ ๊ฐ’์ด undefined ์ด๊ฑฐ๋‚˜ function ์ด ์•„๋‹ˆ๋ผ๋ฉด ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์— ํ‚ค์™€ ๊ฐ’์„ push ํ•œ๋‹ค.

  4. ํ‚ค์˜ ๊ฐ’ ํƒ€์ž…์— ๋งž๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด์„œ ๋ณ€ํ™˜ํ•จ์ˆ˜์ธ stringify(ํ‚ค์˜๊ฐ’) ์„ ํ˜ธ์ถœํ•œ๋‹ค.

  5. ๋‹ค ๋ณ€ํ™˜์ด ๋˜์—ˆ์œผ๋ฉด temp ๋ฐฐ์—ด์— ๋‹ด๊ธด ๊ฒƒ๋“ค์„ join() ํ•˜์—ฌ ๋ฐฐ์—ด์„ ํ‘ผ ๋’ค, template literal๋กœ ๋งŒ๋“  ๊ฐ์ฒด์— ๋‹ด๋Š”๋‹ค.

๐Ÿค” ๊ทธ๋ž˜์„œ ๋ญ๊ฐ€ ๋ฌธ์ œ?

๋ฌธ์ œ ์—†์ด ์œ„ ์ฝ”๋“œ๊ฐ€ ์ž‘๋™ํ•œ๋‹ค.

`{${temp.join()}}`;

temp ๋ผ๋Š” ๋ฐฐ์—ด์˜ ๋ชจ์Šต์€ ๋Œ€์ถฉ [' "cat" : "์•ผ์˜น" ', ' "dog" : "๋ฉ๋ฉ" '] ์ด๋Ÿดํ…Œ๊ณ , ์ด ๋ฐฐ์—ด์„ join() ํ•˜์—ฌ ๋ฐฐ์—ด์„ ํ’€์–ด ๋ฌธ์ž์—ด๋กœ ๋งŒ๋“  ๋’ค, template literal ๊ฐ์ฒด ์•ˆ์— ๋„ฃ๊ณ  ๋ฐ˜ํ™˜ํ•œ๋‹ค!
์ด๊ฒŒ ์›๋ž˜ ๋‚ด๊ฐ€ ์ƒ๊ฐํ–ˆ๋˜ ์ฝ”๋“œ์˜ ๋™์ž‘์ด์—ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์•„๊นŒ ์ฝ”๋“œ์—์„œ .join() ์„ ์—†์• ๋„ ๋ฌธ์ œ์—†์ด ์ž‘๋™ํ–ˆ๋‹ค.

`{${temp}}`

์™œ join() ์„ ํ•˜์ง€ ์•Š์•„๋„ ์›ํ•˜๋˜ ๋™์ž‘๋Œ€๋กœ ๋Œ์•„๊ฐ€๋Š” ๊ฑฐ์ง€?
์ด๊ฒŒ ์™œ... ๋ผ?

์ฝ˜์†”์ฐฝ์—์„œ๋„ ํ™•์ธํ•ด๋ดค๋‹ค.
๋ฐฐ์—ด์„ template literal๋กœ ๊ฐ์‹ธ๋‹ˆ๊นŒ ๋ฐฐ์—ด์ด ๋ฒ—๊ฒจ์ง€๊ณ  ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ•œ๋‹ค.

๐ŸŒŸ ์™œ ๊ทธ๋Ÿฐ์ง€ ์•Œ๊ฒŒ ๋์‚ผ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” template literal(``) ์„ ์ด์šฉํ•˜๊ฑฐ๋‚˜,

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");

+ ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด ํ‘œํ˜„์‹์„ ์ผ๋ฐ˜ ๋ฌธ์ž์—ด์— ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ๋‹ค.

์‚ฌ์‹ค template literal(``) ์„ ์ด์šฉํ•˜์—ฌ ๋ฌธ์ž์—ด์„ ๋งŒ๋“ค ๋•Œ ํ‘œํ˜„์‹ ์‚ฝ์ž…(๋ณด๊ฐ„๋ฒ•)์€ + ๋กœ ์—ฐ์‚ฐ๋œ๋‹ค.

๋ฌธ์ž์—ด์ด ์•„๋‹Œ ๊ฐ’์„ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ์ž‘์—…์€ ToString ์ถ”์ƒ ์—ฐ์‚ฐ ๋กœ์ง์ด ๋‹ด๋‹นํ•œ๋‹ค. * toString() ์ด๋ž‘์€ ๋‹ค๋ฅด๋‹ค!

์ฐธ๊ณ  ๋ธ”๋กœ๊ทธ ๐Ÿ‘‰ [JavaScript] ๊ฐ•์ œ๋ณ€ํ™˜ - ์ถ”์ƒ ์—ฐ์‚ฐ, Abstract operation

์ถ”์ƒ์—ฐ์‚ฐ์„ ํ†ตํ•ด ์•”์‹œ์  ๊ฐ•์ œ ๋ณ€ํ™˜์ด ์ผ์–ด๋‚˜ template literal๋กœ ๋ฐฐ์—ด์„ ๊ฐ์Œ€ ๊ฒฝ์šฐ ๋ฐฐ์—ด์ด ๋ฒ—๊ฒจ์ ธ์„œ ๋ฌธ์ž์—ด๋กœ ๋ฐ˜ํ™˜๋œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

๐Ÿ“š ๊ณต์‹๋ฌธ์„œ : ECMAScriptยฎ 2023 Language Specification : 7.1.16 ToBigUint64 ( argument )

๊ณต์‹๋ฌธ์„œ ์•ˆ์— ์žˆ๋Š” table ์ด๋‹ค.
template literal์—์„œ ๋ฌธ์ž์—ด๊ณผ ๊ฐ ๋ณด๊ฐ„๋œ part๋“ค์ด ์—ฐ์‚ฐ์ด ๋˜๋Š”๋ฐ, ๊ฐ•์ œ ๋ณ€ํ™˜(๊ทธ ์ค‘ ToString)์„ ํ†ตํ•ด ์—ฐ์‚ฐ๋œ๋‹ค๋Š” ๋œป์ด๋‹ค.

${[1,2,3,4]}

์ด๋ ‡๊ฒŒ template literal์— ๊ฐ์‹ธ์ง„ ๋ฐฐ์—ด์ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž.
๋ณด๊ฐ„๋œ ๋ฐฐ์—ด์˜ type object ์ด๋ฏ€๋กœ, ์œ„ ํ‘œ์— ์žˆ๋Š” ๊ทœ์น™ ์ค‘ Object ๋ฅผ ๋”ฐ๋ฅธ๋‹ค.

๊ทœ์น™ ๋‚ด์šฉ ๐Ÿ‘‡

Apply the following steps:

1. Let primValue be ? ToPrimitive(argument, string).

2. Return ? ToString(primValue).
Let primValue be ? ToPrimitive(argument, string).

primValue๋ฅผ ToPrimitive(argument, string) ์ด๋ผ๊ณ  ํ•˜์ž ๋ผ๋Š” ๋œป์ด๋‹ค.(ํ™•์‹คํ•˜์ง€ ์•Š์Œ, ํ•œ์ฐธ ์ฝ์–ด๋ณธ ๊ฒฝํ—˜์— ๋”ฐ๋ฅธ ํŒ๋‹จ)

๋‹ค์‹œ ์ € ํ‘œ์˜ ํ๋ฆ„์„ ๋”ฐ๋ผ ToPrimitive ๋กœ ๊ฐ€๋ณด๋ฉด, ๋˜ ๊ทœ์น™์„ ๋งˆ์ฃผํ•˜๊ฒŒ ๋œ๋‹ค.

๐Ÿ“š ๊ณต์‹๋ฌธ์„œ : ECMAScriptยฎ 2023 Language Specification :7.1.1 ToPrimitive ( input [ , preferredType ] )

ToString ์—ฐ์‚ฐ์— ์ด์–ด ToPrimitive(argument, string) ์—ฐ์‚ฐ์œผ๋กœ ๋„˜์–ด์™”๋‹ค.

์œ„ ๋ฌธ์„œ๋ฅผ ์ฝ์–ด๋ณด๋ฉด ์ด ๊ณผ์ •์„ ๊ฑฐ์ณ preferredType ์ด string์ด ๋  ๊ฒƒ์ž„์„ ์•”์‹œํ•œ๋‹ค. (๊ทธ๋ž˜์„œ hint๋Š” string ์ด๋‹ค)

๋ฐฐ์—ด์˜ type์€ object ์ด๋ฏ€๋กœ, ํ‘œ์˜ a๋กœ ๊ฐ€๊ฒŒ ๋˜๊ณ  exoticToPrim์€ GetMethod(๋ฐฐ์—ด, @@toPrimitive) ์ด๋ผ๊ณ  ํ•œ๋‹ค.
(์ข€ ์–ด๋ ค์šด๋ฐ ์‰ฝ๊ฒŒ ๋ณด์ž๋ฉด ๊ทธ๋ƒฅ ๋ฐฐ์—ด์˜ ๋ฉ”์†Œ๋“œ์ธ .toString() ์„ ์“ด๋‹ค๋Š” ๋œป์œผ๋กœ ์ถ”์ •๋œ๋‹ค.)

์ด๋ ‡๊ฒŒ ๋ณต์žกํ•œ ์ผ๋ จ์˜ ๊ณผ์ •์„ ํ†ตํ•ด์„œ, template literal๋กœ ๋ฐฐ์—ด์„ ๋ณด๊ฐ„ํ•˜๋ฉด .toString() ์„ ํ˜ธ์ถœํ•˜์—ฌ ๋ฐฐ์—ด์„ ๋ฒ—๊ฒจ ๋ฌธ์ž์—ด๋กœ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋‹ค.

๊ทธ๋Ÿฌ๋ฉด .toString() ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ€์ง€์ง€ ์•Š๋Š” undefined ๋‚˜ null ์€ ์–ด๋–ป๊ฒŒ ๋ ๊นŒ?

์•„๊นŒ table์— ์žˆ๋Š” ๋‚ด์šฉ์„ ์ฐธ๊ณ ํ•ด๋ณด์ž๋ฉด, undefined์€ "undefined" ๋กœ ๋ณ€ํ™˜๋˜๊ณ , null์€ "null"๋กœ ๋ณ€ํ™˜๋œ๋‹ค.

โ—๏ธ ์•Œ์•„๋‚ธ 2๊ฐ€์ง€

  • template literal์€ "" + ๋ณ€์ˆ˜ + "" ์ฒ˜๋Ÿผ ๋™์ž‘ํ•œ๋‹ค.

  • ๋ฐฐ์—ด์„ template literal๋กœ ๊ฐ์Œ€ ๊ฒฝ์šฐ ์•”์‹œ์  ๊ฐ•์ œ ๋ณ€ํ™˜์ด ์ผ์–ด๋‚˜ ์ถ”์ƒ์—ฐ์‚ฐ์„ ํ†ตํ•ด .toString() ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋ฐฐ์—ด์ด ๋ฒ—๊ฒจ์ง€๊ณ  ๋ฌธ์ž์—ด์ด ๋ฐ˜ํ™˜๋œ๋‹ค.


์ง„์งœ ๊ฐœ๋ฌด์‹œํ–ˆ๋˜ template literalํ•œํ…Œ ๊ฐœ ๋šœ๋“œ๋ ค ๋งž์€ ํ•˜๋ฃจ์˜€๋‹ค. ์•Œ์•„๋‚ด๋Š”๋ฐ 2์‹œ๊ฐ„, ์ •๋ฆฌํ•˜๋Š”๋ฐ 2์‹œ๊ฐ„ ๊ฑธ๋ ธ๋‹ค. ์•„์ฃผ ์˜๋ฏธ์—†์ง„ ์•Š์•˜๋‹ค. ๋‚˜๋ฆ„๋Œ€๋กœ ์–ด๋–ป๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋Œ์•„๊ฐ€๋Š”์ง€ ๊ณต๋ถ€๊ฐ€ ๋œ ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋ž˜๋ดค์ž ๊ฐœ๋ฏธ๋˜ฅ๊พธ๋ฉ๋งŒํผ๋„ ์•„๋‹ˆ๊ฒ ์ง€๋งŒ,,

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ˆ„๊ฐ€ ๋Œ€์ถฉ ๋งŒ๋“ค์—ˆ๋‹ค๊ณ  ํ•œ ๊ฑฐ์•ผ? ์ด๋ ‡๊ฒŒ ๊ฐœ ๋ณต์žกํ•œ๋ฐ... ์ด์ œ ๋‚ด ์•ž์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊นŒ๋ฉด ์‚ฌ์‚ดํ•ฉ๋‹ˆ๋‹ค. ์ž๊นŒ์‚ด


ํ˜น์‹œ๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์„ธ์š” ! ์ €์˜ ์„ฑ์žฅ์˜ ํฐ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.๐ŸŒฑ

0๊ฐœ์˜ ๋Œ“๊ธ€