인프런 커뮤니티 질문&답변

Nayeon님의 프로필 이미지
Nayeon

작성한 질문수

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

mouse move 값 활용

자바스크립트 문자열과 숫자 결합 형변환

작성

·

439

0

안녕하세요,

이 부분에서

h1.innerHTML = "x: " + e.clientX + " y: " + e.clientY;

스트링이랑 e.clientX와 e.clientY를 바로 이은 걸 보고

console.log(typeof(e.clientX));

찍어 보니까 `e.clientX`는 Number라고 나오는데 자바스크립트에서는 문자열과 숫자를 형변환 없이 그대로 결합해도 상관 없나요?

읽어 주셔서 감사합니다.

답변 2

1

코딩일레븐님의 프로필 이미지
코딩일레븐
지식공유자

네 단순히 H1 태그에 단순히 string으로 들어가는 것이라 그대로 넣으시면 됩니다.

0

자바스크립트는  자바나 C처럼 타입을 선언하여 쓰는 정적 타입이 아닌 동적 타입 언어이기 때문에 값에 의해 자동으로 타입이 정해지고, 자동으로 형변환이 이루어 집니다.  " "를 붙이면 자동으로 문자열로 변환됩니다.

Nayeon님의 프로필 이미지
Nayeon
질문자

아 제 질문은 Number를 스트링에 연쇄할 때, Number를 스트링으로 형변환할 필요가 없는지에 대한 것이었습니다.

저기서 `"x: "`는 스트링이고, `e.clientX`는 `typeof`로 콘솔에 찍어보니까 `Number`라고 나와서 + 연산자로 두 가지를 연결하는 것이 형변환 없이 가능한지 궁금했습니다. JS와 마찬가지로 파이썬도 동적 언어인데 f-string이나 format 메서드를 사용하지 않고 int나 float을 str와 연결하려고 하면 에러가 떠서요.

그런데 말씀해주신 대로 JS에서 String이 아닌 변수에 ""를 붙이면 문자열로 변환해주지는 않는 것 같습니다.

데이터 타입이 Number인 `e.clientX`를 ""로 감싸면 그냥 "e.clientX"라는 raw string이 되기 때문에 (다시 말해 e.clientX를 ""로 감싸고 console.log로 출력하면 "e.clientX"라고 그대로 나옴) `e.client`의 변수 값을 다이나믹하게 받아오면서 그 값을 스트링으로 변환하려면

1. 백틱(``)으로 이렇게 --> `${e.clientX}` 감싸거나

2. String(e.clientX) <-- 이렇게 해야 할 것 같아요.

그래도 답변 감사합니다.

Nayeon님의 프로필 이미지
Nayeon

작성한 질문수

질문하기