[JavaScript] 기본적인 변수 선언과 데이터형

 

 

변수

변수란 데이터를 넣어두는 그릇이다. 스크립트 중간에 변수에 담긴 데이터 값이 바뀌어도 상관없다.

 

 

 변수 선언하기 - var 명령어

변수를 이용하기 위해서는 미리 변수를 선언해야한다. 선언이란, 변수의 이름을 JavaScript 에 등록하고 값을 넣어두기 위한 영역을 메모리상에 확보하는 것을 말한다. 변수 선언은 변수의 이름과 그 변수 들어갈 초기값을 정의할 수 있다. 초기값은 필수가 아니다.

var 변수명 = [초기값];

 

변수 선언 예시) 

var a;

var a, b;

var c = 10;
var d = 'Hello, World';

 

변수명만 정의할 경우 undefined 가 자동으로 변수에 할당된다.

 

 

+ 변수 선언은 임의

JavaScript 에서 변수의 선언은 필수가 아니다. 왜냐하면 명시적으로 변수가 선언되지 않아도 처음 값이 대입되는 타이밍에 JavaScript 가 암묵적으로 변수의 선언을 시행하기 때문이다. 다음 코드에서 var 명령어로 선언하지 않은 msg 변수는 JavaScript에 의해 암묵적으로 변수가 선언되었다.

msg = "Hello";
window.alert(msg);

 

 

 변수 선언하기 - let 명령어

변수를 선언하는데에 var 명령어 말고 let 명령어를 사용할 수 있다. let 명령은 var 명령과 동일한 구문으로 사용할 수 있다.

let a;

let a, b;

let c = 10;
let d = 'Hello, World';

 

var 명령어와 let 명령어의 차이는 다음과 같다.

 

㉮ 변수의 중복을 허가하지 않는다.

let 명령은 동일한 명칭의 변수를 허가하지 않는다. 따라서 아래의 코드는 오류가 발생한다.

let msg = 4;
let msg = 6;

만약 var 명령어를 사용했다면 4의 값이 6으로 덮여 최종적으로 msg = 6 이 된다.

 

㉯ 블록 스코프를 인식한다.

let 명령이 더 세세하게 변수의 유효 범위를 관리할 수 있다.

 

 

 식별자의 명령 규칙

식별자란 스크립트를 구성하는 요소에 붙여진 이름을 말한다. 최소한의 식별 규칙은 다음과 같다.

• 첫번째 문자는 영문자/언더스코어(_)/달러표시($) 중 하나여야 한다. ex) _name, $msg
• 두번째 문자 이후에는 첫번째에서 사요알 수 있는 문자 또는 숫자여야한다. ex) msg1
• 변수명에 포함된 영문자의 대문자/소문자는 구별되어야한다. ex) name, Name
• JavaScript 에서 의미를 갖는 예약어가 아니어야 한다.

 

+ 식별자의 주요 기술 방법

• cameCase 기법 : 앞 단어 첫 문자는 소문자, 그 이후의 단어의 첫 문자는 대문자 ex) lastName
• Pascal 기법 : 모든 단어의 첫 문자는 대문자 ex) LastName
• 언더스코어 기법 : 모든 단어의 첫 문자는 소문자, 단어 간은 '_'로 연결 ex) last_name

일반적으로 변수명이나 함수명은 cameCase 기법으로 상수명은 언더스코어 기법으로 클래스(생성자)명은 Pascal 기법으로 나누어 사용한다.

 

 

상수

상수란 코드 안에 나타나는 의미 있는 값으로 미리 이름을 붙여둔 것이다. 한 번 정의하면 값을 변경할 수 없다. 상수를 선언하는 방법은 const 명령을 사용하면 된다.

const USER_NAME = "Chilly";

 

 

데이터형

데이터형이란 데이터의 종류를 말한다. 자바스크립트에서는 데이터형에 대해 강하게 인식하지 않는 언어이다. 문자열을 대입했던 변수에 수치를 대입해도 괜찮고 그 반대의 처리도 괜찮다. 즉, 자바스크립트에서는 변수는 대입되는 값에 따라서 데이터형이나 크기가 변환된다. 다음의 연산도 허락된다.

var msg = "HEllo";
msg = 222;

 

 

 JavaScript 의 주요 데이터형

분류	데이터형	개요
기본형	숫자형(number)	숫자를 나타내는 데이터형이다.
	문자열형(string)	작은따옴표/큰따옴표로 감싸인 0개 이상의 문자 집합을 말한다.
	논리형(boolean)	true(참) 혹은 false(거짓) 을 나타낸다.
	심벌형(symbol)	심벌을 나타낸다.
	특수형(null/undefined)	값이 미정의된 것을 나타낸다.
참조형	배열(array)	데이터의 집합(인덱스로 접근 가능)
	객체(object)	데이터의 집합(각 요소에는 이름으로 접근 가능)
	함수(function)	일련의 처리(절차)의 집합이다.

 

데이터형은 크게 기본형과 참조형으로 분류할 수 있다. 이 둘의 차이점은 값을 대입하는 방법에 있다. 기본형의 변수에는 값 그 자체가 직접 보관된다. 그에 반하여 참조형의 변수는 그 참조값(값을 보관하고 있는 메모리의 어드레스)을 보관한다.

 

 

 리터럴

리터럴이란 데이터형에 보관되는 값 그 자체 또는 값의 표현 방법을 말한다.

 

㉮ 숫자 리터럴

숫자 리터럴은 정수 리터럴과 부동 소수점 리터럴로 분류한다. 정수 리터럴에는 2진수, 8진수, 16진수, 10진수가 있다. 각각의 사용법이 다르다. 

// 10진수 표현
var a = 1;

// 2진수 표현
var b = 0b1;

// 8진수 표현
var c = 0o1;

// 16진수 표현
var d = 0xAB;

// 부동 소수점 표현
var f = 1.5

// 부동 소수점 + 지수 표현
var e = 3.14e5;

 

 

㉯ 문자열 리터럴

문자열 리터럴(string)은 작은따옴표('') 또는 큰따옴표("")로 감쌀 필요가 있다. 

var a = '안녕하세요!';
var b = "안녕하세요!";

 

+ 이스케이프 시퀀스(Escape Sequence)

문자열 중 특수한 의미를 가진 문자를 이스케이프 시퀀스라고 부른다. '\ + 문자' 의 형식으로 표현할 수 있다.

문자	개요
\b	백 스페이스
\f	새로운 페이지
\n	개행
\r	복귀
\t	탭 문자
\\	\마크
\'	작은따옴표
\"	큰 따옴표
\xXX	Latin-1 문자(XX 는 16진수) ex) \x61
\xXXXX	Unicode 문자(XXXX 는 16진수) ex) \uC815
\u{XXXXX}	0xffff(4개의 16진수)를 넘는 Unicode 문자 ex) \u{20b9f}

 

자바스크립트는 [\']를 문자열의 종류로 판단하는 것이 아니라 단순히 작은따옴표(')로 인식한다. 이렇게 의미를 갖는 문자를 어떤 규칙에 따라 무효화하는 것을 이스케이프 처리라고 한다.

 

 

㉰ 배열 리터럴

배열(array)이란 데이터의 집합을 말한다. 배열 내의 개별 데이터를 '요소'라고 부른다. 배열 리터럴은 콤마로 구분한 값을 대괄호로 감싼 형태로 표현한다. 배열을 참조할 때는 인덱스 번호를 키로 하여 '배열명[인덱스번호]' 형식으로 접근이 가능하다.

var data = ['rere', 'java'];
var data2 = [1, ['rr', 'rads', 'erew'], 3];
console.log(data);

// 배열의 특정 요소 출력
console.log(data[1]);
console.log(data2[1][0]);

 

 

㉱ 객체 리터럴

객체(object)란 각 요소에 문자열을 키로 하여 접근할 수 있는 배열이다. 해시, 연상 배열 등으로 불리는 경우도 있다. 일반적인 배열에서는 인덱스 번호만 키가 될 수 있는 것에 반하여, 객체에서는 문자열을 키로 사용해서 접근할 수 있기 때문에 데이터의 가시성이 높다.

 

객체 내의 개별 데이터는 프로퍼티라고 불린다. 프로퍼티에는 문자열이나 수치 등의 정보는 물론 함수(절차)를 대입하는 것도 가능하다. 함수가 대입된 프로퍼티를 특별히 메소드라고 부른다. 

// 객체 선언 방법
var obj = { x:1, y:2, z:3 };

// 객체 프로퍼티 접근 방법
console.log(obj.x);
console.log(obj['x']);

 

 

㉲ 함수 리터럴

함수(function)란 어떠한 입력값(인수)이 주어짐에 따라 미리 정해진 처리를 행하여 그 결과를 반환해주는 구조다. 자바스크립트에서는 함수도 데이터형의 하나로 취급한다.

 

 

㉳ 미정의값(undefined)

미정의값(undefined)는 어떤 변수값이 정의되어 있지 않음을 나타내는 값으로 다음과 같은 경우에 반환된다.

• 어떤 변수가 선언 완료 상태에서 값을 부여하지 않은 경우
• 미정의된 프로퍼티를 참조하려는 경우
• 함수에서 값이 반환되지 않았을 경우

 

㉴ 널(null)

객체가 존재하지 않는 것을 의미하는 null(널) 값이 존재한다. 미정의값(undefined) 값은 정의되어 있지 않았다는 의미로 본래부터 참조하려하지 않았다는 상태를 나타내지만 null(널)은 비어 있다는 상태를 나타내기 위한 값이다.

 

 

 템플릿 문자열

템플릿 문자열(Template Strings)을 이용함으로써 다음와 같은 문자열 표현이 가능해진다.

• 문자열 안에 변수 삽입
• 복수행에 걸친(=개행 문자를 표함한) 문자열

템플릿 문자열에서는 작은따옴표/큰따옴표 대신 백쿼트(`)로 문자열을 감싼다. 개행 문자를 표현하려면 "\n"문자로 표현해야 했는데 템플릿 문자열에서는 그냥 사용할 수 있다. 또한 "${변수이름}" 형식으로 변수를 문자열로 바로 삽입하는 것이 가능하다.

let name = "백하운";
let str = 
`안녕하세요. ${name}씨.
환영합니다.`;