[JS] 변수 알아보기

변수

변수는 프로그램을 작성하는데 가장 중요한 요소입니다.
자바스크립트에서는 타입이 없는 변수를 var, let, const라는 선언자를 사용하여 선언하고, 이후 변수명을 입력해 최종적으로 변수를 선언하게 됩니다.

변수 선언

var age; // 1개의 변수 선언
var egg, lemon; // 2개 이상의 변수 선언
console.log(age); // undefined -> 변수를 선언하기만 하면 변수 값이 없다는 뜻인 undefined를 뱉어냅니다.

age = 28; // = 연산자를 통해 age 변수에 28을 넣어줍니다.
console.log(age); // 28 출력

var name = "junjang"; // 변수 선언과 함께 변수 값을 할당합니다.
console.log(name); // junjang 출력

변수 끌어올림(호이스팅)

프로그램은 윗줄부터 아래로 실행이 되지만 변수는 해당 원칙을 따르지 않습니다.

console.log(hello); // undefined
var hello;

hello가 밑에 선언 되어있지만 콘솔에 undefined가 출력된다는 것은 변수 끌어올림 현상인 호이스팅이라고 합니다. 하지만 선언과 동시에 전체를 호이스팅하지 않습니다.

console.log(hello); // undefined
var hello = "hello";
console.log(hello); // hello

호이스팅을 한다면 hello도 가져가야하는거 아닌가? 라는 생각을 가질 수도 있지만 var hello 부분만 호이스팅 되기 때문에 첫째 결과와 둘째 결과가 다르게 나타납니다.이는 자바스크립트만의 고유한 특징이어서 다른 언어를 다루었다면 꼭 주의깊게 봐야합니다.

데이터타입과 변수

타 언어(JAVA, C 등)는 변수에 타입이 있기 때문에 정적 타입 언어라고 부르지만, 위에서 말씀드렸듯이 자바스크립트는 타입이 없이 var선언자를 통하여 변수를 선언하기 때문에 동적 타입 언어라고 부릅니다.

자바(java)

String name = "junjang";
int age = 28
float sight = 1.2
boolean isMale = true

자바스크립트(javascript)

var name = "junjang";
var age = 28;
var sight = 1.2;
var isMale = true;

자바와 자바스크립트를 비교한 모습입니다. 보는 것과 같이 따로 타입이 없이 변수를 선언할 수 있습니다.

문자열

문자열은 " " 혹은 ' ' 사이에 문자를 삽입하여 표현합니다.

"안녕하세요 프론트엔드 개발자를 꿈꾸는 김준형입니다.";
"백엔드 개발보다 재미있는 것 같아요!";
"";
"28";

따옴표 안에 어떤 값이 들어가던 문자열 취급을 받게 됩니다.

특수값

자바스크립트에는 undefined와 null 두 가지의 특수값이 있습니다.
이 두가지의 가장 큰 차이점은 무엇일까요?

• undefined : 값이 할당되어있지 않다.(정의되어있지 않다.)
• null : 아무 것도 없다.

 

큰 차이지만 이 두 가지가 참 헷갈립니다.
undefined는 애초에 값 자체를 넣어주질 않았다고 이해하시면 편합니다. 예를 들면

• 값을 아직 할당하지 않은 변수
• 없는 배열 값을 읽으려고 했을 때
• 반환 값이 없는 함수를 호출했을 때

 

위처럼 애초에 값 자체가 없을 때 나타나는 값이라고 생각하면 됩니다.

반면에 null은 null 자체가 값이라고 보시면 됩니다. 즉, null이라는 값인 것이죠

템플릿 리터럴

템플릿 리터럴은 ES6에서 추가된 문자열 표현 문법입니다. 기존에 " ", ' '를 활용해 문자열을 만들었지만 문자열이 길어지거나, 사이에 변수 값이 들어간다면 + 연산자를 사용해야 하는 등 번거로움이 많았습니다.

var name = "junjang";
"안녕하세요 제 이름은 " + name + "입니다."; // 안녕하세요 제 이름은 junjang입니다.

위처럼 말이죠

하지만 템플릿 리터럴 덕분에 저런 수고가 확 줄었습니다!

var todayDate = "Monday";
`오늘의 요일은 ${todayDate} 입니다.`; // 오늘의 요일은 Monday 입니다.

여기서 ${}는 플레이스 홀더로서 선언한 변수를 안에 넣고 문자열 처럼 표현할 수 있습니다.

let, const

let과 const는 ES6 부터 추가된 문법으로 블록 유효 범위를 가지는 변수를 선언합니다. 블록 유효 범위란 중괄호({}) 안에서만 유효한 범위를 말합니다.

let

let은 기존에 사용하던 var와 사용법이 같습니다.

let morning; // var과 사용법이 같습니다.
let night = "bye"; // 초기값을 설정할 수 있습니다.

하지만 var와 let의 가장 큰 차이점은 유효 범위입니다.

let apple = "outer apple";
{
  let apple = "inner apple";
  let egg = "inner egg";
  console.log(apple); // inner apple
  console.log(egg); // inner egg
}

console.log(apple); // outer apple
console.log(egg); // egg is not defined

예제에서 보이듯 중괄호(블록) 안에 선언한 변수 2개(apple, egg)는 같은 블록 내에서 이상 없이 출력되지만, 중괄호 외부에서는 전혀 알지 못하는 변수입니다.


또한 똑같은 변수명으로 선언할 경우 문법 에러가 발생합니다.

const

const문은 let문과 마찬가지로 블록 유효 범위를 가지면서 한 번만 할당할 수 있는 상수를 선언합니다. 쉽게 말하면 하나의 초기화된 값을 가진 변수라는 말로 이해해도 됩니다.

const food = "kimchi";

food 변수처럼 const로 할당할 변수는 무조건 초기화를 해주어야 합니다.

const food = "kimchi";
const computer; // Uncaught SyntaxError
food = 'bread'; // Uncaught TypeError: Assignment to constant variable.

변수명(computer)만 선언할 경우엔 문법 에러가 발생하고, 변수에 재대입 할 경우 타입 에러가 발생합니다.


하지면 여기서도 예외가 있습니다!
바로 객체나 배열의 형태일 경우 key와 value값을 수정할 수 있다는 것이죠!

const original = { job: "backend", name: "junjang" };
original.job = "frontend"; // {job: "frontend", name: "junjang"}

const로 선언했지만 객체에 접근하여 job의 value가 수정된 것을 볼 수 있습니다.