hoon's bLog

Javascript 자바스크립트 코딩의 기술 1장 변수 할당으로 의도를 표현하라 (2) 본문

IT/Javascript

Javascript 자바스크립트 코딩의 기술 1장 변수 할당으로 의도를 표현하라 (2)

개발한기발자 2023. 11. 14. 10:22
반응형

1장 변수 할당으로 의도를 표현하라

tip3. 블록 유효 범위 변수로 정보를 격리하라

var로 변수를 선언한 경우에는 함수 내부 어디서든 접근이 가능하다.
호이스팅(hoisting) 컴파일 과정을 통해 변수가 선언되기도 전에 접근이 가능하다.

예제코드를 통해 확인해 보자!

<body>
  <ul>
    <li>클릭하면 0 기대</li>
    <li>클릭하면 1 기대</li>
    <li>클릭하면 2 기대</li>
  </ul>
</body>
<script>
    const items = document.querySelectorAll("li");
    
    for (var i = 0; i < items.length; i++) {
      items[i].addEventListener("click", () => {
        alert(i);
      });
    }
</script>

 

  • line 3부터 클릭 시, 순서대로 0, 1, 2가 아닌 3, 3, 3 alert를 확인할 수 있다.
  • var로 할당한 변수는 함수 유효 범위를 따르기 때문에 함수 내에서 마지막으로 할당한 값을 참조한다.
  • 따라서 i를 선언한 시점이 아닌, 코드를 호출한 시점의 i를 반환하게 되는데, i=2 일 때 반복문을 실행하고 나서, 후위 연산자에 의해 i에 +1이 미리 연산되어 할당된 후 i=3인 채로 남아 있고, i=3 일 때 반복문이 중지하면서 유저가 클릭 시 3, 3, 3인 값을 반환받게 된다!
  • 따라서 이에 var가 아닌 let을 사용하면, for 문이 반복될 때마다 값을 잠그며 우리가 원하는 값을 반환받을 수 있다.

tip4. 템플릿 리터럴(Template Literal)로 변수를 읽을 수 있는 문자열로 변환하라

템플릿 리터럴(Template Literal)은 내장된 표현식을 허용하는 문자열 리터럴이다.

ES2015 사양 명세에서는 "template strings"라고도 불려 왔다.

예제를 통해, 변수를 연결하지 않고 새로운 문자열로 만드는 방법을 살펴보자.

function generateLink(image, width) {
    const widthInt = parseInt(width, 10);
    return 'https://' + getProvider() + '/' + image + '?width=' + widthInt;
}

function generateLinkWithBacktick(image, width) {
    const widthInt = parseInt(width, 10);
    return `https://${getProvider()}/${image}?width=${parseInt(width, 10)}`;
}
  • generateLink 함수에서는 기존의 방식대로 '+' 연산자를 이용해서, 가져온 값들을 연결하여 url을 return 해주고 있다.
  • generateLinkWithBacktick 함수에서는 백틱(`)을 이용하여 문자열로 연결해주고 있고, 백틱 안에서는 $와 중괄호를 이용해 ${값}의 형태로 사용할 수 있다.
728x90
반응형
저작자표시 비영리

'IT > Javascript' 카테고리의 다른 글

Javascript 자바스크립트 코딩의 기술 2장 배열로 데이터 컬렉션을 관리하라 (2)  (0) 2023.11.16
Javascript 자바스크립트 코딩의 기술 2장 배열로 데이터 컬렉션을 관리하라 (1)  (0) 2023.11.15
Javascript 자바스크립트 코딩의 기술 1장 변수 할당으로 의도를 표현하라 (1)  (0) 2023.10.26
Javascript regular expression 정규식 표현 및 사용  (0) 2023.07.03
Javascript 예외 처리 try catch, exception  (0) 2023.07.02
'IT/Javascript' Related Articles more