자바스크립트에서 변수 표시할 때 ${}와 $()의 차이

${} (템플릿 리터럴)

- 백틱(``)으로 감싸여 있다.

문자열 내에서 변수나 표현식을 포함할 수 있다.

여러 줄의 문자열을 작성할 때 유용하다.

 

$() (제이쿼리)

jQuery 라이브러리에서 제공하는 함수

주로 HTML 요소를 선택하거나 조작할 때 사용

 

예시

      function makecard() {
        let image = $("#image").val();
        let title = $("#title").val();
        let date = $("#date").val();
        let content = $("#content").val();

        let temp_html = `
        <div class="col">
          <div class="card h-100">
            <img
              src="${image}"
            />
            <div class="card-body">
              <h5 class="card-title">${title}</h5>
              <p class="card-text">${content}</p>
            </div>
            <div class="card-footer">
              <small class="text-body-secondary">${date}</small>
            </div>
          </div>
        </div>
        `;
        $("#card").append(temp_html);
      }

 

예를 들어 이러한 함수를 만들었다고 하자.

let image = $("#image").val();

 

1. $("image")는 JQuery 선택자가 되고, 괄호 안에 있는 "image"는 id가 image인 HTML 요소를 뜻한다.

즉, $("image") JQuery 선택자는 id가 image인 HTML 요소를 jQuery 객체로 반환한다.

2. .val() 메서드는 선택된 요소의 값을 가져온다.

let temp_html = `
<div class="col">
  <div class="card h-100">
    <img
      src="${image}"
    />
    <div class="card-body">
      <h5 class="card-title">${title}</h5>
      <p class="card-text">${content}</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">${date}</small>
    </div>
  </div>
</div>
`;

여기서 보이는 ${image}, ${title}, ${content}, ${date}는 모두 id가 image, title, content, date인 HTML 요소를 가리킨다.

원래 있던 카드 형식에 ${image}, ${title}, ${content}, ${date}를 넣어서 새로운 정보가 담긴 카드를 생성하고, 그 html 코드를 temp_html이라는 변수에 뱁틱(``)으로 감싸서 넣는다.

$("#card").append(temp_html);

마지막에 나오는 이 코드는 새로운 카드(temp_html)을 id가 card인 HTML 요소에 붙이는 코드.

즉, 새로운 카드를 하나 추가하는 작업을 수행한다.