모던 자바스크립트 입문 : 3. 변수와 값

숫자, 문자열, 객체 등 JS가 다루는 값(데이터타입)과 값을 저장하기 위한 변수를 배웁니다. 변수는 프로그램을 작성하는데 가장 중요한 요소입니다. 프로그램은 알고리즘을 사용하여 문제를 해결하는데 알고리즘 표현을 위해서는 대부분 변수를 필히 사용해야 합니다. 변수 선언하는 방법과 변수명 짓는 방법을 배웁니다.

 

 

 

 

1. 변수

---

1. 변수

• 값을 담기 위해 이름을 붙인 상자
• 컴퓨터의 메모리에 일정한 크기의 영역으로 생성
• 일반적인 프로그램은 변수 값을 알고리즘에 따라 변화시켜 프로그램이 의도한 목적을 달성

 

2. 변수 선언

 

var sum;
var a, b; // 쉼표를 사용해 변수 여러개를 하나의 문장으로 선언 가능 

 

• 문장이 실행 ->  메모리에 sum이라는 이름의 영역이 생성
• var : 자스의 키워드로 변수를 선언하기 위한 선언자
• sum 부분은 변수 이름이라고 부르며 이 변수 이름을 이용해 변수값을 읽거나 쓸 수 있음
• 자스에는 변수 타입이 없어 변수 선언자는 var 하나 (ECMAScript6는 let, const 추가) -> 모든 데이터 타입의 값 저장 가능
• 쉼표를 사용해 변수 여러개를 하나의 문장으로 선언 가능 

var x;
console.log(x); //undefined
x = 2;

// 변수를 선언하면서 초깃값 설정하기
var x = 5;
var a=1, b=2, c=3; // 한 문장으로 

 

• 변수 선언만 하면 정의되지 않은 (undefined) 값이 들어감
• 대입 연산자(=)로 변수에 값을 대입한다
• 대입 연산자는 오른쪽 값을 왼쪽 변수에 대입...보다는 메모리 공간을 연결한다는 뜻
• 수학의 연산자 = 는 양 변이 같다는 뜻이지만 프로그램에서는 대입하겠다는 뜻

 

3. 변수 선언 생략

• 선언하지 않은 변수 값을 읽으면 참조 오류가 발생
• 선언하지 않은 변수에 값을 대입하면 자동으로 전역변수로 선언하여 오류가 발생하지 않음
  -> 그러나 버그의 원인이 될 수 있어 의도한 게 아니라면 선언해 줄 것.
• ECMAScript5 의 Strict 모드는 선언하지 않은 변수에 값을 대입하면 오류가 발생해 찾아내기 쉽다

console.log(z); // ReferenceError: z is not defined
c = 2;
console.log(c); // 2 (전역변수)

 

 

4. 변수 끌어올림, 변수 중복 선언

• 프로그램은 작성 순서에 따라 윗줄부터 차례대로 실행되나 변수 선언은 이 원칙을 따르지 않음
• 호이스팅(hoisting) : 프로그램 중간에서 변수를 선언해도 프로그래밍 첫머리에 선언된 듯 다른 문장 앞에 생성되는 것, 끌어올림
• 단 선언과 동시에 대입하는 코드는 호이스팅되지 않음
• 같은 이름의 변수를 여러 개 선언할 수 있으며 모두 끌어올린 후에 단 하나의 영역에만 할당
• 호이스팅은 자스의 고유한 특징

// 1
console.log(x);  // undefined. 값만 없고 참조 오류가 발생하지 않는다
var x;

// 2
console.log(x);  // undefined이며 이 경우 호이스팅 안됨
var x = 5; 
console.log(x);  // 5 

 

 

5. 변수의 명명 규칙

• 식별자 : 변수, 함수, 라벨 이름 등 사용자가 정의하는 이름
• 사용할 수 있는 문자는 알파벳, 숫자, 밑줄, 달러 기호
• 첫 글자는 숫자가 불가하며 알파벳, 밑줄, 달러 기호 중 하나여야 함
• 예약어를 식별자로 사용 불가
• 변수명은 길이의 단축보다는 의미의 표현이 우선
• 루프 카운터 변수명은 i, j, k등을 주로 사용
• 상수는 대문자로 주로 표현(MAX_SIZE)
• 논리값 표현 변수 이름 앞에는 is를 붙임(isMouseDown)
• 생성자 이름은 파스칼 표기법 사용 (앞에 대문자)
• 표기법 : 캐멀/로어캐멀 표기법(createLifeGame), 파스칼/어퍼캐멀 표기법(CreateLifeGame), 스네이크/밑줄표기법(create_life_game)

 

 

6. 예약어

• 자바스크립트 문법을 규정하기 위해 자스 언어 사양에서 사용하는 특수한 키워드
• ECMAScript 6  :  break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, false, finally, for, function, if, import, in, instanceof, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with, yield
• ECMAScript 6 이후 추가 예정 : await, enum, implements, package, protected, interface, private, public
• 미리 정의된 전역 변수와 전역 함수 : arguments, Array, Boolean, Date, decodeURI, decodeURIComponent, encodeURI, encodeURIComponent, Error, eval, EvalError, Function, Infinity, isFinite, isNan, JSON, Math, NaN, Number, Object, parseFloat, parseInt, RangeErrror, RefferenceError, RegExp, String, SyntaxError, TypeError, undefined, URIError
• 위에 나온 키워드와 Window 객체의 이름, DOM에서 사용하는 객체 이름도 식별자 이름으로 피하기를 권장
• 서버 측 자스 코드 실행시에도 실행 환경이 미리 정의한 객체이름을 피할 것

 

 

 

2. 데이터 타입

---

1. 데이터타입

• 프로그래밍 언어의 기본적인 구성 요소로 숫자나 문자열처럼 변수에 저장하는 데이터 종류
• 정적 타입 언어 : C, Java처럼 정수 타입 변수, 부동소수점 타입 변수 등이 있어 그 변수의 타입과 일치하는 데이터만 저장할 숭 ㅣㅆ어 변수에 타입이 있는 언어
• 동적 타입 언어 : 실행할 떄 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있는 언어
• 자스는 변수에 타입이 없어 모든 타입의 데이터 저장 가능

var pi = 3.14;
console.log(pi); //3.14
pi = "원주율";
console.log(pi); //원주율

 

2. 데이터 타입의 분류

• 자스가 처리할 수 있는 데이터타입읜 원시타입과 객체 타입 두 가지
• 원시 타입의 값 : 숫자, 문자열, 논리값, 특수한 값(undefined, null), Symbol
• 원시 타입 데이터 : 데이터를 구성하는 가장 기본적인 요소로 불변 값으로 정의
• 객체 : 원시 타입에 속하지 않는 자스의 값. 변수 여러개가 모여서 만들어진 복합 데이터 타입으로 
  객체는 참조하는 타입이기 때문에 객체 안의 값은 바꿔 연결해 저장할 수 있다
• 객체 타입의 값을 변수에 대입 -> 변수에 객체에 대한 참조 (메모리에서의 위치주소 정보)가 할당
• 객체 타입의 값 : 배열, 함수, 정규 표현식 등

 

3. 숫자

• 자스는 숫자를 모두 64비트 부동소수점으로 표현 (C, Java의 double 타입에 해당)
• 배열 인덱스와 비트 연산은 32비트 정수로 처리
• 리터럴(literal) : 프로그램에 직접 작성할 수 있는 상수 값으로 정수리터럴, 부동소수점 리터럴이 있음

 

숫자 리터럴

분류	표기	예시	설명	비고
정수 리터럴	10진수	123	정수를 그대로 표현
	16진수	0x2a	숫자 앞에 0x를 붙임
	8진수	0o73	숫자 앞에 0o를 붙임	Es6
	2진수	0b101	숫자 앞에 0b를 붙임	Es6
부동소수점 리터럴	정수.소수	3.14	소수를 그대로 표현
	소수	0.123	정수부가 0일 때 0 생략 가능
	가수부e지수부	6.02e23	6.02 x 1023
	가수부E지수부	1.1616199E-35	1.1616199 x 10-35

 

 

특별한 숫자를 표현하기 위한 문자열 (Es5에서는 모두 읽기 전용)

분류	표기법	설명	비고
전역 변수	Infinity	플러스 무한대
	NaN	부정 값 (Not a Number)
Number의 프로퍼티	Number.POSITIVE_INFINITY	플러스 무한대
	Number.NEGATIVE_INFINITY	마이너스 무한대
	Number.MAX_VALUE	표현할 수 있는 최댓값
	Number.MIN_VALUE	표현할 수 있는 최솟값
	Number.NaN	부정값 (Not a Number)
	Number.EPSILON	2.2204604925031e-16	ES6
	Number.MIN_SAFE_INTEGER	-9007199254740990	ES6
	Number.MAX_SAFE_INTEGER	9007199254740990	ES6

 

NaN은 0을 0으로 나눈 결과값, Infinity를 Infinity로 나눈 값, 음수의 제곱근 등 숫자로 표현할 수 없는 부정값을 말합니다.

 

 

 

4. 문자열

• 자스의 문자열은 16비트 길이의 유니코드 문자를 나열한 것
• 전 세계에서 사용하는 문자를 대부분 표현 가능
• 문자열 리터럴은 ''나 ""를 문자열 앞뒤에 붙여서 표현
• "" : 빈 문자열
• HTML요소에 자스를 끼워 넣을 떄 자스 프로그램을 문자열로 작성
• HTML과 자스에서 사용하는 따옴표 구분을 권장
• 줄바꿈문자, 탭문자 등은 그대로 추가 불가하며 escape 시퀀스로 표현 ('I\'m going to')

 

이스케이프 시퀀스 목록

이스케이프 시퀀스	의미	비고
\0	null 문자
\b	백스페이스 문자
\t	수평 탭 문자
\n	개행 문자
\v	수직 탭 문자
\f	다음 페이지 문자
\r	캐리지 리턴 문자(CR)
\'	작은 따옴표 문자
\"	큰 따옴표 문자
\\	역슬래시 문자
\xXX	두 자릿수 16진수 XX로 지정된 Latin-1 문자
\uXXXX	네 자릿수 16진수 XXXX로 지정된 유니코드 문자
\u{XXXXXX}	16진수 코드 포인트 XXXXXX로 지정된 유니코드 문자. 써로게이트 페어의 다섯 자리수 코드 포인트(5.3절)을 지원합니다.	Es6

 

써로게이트 페어의 다섯 자릿수 코드 포인트

유니코드는 문자 집합과 문자 인코딩 방식을 정한 표준 문자 코드입니다. 유니코드 문자 집합에는 전 세계에서 사용하는 문자가 거의 포함됩니다. 하지만 UTF-16 유니코드로 표현할 수 있는 범위를 넘어서는 이모티콘이나 자주 사용하지 않는 한자 등이 있고, 이는 써로게이트 페어를 사용해 문자를 표현합니다.

 

 

5. 논리값

• 조건식의 참/거짓을 판별해 표현하기 위해 사용하는 값으로 true(참), false(거짓)가 있음
• 주로 제어 구문에 사용 (if/else, while, do/while, for문)

 

 

6. 특수한 값

• 값이 없음 : null, undefined
• undefined : 정의되지 않은 상태<할당되지 않은 결과>
  • 값을 아직 할당하지 않은 변수의 값
  • 없는 객체의 프로퍼티를 읽으려 시도했을 때의 값
  • 없는 배열의 요소를 읽으려 시도했을 때의 값
  • 아무것도 반환하지 않는 함수가 반환하는 값
  • 함수를 호출했을 때 전달받지 못한 인수의 값
• 즉 변수 값이 undefined라는 것은 값을 할당하지 않은 결과. 코드로 undefined를 대입한 것이 아닌 자스 엔진이 변수를 undefined로 초기화한 것이며 자스 전역 변수에도 같은 이름의 undefined가 있고 초기값은 undefined라는 원시값. ES5에서는 전역 변수 undefined의 값을 수정할 수 없음.
• null : 아무것도 없음을 값으로 표현한 리터럴. 무언가를 검색했을 때 아무것도 없음을 전달하기 위한 값으로 사용.

 

 

 

3. ECMAScript6부터 추가된 데이터타입

---

1. 심벌

• 자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값
• ES6부터 새롭게 추가된 원시값

 

심벌의 생성

• Symbol()은 호출 시마다 새로운 값을 만든다

• sym1과 sym2의 값은 다름

 

var sym1 = Symbol();
var sym2 = Symbol(); 
console.log(sym1 == sym2); //false

 

• Symbol()에 인수를 전달하면 생성된 심벌의 설명을 덧붙일 수 있다.

• 자세한 것 :  toString() 메서드로 검색

• 일반적으로 toString은 그 객체를 설명해주는 문자열 "true"나 "false"를 리턴한다.

 

var HEART = Symbol("하트"); 
console.log(HEART.toString()); // Symbol(하트)

 

• 예시 : 오셀로 게임을 만들 때 0, -1, 1보다 Symbol을 사용하면 이해가 쉬워진다.

 

var NONE = 0 ; //칸에 돌이 없는 상태
var BLACK = -1; // 칸에 검은 돌이 놓인 상태
var WHITE = 1; // 칸에 흰 돌이 놓인 상태

var NONE = Symbol("none"); //칸에 돌이 없는 상태
var BLACK = Symbol("black"); // 칸에 검은 돌이 놓인 상태
var WHITE = Symbol("white"); // 칸에 흰 돌이 놓인 상태

 

 

 

심벌과 문자열 연결

• Symbor.for() 을 활용하면 문자열과 연결된 심벌을 생성할 수 있다.

• 예시의 결과 : 전역 레지스트리에 심벌이 만들어짐

 

var sym1 = Symbol.for("club");

var sym2 = Symbol.for("club"); //불러온다
console.log(sym1 == sym2); //true
console.log(sym1 === sym2); //true

 

• 전역 레지스트리에서 심벌을 위에 지정한 문자열로 불러올 수 있음

• 따라서 코드 어디서도 같은 심벌을 공유할 수 있음
• Symbol.keyFor() : 심벌과 연관된 문자열 구하기

 

var sym1 = Symbol.for("club");
var sym2 = Symbol("club");
console.log(Symbol.keyFor(sym1)); // club
console.log(Symbol.keyFor(sym2)); // undefined

 

 

 

템플릿 리터럴

 

• 템플릿 : 일부만 변경해 반복하거나 재사용할 수 있는 틀

• 템플릿 리터럴 : ES6부터 추가된 문자열 표현 구문.

• 표현식의 값을 문자열에 추가하거나 여러줄의 문자열 표현 가능

 

 

기본 사용법

• 역따옴표로 묶은 문자열. 

• 문자열에서는 이스케이프 시퀀스 (\n)를 사용하나 템플릿에서는 일반 줄 바꿈 문자도 사용 가능.

• 이스케이프 시퀀스 문자를 그대로 출력하려면 템플릿 리터럴 앞에 String.raw (태그 함수) 를 붙여준다.

 

`I'm going to learn JS.`

var t= String.raw`I'm going to\nlearn JS.`

 

 

 

 

보간 표현식

 

• 템플릿 시터럴 내에는 플레이스 홀더를 넣을 수 있다. ${ ... }

• 플레이스 홀더 : 실제 내용물을 나중에 삽입할 수 있도록 일단 확보한 장소라는 뜻. 사용자의 입력 값처럼 실행 시점에 외부에서 주어지는 값을 표현식에 반영하고자 할 때 미리 마련한 장소

• JS 엔진은 플레이스 홀더 내 ... 부분을 표현식으로 간주, 평가하여 문자열 내 변수나 표현식의 결과값을 삽입 가능

 

var a = 2, b = 3;
console.log(`${a} + ${b} = ${a+b}`);