Javascript 다지기 - 변수

변수란 무엇일까?

우리는 수학에서 변수라는 말을 많이 들어봤을 텐데,

수학에서 변수는 정해지지 않은 임의의 값을 표현하기위한 기호를 말합니다.

컴퓨터 프로그래밍에서의 변수는 특정 값을 저장 하는 메모리 공간을 의미합니다. 

더 쉽게 말하면 어떤 값을 나중에 재사용하기 위해 이름표를 붙여두는 것이라고 생각하면 편할 것 같습니다!

그렇다면 변수는 왜 필요할까?

console.log(10+10); // 라는 간단한 출력문

이 출력문으로 예시를 들면 결과는 20이 나오겠죠?

하지만 이 값(20)을 다시 사용하고 싶은데 이 값이 여러 번 혹은 여러 곳에서 사용하고 싶을 때 계속 10+10을 입력하는 것을 비효율적이겠죠? 막말로 10+10이라는 식을 100곳에 사용했다고 하면 나중에 수정할 때 100번 수정해야겠죠....? 엄청나게 비효율적이고 개발자라면 클린코드를 추구할 텐데 더티 코드가 되어버리겠죠? 이것을 해결하기 위해 우리는 변수를 사용하는 것입니다.

let sum= 10+10; // 변수에 값을 저장

 이런 식으로 sum이라는 이름으로 값을 저장하면 20의 값을 여러 번 재사용할 수 있습니다. 

-> 이로 인해서 우리는 코드의 재사용성, 가독성, 유지보수 전부 편하게 할 수 있고, 변수는 앞서 말한 3가지의 필수적인 개념입니다.

변수선언

자바스크립트에서 변수는 3가지 방법으로 선언할 수 있습니다 (var, let, const)

선언 방식	사용 권장	특징
var name= "lime";	지양	함수 범위, 호이스팅 이슈 있음
let age= 2;	권장	블록 범위, 값 변경 가능
const  color= "black";	권장	블록 범위, 값 변경 불가능(상수)

* var의 이슈에 관련해서는 따로 정리해서 올리겠습니다.

변수의 실행 시점과 호이스팅

자바스크립트는 코드를 실행하기 전 변수 선언부를 코드 상단으로 끌어올리는 현상 즉 선언한 변수를 먼저 컴파일 하는 현상이 있습니다. 이를 **호이스팅(hoisting)**이라고 합니다.

console.log(test); // undefined
var test = 10;

위에서 아래로 동작하는 코드라면 errror 떠야겠죠? 하지만
이 코드는 아래 코드와 같은 방식으로 동작합니다.

var test;
console.log(test); // undefined
test = 10;

 *let과 const는 호이스팅은 되지만 초기화는 되지 않기 때문에, 아래처럼 작성하면 에러가 납니다.

 

(하지만 var를 지양하기 때문에 let, const를 사용하는데 항상 선언한 뒤에 사용하는 습관을 들이는 것이 아주 중요합니다!)

 

요약

• 변수는 값을 저장하고 재사용하기 위한 이름표입니다.
• 변수는 코드의 가독성, 재사용성, 유지보수에 도움을 줍니다.
• var, let, const 중에서는 let과 const 사용을 권장합니다.
• 변수는 코드 실행 전에 호이스팅이 일어나므로, 선언 위치에 주의해야 합니다.