[JS] 자바스크립트 제어문 문제 / 템플릿 리터럴 백틱(`)과 달러($) 사용법

이번에 배워본 조건문 if문과 저번에 배웠던 반복문 for문을 이용하면 다음과 같은 예제를 풀 수 있습니다.

 

마무리 문제 1

 

주어진 배열에서 10보다 큰 값을 찾아 화면에 표시하시오.

 

See the Pen Javasciprt_if_6 by leeyanggoo (@leeyanggoo) on CodePen.

 

 

---

마무리 문제 2

 

사용자에게 1보다 큰 수를 입력하게 한 후 입력한 숫자까지 짝수만 더하는 프로그램을 작성해 보세요.

 

let num = parseInt(prompt("1보다 큰 숫자를 입력하세요."));
let sum = 0;

for(let i = 1; i <= num; i++){
    if(i % 2 === 0){
        sum += i;
        console.log(i + "------" + sum + "</br>");
    }
}


let num = prompt("1보다 큰 숫자를 입력하세요.");
let sum = 0;

if(num !== null && n > 1){
    for(let i = 1; i <= n ; i++){
        if(i % 2 == 1){
            continue;
        }
        sum += i;
        console.log(`${i} ----- ${sum} <br>`);
    }
}

 

두 코드의 기능과 결과는 동일하며, 차이점은 입력받은 값의 유효성과 코드 구조에 있습니다.

 

첫 번째 코드는 'parseInt'함수를 이용하여 입력받은 값을 정수로 변환하고, for문을 사용하여 입력받은 숫자까지 반복하면서 각 숫자가 짝수인지 검사합니다.

두 번째 코드는 비교 연산자 '!=='와 논리 연산자 '&&'를 이용하여 입력받은 값이 유효한지 검사한 후 for문 안에서 계산을 수행합니다.

 

첫 번째 코드는 입력받은 값을 정수로 변환은 하지만, 값에 대한 유효성 검사가 없습니다.

두 번째 코드는 입력받은 값을 연산자를 통해 유효성을 검사하지만 입력받은 값이 문자열 형태로 저장되기 때문에 숫자라는 일관적인 형태를 유지하지 못합니다.

for문의 조건식에는 문자열 형태의 변수를 사용해도 아무 문제가 없습니다.

자바스크립트에서는 문자열 형태의 변수를 비교 연산자로 비교할 때, 내부적으로 문자열을 자동으로 숫자로 변환하여 비교합니다.

예를 들어, "10" > "2"는 true를 반환합니다. 하지만, 이러한 자동 변환은 일관성을 유지하기 어려우므로, 가능한 경우에는 문자열 대신 숫자형 변수를 사용하는 것이 좋습니다.

 

따라서 좀 더 안정적인 코드를 작성한다면 두 번째 코드의 변수 선언 시 "let num = parseInt(prompt("1보다 큰 숫자를 입력하세요."))라고 적는 것이 낫다고 하겠습니다.

---

템플릿 리터럴Template Literal

 

첫 번째와 두 번째 모두 console.log를 이용해 출력을 하지만 두 번째는 "탬플릿 리터럴"이라고 하는 ES6부터 도입된 문자열 표기법을 사용합니다.

탬플릿 리터럴의 표기법과 기능은 다음과 같습니다.

 

표기법

템플릿 리터럴은 기존의 문자열 표기법인 따옴표(", ') 대신에 백틱(`)을 사용합니다.

백틱으로 감싼 내부에서 '${ }'를 사용하면 변수나 표현식을 포함시킬 수 있습니다.

 

기능

const name = "Alice";
const message = "Hello, " + name + "!";
console.log(message); // "Hello, Alice!"

const name = "Alice";
const message = `Hello, ${name}!`;
console.log(message); // "Hello, Alice!"

 

기존의 문자열 표기법은 변수를 포함시키기 위해선 문자열과 변수를 연결하는 연산자인 '+'를 사용해야 했지만,

템플릿 리터럴을 사용하면 간단하게 표현이 가능합니다.

 

또한 템플릿 리터럴은 줄바꿈도 그대로 표현이 가능합니다.

 

const multiLine = `
    이건
      여러 줄의
        문자열입니다.
`;

console.log(multiLine);
    이건
      여러 줄의
        문자열입니다.

 

기존의 문자열 표기법에 따라 표현하기 위해선 백슬래시를 사용하여 줄바꿈은 "\n(Line Feed)", 탭은 "\t(Tab)"으로 표현해야 했습니다.

하지만 템플릿 리터럴의 백틱(`)을 이용하면 코드에서 입력한 문자열이 그대로 출력되는 걸 볼 수 있습니다.