🚨 오늘의 문제상황

오늘 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시간 걸렸다. 아주 의미없진 않았다. 나름대로 어떻게 자바스크립트가 돌아가는지 공부가 된 것 같다. 그래봤자 개미똥꾸멍만큼도 아니겠지만,,

---

혹시나 잘못된 정보가 있다면 댓글로 알려주세요 ! 저의 성장의 큰 도움이 될 것 같습니다.🌱