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

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

- 유효 범위를 따르는 변수를 선언한 경우 함수 내부 어디서든 접근 가능

- 호이스팅: 코드가 시작되기 전에 [변수, 함수 선언이 해당 스코프의 최상단]으로 끌어 올려지는 것을 말한다.

helloWorld(); // Hello World!

function helloWorld(){
  console.log('Hello World!');
}

=> 함수 선언부는 컴파일 단계에서 메모리에 추가된다.
덕분에, 실제 함수 선언을 만나기 전에 함수에 접근할 수 있다.

 

var a;
console.log(a); // undefined
var a = 3;

=> JS는 선언을 hoist하는 것이지 초기화를 hoist하지는 않는다.

=> 변수가 선언되기 전 변수를 사용하더라도 에러 대신에 undefined가 출력된다.

=> 이는 var에만 해당, let과 const는 ReferenceError 발생

 

* 36p ~ 37p var와 let의 차이??

- var로 선언하면 함수 내에서 마지막으로 할당한 값을 참조. 배열 2개를 계속해서 반환.

 

- let으로 선언하면 블록 내에서 선언한 변수가 해당 블록에서만 유효하므로 값이 반복적으로 변경되더라도 이전에 선언한 함수의 값은 변경되지 않는다.

 

 

Tip4. 템플릿 리터럴로 변수를 읽을 수 있는 문자열로 변환하라

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

=> 변수에 할당한 문자열과 따옴표로 감싼 문자열을 연결하는 경우 어수선하다.

 

function greet(name) {
  return `Hi, ${name}`;
}
greet('Leo');
'Hi, Leo';

function yell(name) {
  return `HI, ${name.toUpperCase()}!`;
}
greet('Pankaj');
'HI, PANKAJ!';

=> 따옴표 대신 백틱 `을 사용하여 감싸고 ${}로 변수에 할당한 문자열을 감싼다.

 

function generateLink(image, width) {
  return `https://${getProvider()}/${image}?width=${parseInt(width, 10)}`;
}

=> 템플릿 리터럴로 개선된 url 주소, `백틱으로 전체를 감싸고 메서드, 변수를 ${}로 감싸 가독성이 좋아졌다.