JavaScript 변수 설정 시 유의점

처음 배우는 중이라 계속 업데이트 될 수 있습니다.

<JavaScript에서 선언할 수 있는 변수>

• var
• let
• const

- var

다른 언어에서의 전역변수와 유사하다는 느낌을 받았습니다. 검색해보니 위험부담이 있기 때문에 가능하면 사용을 피하는 것이 좋다고 합니다.

• var는 선언한 위치가 어디든 javascript가 항상 그 선언을 최상단으로 끌어올린다.(Hoisting)
• 코드블록 '{}' 안에서 var를 이용해 선언을 했어도 밖에서 접근이 가능하다.

예시)

{
  num = 3;
  var num;
}
console.log(num);

num을 선언하기 전에 대입이 가능하며 코드블록 밖에서도 num에 접근해 출력할 수 있었습니다.
이 때문에 코드가 길어질 경우 실수로라도 같은 변수를 혼용하게 되면 꼬여버릴 가능성이 생겨버립니다.

- let

재할당이 가능한 변수입니다. 블록 스코프를 가지고 있어 코드블록 안에서 선언된 let 변수는 코드블록 밖에서 접근할 수 없습니다.

예시)

{
  let num = 3;
}  
console.log(num); //Uncaught ReferenceError: num is not defined

- const

재할당이 불가능한 상수입니다. 블록 스코프를 가집니다.
헷갈릴 수 있는 부분을 예시로 들어보았습니다.

const list = [];
list.push(1);
//list는 배열이 할당되어 있으며, 상수라 하더라도 배열에 요소를 추가하는 것은 가능
const greetings = {
  message: "say Hello",
  times: 4
}
//일 때,
greetings = {
  words: "Hello!",
  number: "four"
} // error: Assignment to constant variable.
//의 형태로 할당은 불가능하지만
greeting.message = "say Hello!";
//의 형태로 업데이트는 가능

변수의 값이 변경되어야 할 때는 let을 사용해야겠지만, 그 외에는 오류를 방지하기 위해, 가독성을 위해(반드시 초기화를 해야하기 때문에 파악이 빠르고, 변경될 일이 없기 때문에 협업 시 다루기 쉬움) const를 사용하는 것이 권장되는 편이라고 합니다.

자율적으로 변수 해석?

뭐라고 표현해야할지 모르겠네요. JavaScript의 경우 특이한 경우가 있어 유의해야 한다고 합니다. 바로 예시를 들겠습니다.

const num = '4' // 문자열
num + 2 // '42' 문자열 출력. 문자열에 '2'가 추가
-num // 숫자 -4 출력. 연산자 -가 앞에 있기 때문에 '4'를 숫자 4로 해석
+num + 2 // 6 출력. '4'를 4로 인식하고 6으로 계산

개발할 때, 협업 시 남의 코드를 읽을 때 유의해야겠습니다. 썸네일의 짤을 보면 비슷한 예시가 몇가지 더 있습니다. 후, 머릿속을 떠나질 않네요.

템플릿 리터럴

'`'(백틱)을 사용하면 문자열 사이에 변수를 넣어 표현할 수 있습니다.
예시)

const a = "뭘까요";
const b = `10 + 3 = ${a}`;
// b 출력 시 10 + 3 = 뭘까요

<팁?>

• JavaScript는 개발자의 입력을 나름 자유롭게 해석하기 때문에 'use_strict'; 기능을 사용해 엄격하게 규칙을 적용할 수 있다고 합니다. 정확히 어느 부분에서 도움을 받을 수 있고 어느 범위까지 가능한지는 따로 테스트해 볼 계획입니다.