• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 변수와 문자열의 조립

자바스크립트에서는 변수에 담긴 값을 사용하여 메시지를 출력할 수 있습니다. 아래는 그 방법을 두 가지로 보여주는 예시입니다.

문자열 더하기 방법

const name = "철수";
const age = 8;
const school = "다람쥐초등학교";

console.log(name + "는 " + age + "살 이고, " + school + "에 다닙니다.");

해당 방법은 + 연산자를 사용해 각 부분을 연결하는 방식입니다. 단, 이 방법을 사용할 때, 가독성도 저하되고, 코드 길이가 증가하게 되면 유지보수, 디버깅이 어렵기 때문에 많은 개발자들은 템플릿 리터럴을 선호하게 됩니다.

템플릿 리터럴 방법

const name = "철수";
const age = 8;
const school = "다람쥐초등학교";

// 템플릿 리터럴 
console.log(`${name}는 ${age}살 이고, ${school}에 다닙니다.`);

// 템플릿 리터럴 여러줄 응용
console.log(`
	안녕하세요!
	철수는 ${age}살 입니다.
	그리고 ${school}에 다닙니다.
`)

위 방법은 백틱()을 사용하여 문자열을 감싸고, ${}를 통해 변수를 직접 삽입합니다. 이렇게 작성된 코드는 가독성을 높이고, 코드의 간결함을 유지하는 데 도움을 줍니다. 백틱()을 사용해서 텍스트를 여러줄로 만들 수도 있습니다.

또한, 조립된 코드를 변수로 저장하여 출력하는 방법도 있습니다.

const 내가만든문장1 = name + "는 " + age + "살 이고, " + school + "에 다닙니다."
const 내가만든문장2 = `${name}는 ${age}살 이고, ${school}에 다닙니다.`
const 내가만든문장3 = `
	안녕하세요!
	철수는 ${age}살 입니다.
	그리고 ${school}에 다닙니다.
`

console.log(내가만든문장1) // 철수는 8살 이고, 다람쥐초등학교에 다닙니다.
console.log(내가만든문장2) // 철수는 8살 이고, 다람쥐초등학교에 다닙니다.
console.log(내가만든문장3)
// 안녕하세요!
// 철수는 8살 입니다.
// 그리고 다람쥐초등학교에 다닙니다.

📝 실습 코드