템플릿 리터럴

batteryStatus.textContent = `배터리: ${batteryLevel}%`;
이건 템플릿 리터럴(template literal)이라는 자바스크립트 문법~!

---

1. batteryStatus.textContent

이 부분은 HTML에 있는 특정 요소(여기선 batteryStatus라는 ID를 가진 요소)의 내용을 바꾸는 역할을 해요.

• batteryStatus: 자바스크립트가 HTML에서 id="batteryStatus"인 요소를 찾아서 저장한 변수.
• .textContent: 이 속성은 HTML 요소 안의 텍스트 내용을 가져오거나 바꾸는 기능이에요.

예를 들어, 아래 HTML이 있다면:

<div id="batteryStatus"></div>

batteryStatus.textContent는 이 상자 안의 텍스트를 "배터리: 50%" 같은 내용으로 채우게 됩니다.

---

2. 배터리: ${batteryLevel}%

이 부분은 템플릿 리터럴이라는 문법을 사용한 거예요.

템플릿 리터럴이란?

• 템플릿 리터럴은 문자열을 만들 때 사용하는 새로운 방법
• 백틱(backtick)이라고 불리는 기호()를 사용해요. 보통 문자열을 만들 땐 작은따옴표(')나 큰따옴표(")를 쓰잖아요? 템플릿 리터럴은 백틱()을 씁니다.
• 문자열 안에 변수나 표현식을 쉽게 넣을 수 있는 장점이 있다.

${batteryLevel}의 의미

• ${} 안에 변수를 넣으면, 그 값이 문자열 안에 자동으로 들어가요.
• 예를 들어 batteryLevel이 50이라면, ${batteryLevel}은 50으로 바뀌어요.

---

3. 전체 문자열 만들기

배터리: ${batteryLevel}%는 두 가지를 합쳐서 하나의 문자열로 만드는 거예요:

1. 고정된 텍스트: 배터리: 와 %는 그냥 문자열이에요. 항상 그대로 출력돼요.
2. 변수 값: ${batteryLevel}은 변수의 값을 문자열에 끼워 넣는 역할을 해요.

만약 batteryLevel = 75라면, 이 표현은 자동으로 이렇게 바뀝니다:

배터리: 75%

---

전체 코드의 역할

batteryStatus.textContent = `배터리: ${batteryLevel}%`;

이 한 줄 코드는
1. 배터리 상태를 나타내는 문자열을 만들어서,

• 예: "배터리: 75%"

2. HTML 요소(batteryStatus)의 텍스트 내용을 그 문자열로 바꾸는 역할을 해요.

---

템플릿 리터럴의 장점

템플릿 리터럴을 쓰면 아래처럼 복잡한 코드가 간단해집니다:

batteryStatus.textContent = '배터리: ' + batteryLevel + '%';

위처럼 문자열을 더하는 대신, 배터리: ${batteryLevel}%로 쉽게 쓰는 거죠!

---

요약

batteryStatus.textContent = `배터리: ${batteryLevel}%`;는
템플릿 리터럴을 사용해서 "배터리: 75%" 같은 문자열을 만들고,
그걸 HTML의 텍스트로 표시하는 코드예요! 😊