기초부터 배우는 자바스크립트 1강 (변수)

1강 변수

변수란?

변수는 물건을 보관했다가 필요할 때 다시 꺼내 사용하는 일종의 창고입니다.

창고와 변수의 차이점은 바로 보관하는 내용이 물건 대신 데이터라는 점만 다릅니다.

간단히 정리해 보면 변수는 아래와 같습니다.

1. 변수는 데이터를 저장하는 장소

2. 변수는 데이터를 읽고 쓰고 할 수 있는 장소

위 그림과 같이 하나의 창고라고 생각하면 이해하기 쉬울껍니다.

그럼 이제 위에서 소개한 변수가 무엇인지 알아봤으니 이제 실제 변수(창고)를 한번 만들어볼게요.

var 변수이름 = 값;

변수를 만드는 가장 일반적인 방법입니다.

우리가 사용하는 언어로 이 문법을 번역해보면 "자바스크립트 엔진에게 변수를 하나 만든 후 여기에 값을 저장해 주세요"라고 작성한 것과 같습니다.

그렇다면 여기서 var는 무엇일까요?

사전에서 보시는바와 같이 var는 variable의 약어로써, var는 변수 선언을 의미하는 키워드입니다.

여기서 키워드(keyword)라는 단어가 등장하는데요.

키워드는 이미 특정한 목적으로 만들어져 있는 자바스크립트 요소라고 보면 됩니다.

;(세미콜론)의 의미

문장 맨 뒤에 붙이는 세미콜론은 문장의 끝을 의미합니다.

정리하자면 변수는 "=" 연산자를 기준으로 var에 의해서 "변수이름"으로 변수가 만들어지고 이후 우측에 있는 데이터가 변수에 저장됩니다.

돌발 문제를 하나 내볼게요.

자신의 나이가 담긴 변수 age를 하나 선언해 보세요.

돌발 문제를 보셨을 때, "오케이, var를 이용해서 변수를 선언하면 되겠구만.."이라고 생각하면 잘하셨습니다. 위에 설명을 잘 이해하신겁니다.

변수 여러 개 만들기

한 개의 변수를 생성해 봤으니, 다음으론 여러 개의 변수를 한번 만들어 봐야겠죠?

변수 여러 개를 만드는 방법은 2가지 있습니다.

방법 1 - var를 이용해서 여러 줄로 변수를 구분

이 내용은 굳이 설명을 하지 않아도 될 만큼 쉽게 이해하실 수 있을겁니다. 

그냥 다음 줄에 다른 이름으로 변수를 선언해준 것입니다.

방법 2 - 콤마(,)를 이용해서 변수를 구분

뭔가 복잡해 보입니다.

하지만 자세히 들여다보면 꼭 그렇지는 않습니다. 변수 선언을 의미하는 키워드 var를 하나 작성한 후 콤마를 이용해서 변수이름 = 값을 쌍으로 연속으로 작성한 것뿐입니다.

2가지 방법 중 어떤 방법이 더 좋다라는 것은 없습니다. 둘 주 아무거나 손에 익은 것을 사용하시면 됩니다. 저는 첫번 째 방법에 익숙해서 첫번 째 방법으로 변수를 선언하도록 하겠습니다.

변수이름 생성할 때 주의사항

변수이름을 만들 때는 5가지 정도 주의해야 할 내용이 있습니다.

1. 숫자로 시작하면 안됩니다.

숫자로 시작하는 변수를 만들면 에러가 발생하여 브라우저가 자바스크립트를 실행할 수 없습니다.

2. 대소문자 구분 : value와 Value는 완전히 다른 변수

자바스크립트는 변수 이름이 모두 같더라도 대소문자가 다르면 완전히 다른 변수로 해석합니다.

3. 변수는 대문자가 아닌 소문자로 시작

사실, 자바스크립트에서 변수를 대소문자 구분없이 만들 수 있습니다. 하지만 일반적으로 자바스크립트에선 변수를 소문자로 시작합니다. 일종의 암묵적으로 지켜지고 있는 규칙이라고 보면 됩니다.

4. 변하지 않는 환경 변수의 값을 담는 상수 변수는 모두 대문자로 만든다.

변경하면 안되는 값은 변수 이름을 모두 대문자로 만듭니다.

자바스크립트는 이런 부분을 문법적으로 지원해주지 않기 때문에, 암묵적인 규칙으로 사용을 해야합니다.

5. 여러 단어가 조합되는 경우 낙타표기법(camelcase)로 작성한다.

이 역시 관행일 뿐 반드시 이렇게 해야한다라는 것은 아닙니다.

userName을 username으로 만들어도 되고, user_name으로 만들어도 됩니다.

6. 자바스크립트에서 이미 정의된 예약어(키워드)를 사용하면 안됩니다.

break	기본값	함수	return	var
case	delete	if	switch	void
catch	do	in	this	while
const	else	instanceof	throw	WITH
continue	finally	let	TRY
debugger	for	new	typeof

지금까지 변수 만드는 방법에 대해서 알아봤습니다.

다음 강의에서는 이렇게 만든 변수에 저장할 수 있는 데이터와 저장 방법에 대해서 배우도록 하겠습니다!