[JavaScript] 자바스크립트 변수의 이해와 사용

자바스크립트 변수의 이해와 사용

---

변수란?  "데이터를 담아두는 그릇"

예를 들어 사과판매 어플리케이션을 개발한다고 가정하였을때 사과의 갯수(count), 금액(amount) 등 필요한 데이터를 어디간에 두고 사용해야한다. 이때 변수라는 그릇을 사용하면 해당 자료를 가지고 갯수를 새거나 연산을 할때 사용할수 있다.

변수선언

변수선언은 아래와 같다. 

	
/* var 변수명 [=초기값] */

//1. 한번에 하나의 변수만 선언
var count;
//2. 한번에 여러개의 변수를 선언 ( ',' 로 구분 ) 
var count, amount;
//2. 변수 선언 과 함께 초기화 
var count = 10;

위와 같이 변수를 선언하는 방법은 여러가지가 있다. 

변수명 앞의 var 는 붙이지 않아도 에러가 발생하지 않지만 일반적으로 변수명 앞에는 var 를 붙여주는것이 좋다.

---

명명규칙

변수선언에는 몇가지 규칙이 있다.

1) 시작문자는 영문자, "_", $ 중 하나로 시작해야 한다.

2) 예약어는 사용할 수 없다.

3) 영문자의 대소문자를 구분한다.

	
/*
* 1. 시작문자는 영문자, "_", $ 중 하나로 시작해야 한다.
* 2. 예약어는 사용할 수 없다.
* 3. 영문자의 대소문자를 구분한다.
*/

var *count = 0; //에러! 시작문자의 특수기호는 _ 또는 $ 만 사용
var _count = 0; //정상
var switch = 0; //에러! 예약어사용
var switchNum = 0; //정상
console.log(switchnum); //에러! 대소문자를 구분

위와 같이 명명규칙에 어긋난 변수명은 에러를 발생시킨다.

매번 자바스크립트 변수명을 고민하기전에 관습적으로 사용할고있는 명명기법을 살펴보자

명명기법

카멜 기법	시작문자는 소문자이며 뒤에 오는 단어 첫번째는 대문자를 사용	var switchNum;
파스칼 기법	단어의 첫문자를 대문자로 표기	var SwitchNum;
언더스코어 기법	시작문자는 소문자이며 단어연결시 언더스코어 사용	var switch_num;

위의 명명기법은 권고사항이므로 다르게 사용하여도 에러가발생하지는 않지만 코딩시 가독성을 위해 권고하고있다.

보통 카멜기법은 변수 또는 함수선언시 주로 사용되며 파스칼기법은 클래스 생성시 사용된다.

---

데이터 형 

지금까지 변수 선언하는 방법에 대해 알아보았다. 그렇다면 변수의 타입에는 문자도 있고 정수,소수 도 있으며 참/거짓도 있다. 이러한 것들은 언제 정해지는걸까?

자바스크립트는 동적자료형을 가진다. 이 말은 즉 미리 변수의 타입을 정하는것이 아닌 변수에 들어가는 값에 따라 변수의 타입이 변한다는 말이다.

var u; //undefined
var n=0; //Number
var s = "hello"; //String

위와같이 변수선언 또는 초기화시 데이터형이 정해지게된다. 또한 고정적인것이 아닌 Number형으로 초기화된 변수에 문자열을 넣으면 해당변수는 String형 변수가된다. 이와같은 동적자료형은 개발자들에게 편의를 주지만 아래와 같이 정확하지 않은 결과를 반환할수도 있다.

var n = 0; //Number
var m = "0"; //String

if( n == m ){
	alert(true);
}else{
	alert(false);
}

위의 결과는 무엇일까? 기타 프로그래밍 언어를 사용해본 사람이라면 false 라고 생각할 수 있지만 위의 결과는 true 이다. 숫자 0 과 문자열 "0" 은 정확하게 따지면 같지 않지만 자바스크립트 는 두 변수를 같은 값으로 인식한다. 따라서 위와같은 상황이 발생할 경우 정확하지 않은 결과라고 할수도 있다.

본론으로 들어와서 자바스크립트의 데이터형은 크게 기본형과 참조형, 특수형 이 존재한다. 기본형은 String, Number 와 같이 변수가 변수명으로 기억공간에 공간이 생기며 그 공간안에 있는 데이터를 직접참조하며 참조형은 참조형 변수명으로 생긴 공간이 생기는데 그 공간안에는 값이 아닌 메모리 주소(address) 가 들어가며 메모리 주소 공간에 데이터가 있다. 기본형변수와 참조형변수의 차이점은 추후 따로 포스팅하겠다. 

기본형 

숫자(Number), 문자열(String), Boolean

특수형 

널(Null), Undefined 

참조형

배열(Array), 객체(Object)

Number

숫자는 정수와 부동소수점 값을 가지며 정수는 10진수, 8진수, 16진수로 나뉜다.

10진수는 따로 설명할 필요가 없으나 한가지 주의할점은 숫자 앞에 0 을 넣을 수 있지만 0뒤에오는 숫자가 전부 7이하라면 8진수로 인식한다.

16진수는 숫자 앞에 0x 또는 0X 를 붙이면 사용할수있다.  0x 뒤는 (0123456789ABCDEF) 까지 넣을수있으며 해당 범위를 넘어갈 경우 에러가발생한다.

8진수는 숫자앞에 0(숫자) 를 넣고 뒤에는 범위(01234567) 안의 숫자를 넣으면 된다. 해당범위를 넘어서는경우 10진수로 인식한다.

var num1 = 123; // 10진수 -> 123
var num = 0323; // 8진수 -> 10진수 : 420
var num = 0xF; // 16진수 -> 10진수 : 15

부동소수점은 현재로는 소수점은 부동소수점으로 표현한다고만 이해하고넘어가자 추후 이부분만 따로 포스팅 하도록 하겠다.

String

문자열(String) 형은 말그대로 문자열text 를 저장하기 위한 데이터형이다. 따라서 아래와 같이 사용하면 된다.

var str = "문자열입니다";

Boolean

Boolean의 리터럴은 2가지다. true(참) 또는 false(거짓) 

var bool = true;
var num1 = 1, num2 = 1;
if( num1 != num2 ){
	bool  = false;
}

위와 같이 직접 true 또는 false 를 입력할수 도있겠지만 그러면 프로그래머에 의해 잘못된 boolean 값이 들어갈 수 있다.

그래서 그럴땐 아래와 같이 사용하면 된다.

var num1 = 2, num2 = 2;
var bool = num1 == num2;

위의 결과는 동일하게 true 이다. "==" 는 논리연산자 이며 두개의 값이 같은지 확인한다. 결과가 true 일경우 반환되는 값은 Boolean 형 true 이다.  이방법은 변수에 boolean 값을 담는것인데 굳인 변수에 담지않고 바로 조건문에 사용하는것이 코드량을 줄일 수 있다.

var num1 = 2, num2 = 2;
if( num == num2 ){
	//true 일때 처리
}else{
	//false 일때 처리
}

Null

Null 의 리터럴 은 null 밖에 오지않지않으며 값이 null을 뜻한다. 

Undefined

Undefined 의 리터럴은 undefined 한가지이며 변수선언을 하고  초기화 하지않을경우 undefined 이다.

null과 undefind 의 차이는 null 은 변수가 null 를 입력받은것이고 undefined 는 아무것도 입력받지 못한 변수이다.

배열(Array)

배열은 하나의 변수에 복수의 값을 넣을때 사용하며 특정위치 의 데이터를 조회하고 싶다면 해당 위치번째 index 로 찾을 수 있다.

주로 아래와 같이 사용한다. 

var arr = ["one","two","tree"];

for( var i=0; i<arr.length; i++ ){ 
	console.log("arr 변수에 "+i+"번째 의 값 : "+arr[i]);
}

객체(Object)

객체는 배열과 마찬가지로 하나의 변수에 복수의 값을 넣을때 사용하지만 객체는 key:value 로 데이터가 들어가기 때문에 key 값을 이용해서 데이터를 찾는다는 점에서 유용하게 쓰일 수 있다. 사용예는 아래와같다.

var obj = {name:"홍길동" , age:"29" , address:"서울시"};

console.log(obj.name); //홍길동
console.log(obj["age"]); //29

사용방법은 변수명.key 와 같이 '.' 를 붙여서 사용하는 방법과 변수명["키"] 와 같이 사용하는 방법 둘다 사용할 수 있다.

참조)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Numbers_and_dates