3장 변수와 값
Updated:
변수
변수는 프로그램을 작성하는 데 가장 중요한 요소이다.
변수
변수는 값을 담기 위해 이름을 붙인 상자이다. 변수는 컴퓨터의 메모리에 일정한 크기의 영역으로 생선된다.
변수 선언
프로그램에서 변수를 사용하려면 우선 다음과 같이 변수를 선언한다.
var sum;
이 문장이 실행되면 메모리에는 sum이라는 이름이 붙은 역역이 생성된다. 위 코드의 var은 자바스크립트 키워드로 변수를 선언하기 위한 선언자이다. sum부분은 변수 이름이라고 부르며, 이 변수 이름을 이용해 변수 값을 읽거나 쓸 수 있다. 자바스크립트에는 변수 타입이 없으므로 변수 선언자는 var 하나뿐이다. (ECMAScript 6부터는 var 외에도 let과 const라는 선언자가 추가되었다. var과 마찬가지로 이 선언자로 선언한 변수는 타입이 없다.) 따라서 모든 데이터 타입의 값을 저정할 수 있다.
쉼표(,)를 사용하면 변수 여러 개를 한 개의 문장으로 선언할 수 있다.
var sum, a;
변수를 선언하기만 하면 변수 안에는 정의되지 않았음을 뜻하는 undefined라는 값이 들어간다.
var x;
console.log(x); //undefined
대입 연산자(=)를 사용하면 변수에 값을 대입할 수 있다.
x = 2;
변수를 선언하면서 초깃값을 설정할 수도 있고 변수를 여러 개 선언하고 초깃값 설정을 쉼표로 구분하여 한 문장만 사용하여 표현할 수도 있다.
var x = 5;
var a = 1, b = 2, c = 3;
변수 선언 생략
var 문으로 선언하지 않은 변수 값을 읽으려고 시도하면 참조 오류가 발생한다.
console.log(x); // ReferenceError: x is not defined
그러나 var문으로 선언하지 않은 변수에 값을 대입할 때는 오류가 발생하지 않는다.
x = 2;
console.log(x); // 2
변수를 선언하지 않은 상태에서 값을 대입하면 자바스크립트 엔진이 그 변수를 자동으로 전역 변수로 선언하기 때문이다. 그러나 변수를 선언하지 않고 변수를 사용하는 행위는 버그의 원인이 될 수 있다.
변수 끌어올림과 변수 중복 선언
프로그램은 작성한 순서에 따라 윗줄부터 차례대로 실행된다. 하지만 변수 선언은 이 원칙을 따르지 않는다.
console.log(x);
var x;
이 코드에서 1번째 줄은 아직 변수 x가 선언되지 않았기 때문에 오류거 발생할 것 같지만 실제로는 오류가 발생하지 않고 undefined가 출력된다. 이는 프로그램 중간에서 변수를 선언하더라도 변수가 프로그램 첫머리에 선언된 것처엄 다은 문장 앞에 생성되기 때문이다. 이를 변수 선언의 끌어올림(호이스팅, hoisting)이라고 한다. 단, 선언과 동시에 대입하는 코드는 끌어올림을 하지않는다.
console.log(x); // undefined
var x = 5;
console.log(x); // 5
변수의 명명 규칙
변수, 함수, 라벨 이름 등 사용자가 정의하는 이름을 식별자라고 한다. 식별자는 다음과 같은 명명 규칙을 따라야만 한다.
• 사용할 수 있는 문자는 알파벳(a~z, A~Z), 숫자(0~9), 밑줄(_), 달러 기호($)다.
• 첫 글자로는 숫자를 사용할 수 없다.
• 예약어를 식별자로 사용할 수 없다.
데이터타입
데이터 타입은 프로그래밍 언어릐 기본적인 구성 요소이다.
데이터 타입과 변수의 동적 타이핑
데이터 타입이란 숫자나 문자열처럼 변수에 저장하는 데이터 종류를 뜻한다. C나 Java 등의 프로그래밍 언어에는 정수 타입 변수, 부동소수점 타입 변수 등이 있어서 그 변수의 타입과 일치하는 데이터만 저장할 수 있다. 이처럼 변수에 타입이 있는 언어를 정적 타입 언어(static typed language)라고 부른다. 하지만 자바스크립트에는 변수에 타입이 없으므로 변수에 모든 타입의 데이터를 저장할 수 있다.
var pi = 3.14;
console.log(pi); // 3.14
pi = '원주율';
console.log(pi); // 원주율
자바스크립트에서는 같은 변수에 숫자나 문자열과 같은 다양할 타입의 데이터를 대입할 수 있다. 이처럼 실행할 때 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있는 언어를 동적 타입 언어(Dynamic typed language)라고 부른다.
데이터 타입의 분류
자바스크립트가 처리할 수 있는 데이터 타입은 크게 원시 타입(primitive type)과 객체 타입으로 나눌 수 있다.
원시 타입에 속하는 값에는 숫자, 문자열, 논리값이 있다. 특수한 값(undefine, null)과 심벌(symbol)도 원시 타입에 속한다.원시 타입 데이터는 데이터를 구성하는 가장 기본적인 요소로 불변 값으로 정의되어 있다.
원시 타입에 속하지 않는 자바스크립트의 값은 객체라고 한다. 객체는 변수 여러 개가 모여서 만들어진 복합 데이터 타입이다.
숫자
대다수의 프로그래밍 언어에는 정수 타입과 부동소수점 타입이 따로 있지만 자바스크립트에는 타입이 없으므로 숫자를 모두 64비트 부동소수점으로 표현한다. 이는 C나 Java에서 사용하는 double 타입에 해당한다.
문자열
자바스크립트의 문자열은 길이가 16비트인 유니코드 문자(UTF-16 코드)를 나열한 것으로 전 세계에서 사용하는 문자를 대부분 표현할 수 있다. 문자열 리터럴은 작은따옴표(‘)나 큰따옴표(“)를 문자열의 앞뒤에 붙여서 표현한다.
논리값
논리값은 조건식이 참인지 거짓인지 표현하기 위해 사용하는 값이다. 논리값에는 true와 false, 두 가지 종류가 있다.
특수한 값
값이 없음을 표현하기 위해 특수한 값에는 null과 undefined가 있다. undefined는 정의되지 않은 상태를 뜻한다. 변수 값이 undefined가 되는 것은 값을 할당하지 않은 결과이다.
null은 아무것도 없음을 값으로 표현한 리터럴 이다.
ECMAScript 6부터 추가된 데이터 타입
이 절에서는 ECMAScript 6부터 추가된 데이터 타입인 심벌(Symbol)과 템플릿 리터럴(Template literals)을 소개한다.
심벌
심벌은 ECMAScript 6부터 새롭게 추가된 원시 값이다. 심벌은 자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값이다.
심벌의 생성
심벌은 Symbol()을 사용하여 생성한다.
var sym1 = Symbol();
Symbol()은 호출할 때마다 새로운 값을 만든다. 이를 확인하기 위해 또 다른 심벌을 생성해 보자.
var sym2 = Symbol();
다음처럼 sym1 값과 sym2 값이 다르다는 사실을 확인할 수 있다.
console.log(sym1 == sym2); // false
또한 Symbol()에 인수를 전달하면 생성된 심벌의 설명을 덧붙일 수 있고 심벌의 설명은 toString() 메서드를 사용해서 확인할 수 있다.
var HEART = Symbol("하트");
console.log(HEART.toString()); // Symbol(하트)
예를 들어 오셀로 게임을 만들 때 칸의 상태를 값으로 표현하는 코드를 작성해보자.
var NONE = 0; // 칸에 돌이 놓여 있지 않은 상태
var BLACK = -1; // 칸에 검은 돌이 놓여 있는 상태
var WHITE = 1; // 칸에 흰 돌이 놓여 있는 상태
심벌을 활용하면 앞의 코드를 다음처럼 고칠 수 있다.
var NONE = Symbol("none");
var BLACK = Symbol("black");
var WHITE = Symbol("white");
심벌과 문자열 연결하기
Symbol.for()를 활용하면 문자열과 연결된 심벌을 생성할 수 있다.
var sym1 = Symbol.for("club");
그러면 전역 레지스트리에 심벌이 만들어진다. 또한 전역 레지스트리에서 그 심벌을 위에 지정한 문자열로 불러올 수 있다.
var sym2 = Symbol.for("club");
console.log(sym1 == sym2); // true
이 기능을 활용하면 코드의 어느 부분에서도 같은 심벌을 공유할 수 있다.
var sym1 = Symbol.for("club");
var sym2 = Symbol("club");
console.log(Symbol.keyFor(sym1)); // club
console.log(Symbol.keyFor(sym2)); // undefined
템플릿 리터럴
템플릿 리터럴은 ECMAScript 6부터 추가된 문자열 표현 구문이다. 템플릿이란 일부만 변경해서 반복하거나 재사용할 수 있는 틀을 말한다. 템플릿 리터럴을 사용하면 표현식의 값을 문자열에 추가하거나 여러 줄의 문자열을 표현할 수 있다.
기본적인 사용법
템플릿 리터럴은 역따옴표(`)로 묶은 문자열이다. 문자열 리터럴에서 줄 바꿈 문자를 표현할 때는 이스케이프 시퀀스(\n)을 사용했지만, 테플릿 리터럴을 사용하면 일반적인 줄 바꿈 문자를 사용할 수 있다.
var t = 'Man errs as long as
he strives.';
이 문자열을 문자열 리터럴로 표현하면 다음과 같다.
var t = "Man errs as long as\nhe strives.";
물론 템플릿 리터럴에서도 이스케이프 시퀀스를 사용할 수 있다.
var t = 'Man errs as long as\nhe strives.';
이스케이프 시퀀스 문자를 그대로 출력하려면 템플릿 리터럴 앞에 String.raw를 붙인다.
var t = String.raw'Man errs as long as\nhe strives.';
이 문자열을 문자열 리터럴로 표현하면 다음과 같은 모습이 된다.
var t = "Man errs as long as\\nhe strives.";
템플릿 리터럴 앞에 붙은 String.raw는 태그 함수라고 부른다.
보간 표현식
템플릿 리터럴 안에는 플레이스 홀더를 넣을 수 있다. 플레이스 홀더는 ${…}로 표기한다. 자바스크립트 엔진은 플레이스 홀더 안에 든 … 부분을 표현식으로 간주하여 평가(evaluation)한다. 이를 활용하여 문자열 안에 변수나 표현식의 결괏값을 삽입할 수 있다.
var a = 2, b = 3;
console.log('${a} + ${b} = ${a+b}'); // 2 + 3 = 5
var now = new Date();
console.log('오늘은 ${now.getMonth()+1} 월 ${now.getDate()} 일입니다.'); //오늘은 8 월 1 일 입니다
댓글남기기