JavaScript Data Type
값 다루기 - 값과 리터럴
프로그래밍 언어에서 값을 생성하는 가장 쉬운 방법은 리터럴을 사용하는 것입니다.
리터럴은 값의 표기법입니다.
1; // 정수 리터럴
2.5; // 부동 소수점 리터럴
("hello"); // 문자열 리터럴
true; // 진리값 리터럴
리터럴과 연산자를 이용해 연산을 할 수 있습니다.
1 + 2; // 더하기(3)
2 * 3; // 곱하기(6)
"hello" + "world"; // 문자열 더하기(helloworld)
true && false; // 진리값 곱하기(false)
변수
프로그래밍 언어에는 대개 값에 이름을 붙여서 다시 쓸 수 있게 만드는 기능이 있습니다.
JS 에서는 여러가지 방법을 이용해 값에 이름을 붙일 수 있습니다.
var의 사용
지금은 사용하지 않도록 하는 변수 선언 키워드입니다.
var 는 let 과 const 와는 다르게 굉장히 너그러운(?) 키워드입니다.
var 는 같은 이름의 변수의 선언도 가능하고, 값의 재대입도 가능합니다.
굉장히 너그러워서 간혹 변수의 값을 고정하여 변하지 않게 하여야 하는데
협업자의 실수 및 개인의 실수로 재대입을 하여 말썽을 피우기도 합니다.
또한 유효범위가 함수단위이기에 scope 관련 문제가 발생하기도 합니다.
var i = 30;
i = 40; // 값의 재대입도 가능합니다.
var i = 50; // 같은 변수의 이름으로 선언도 문제없습니다.
console.log(i); // 50
let의 사용
ES6 에서 새롭게 등장하는 let 은 var 처럼 값의 재대입은 가능하나 같은 변수명으로 선언이 불가합니다.
또한 범위가 블록단위이기에 var 를 사용할 때 scope 문제가 생기는 것을 방지할 수 있습니다.
let a = 30;
a = 40; // 값의 재대입이 가능합니다.
let a = 50; // 같은 변수의 이름으로 선언은 불가합니다 (error)
console.log(a); // 40
const의 사용
ES6 에서 새롭게 등장하는 const 는 상수입니다.
변하지 않는 수라는 특징답게 값의 재대입, 같은 변수명의 선언이 불가합니다.
그렇기에 선언을 할 때 값을 꼭 대입시켜줘야 합니다.
가급적 const 를 사용하는 것을 권장합니다.
const b = 30;
b = 50; // 값의 재대입이 불가합니다.
const b = 70; // 같은 변수명의 선언 또한 불가합니다.
console.log(b); // 30
!! let 보다 const 를 사용하는 것이 좋습니다. 단, 재대입이 필요한 경우는 let 을 쓰도록 합니다.!!
식별자
변수의 이름을 식별자라고 합니다.
식별자를 생성할 때는 다음과 같은 규칙을 따라야 합니다.
- 숫자, 알파벳, 달러 문자, 언더스코어가 포함될 수 있다.
- 단, 숫자로 시작되어는 안된다.
- 예약어는 식별자가 될 수 없다.
const foo; // 가능합니다.
const _foo; // 가능합니다.
const $; // 가능합니다. (jQuery에서 사용합니다.)
const 7seven; // 불가합니다. 숫자는 앞에 올 수 없습니다.
const const; // 불가합니다. 예약어는 사용할 수 없습니다.
!–예약어란? JS 에서 언어의 기능을 위해 미리 예약해둔 언어를 말합니다.(ex: const, let, function…)–!
값의 타입
앞서 공부했듯이 JavaScript 에서 다루어지는 모든 값은 ‘타입’을 갖고 있습니다.
값의 종류를 타입이라 하는데요.
다음과 같은 종류의 타입이 있습니다.
- 숫자 (Number)
- 문자열 (String)
- 불린 (Boolean)
- 객체 (Object)
- 함수 (Function)
- 배열 (Array)
- 날짜 (Date)
- 정규식 (RegExp)
- 널 (Null)
- 정의되지 않음 (Undefined)
숫자 (Number)
C 언어의 경우 정수냐 실수냐에 따라 int, long, float, double등과 같은 다양한 숫자 타입이 존재하지만,
자바스크립트는 하나의 숫자형만 존재합니다.
자바스크립트에서는 모든 숫자를 64 비트 부동 소수점 형태로 저장하기 때문입니다.
이는 C 언어의 double 타입과 유사합니다.
var intnum = 10;
var floatnum = 0.1;
typeof intnum; // number
typeof floatnum; // number
따라서 var intNum = 10; / var floatNum =0.1; 처럼 var 키워드로 선언된 자바스크립트 변수에는
정수나 실수 구분 없이 그 값을 바로 저장할 수 있으므로, intNum과 </code>floatNum</code> 변수 모두 typeof 연산자의 결과값이 number 타입임을 확인할 수 있습니다..
console.log(5 / 2); // 2.5
자바스크립트에서는 정수형이 따로 없고, 모든 숫자를 실수로 처리하므로 나눗셈 연산을 할 때는 주의해야 합니다.
다음 예제와 같은 연산을 C 언어에서 할 경우 5/2 는 소수 부분을 버린 2 가 출력됩니다.
반면에 자바스크립트에서는 5 와 2 가 둘 다 정수가 아닌 실수로 취급되므로 소수 부분까지 출력된 2.5 가 결과값이 됩니다.
문자열 (String)
문자열은 작은 따옴식나 큰 따옴표로 생성합니다.
자바스크립트에서는 C 언어의 char 타입과 같이 문자 하나만을 별도로 나타내는 데이터 타입은 존재하지 않습니다.
따라서 한 개의 문자를 나타내려면 singleChar 변수같이 길이가 1 인 문자열을 사용해야 합니다.
주의해야 할 점은 한 번 정의된 문자열은 변하지 않는다는 것입니다.
var str = "test";
console.log(str[0], str[1]); // t, e
str[0] = "T";
console.log(str); // test
문자열은 문자 배열처럼 인덱스를 이용해서 접근할 수 있습니다.
따라서 console.log()문에서 str[0], str[1] 등의 값을 각각 출력했을 때, 문자열 첫 글자인 ’t’와 다음 글자인 ‘e’가 각각 출력된 것입니다.
그리고 여기서 주목할 점은 예제에서는 str[0]에 ’T’를 넣어서 문자열의 첫 글자를 대문자로 변경했습니다.
물론 에러는 발생하지 않았지만 console.log(str)문으로 문자열을 출력하면 우리가 의도한 결과인 ‘Test’가 아니라 원래의 문자열인 ‘test’가 출력되었습니다.
즉, 자바스크립트에서는 한 번 생성된 문자열은 읽기만 가능하지 수정은 불가능합니다.
불린값 (Boolean)
자바스크립트는 true 와 false 값을 나타내는 불린 타입을 가집니다.
var boolVar = true;
typeof boolVar; // boolean
boolVar 변수에 ‘true’라는 값을 저장했으므로 boolVar 변수는 boolean 타입이 출력된 것입니다.
Null 과 Undefined
이 두 타입은 모두 자바스크립트에서 ‘값이 비어있음’을 나타냅니다.
자바스크립트 환경 내에서 기본적으로 값이 할당되지 않은 변수는 undefined 타입이며, undefined 타입의 변수는 변수 자체의 값 또한 undefined 입니다.
var emptyVar;
var nullVar = null;
typeof emptyVar; // undefined
typeof nullVar; // object
console.log(typeof nullVar === null); // false
console.log(nullVar === null); // true
이처럼 자바스크립트에서 undefined 는 타입이자, 값을 나타낸다는 것에 주의해야합니다.
emptyVar 변수에는 아무런 값이 할당되지 않으므로 undefined 타입이 출력된 것입니다.
이에 반해 Var nullVar = null;의 nullVar 변수와 같이 null 타입 변수의 경우는 개발자가 명시적으로 값이 비어있음을 나타내는 데 사용합니다.
여기서 주의할 점은 null 타입 변수인 nullVar 의 typeof 결과가 null 이 아니라 object 라는 것입니다.
떄문에 다음 예제와 같이 자바스크립트에서는 null 타입 변수인지를 확인할 때 typeof 연산자를 사용하면 안 되고,
일치 연산자(===)을 사용해서 변수의 값을 직접 확인해야 합니다.
객체는 공부할 양이 많아 따로 분류해서 만들겠습니다.
2. Today I Found Out
HTML강의로 가득찼던 하루였지만 어제 배운 것을 복습할 겸
살짝 더 깊게 공부하였습니다. 배우면 배울수록 더 깊은게 있어서
더욱 공부를 열심히 해야할 것 같습니다.
다시 공부하러 돌아가보겠습니다.
#3. 참고자료
인사이드 자바스크립트 저자: 송형주, 고현준 한빛미디어