images

변수

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

변수 선언

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 출력

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

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

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

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

1
2
3

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 자체가 값이라고 보시면 됩니다. 즉, 값이 없다라는 값인 것이죠

템플릿 리터럴

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

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

위처럼 말이죠

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

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

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

Tags: javascript 자바스크립트 변수

← MongoDB 세팅방법 자바스크립트 코딩의 기술 책 리뷰 →

자바스크립트의 변수

변수