티스토리 뷰

[자바스크립트 완벽가이드] 3장 데이터 타입과 값

pilot376 2015. 12. 10. 14:58

프로그램 언어로 표현할 수 있고 조작할 수 있는 값의 종류를 테이터 타입이라고 하며, 프로그램 언어의 기본은 바로 그 언어가 지원하는 데이터 타입의 종류다.



숫자

숫자는 가장 기본이 되는 데이터 타입이다. 숫자가 자바스크립트 프로그램 내에 바로 나타날 때 이를 숫자 리터럴이라고 부른다.


정수 리터럴

자바스크립트에서 10진수 정수는 숫자 시퀀스 형태로 작성된다.

0
3
1000000

16진수와 8진수

10진수 리터럴 이외에도 자바스크립트는 16진수 값을 인식한다. 16진수 리터럴은 '0x'나 '0X'로 시작하고 16진수 숫자들이 뒤따르는 형태다.

0xff // 15*16 + 15 = 255
0xCAFE911

ECMAScript 표준에서 지원하는 것은 아니지만 몇몇 자바스크립트 구현에서는 정수 리터럴을 8진수로도 표현할 수 있게 지원한다. 8진수 리터럴은 숫자 0으로 시작되고 0부터 7 사이의 숫자 시퀀스가 뒤따르는 형태다.

0377 // 3*64 + 7*8 + 7 = 255

특정 구현에서 0으로 시작하는 리터럴을 8진수 값으로 인식할지 10진수 값으로 인식할지 알 수 없으므로 0으로 시작하는 정수 리터럴은 사용하지 않는 것이 좋다.


부동소수점 리터럴

부동소수점 리터럴은 소수점을 가질 수 있다. 부동소수점 리터럴은 전통적인 문법으로 표현된다. 실수는 정수 부분과 소수점, 소수점 이하 부분으로 표현된다. 지수 표기법을 사용하여 부동소수점 리터럴을 표현할 수도 있다.


숫자 조작

자바스크립트 프로그램에서는 언어에서 제공하는 산술 연산자를 사용하려 숫자를 다룬다. 산술 연산자 이외에도 코어 자바스크립트에서 제공하는 많은 수의 수리(mathematical) 함수를 사용해 한층 더 복잡한 수리 연산을 수행할 수 있다.


숫자 변환

자바스크립트는 숫자를 문자열 형식으로 변환하거나 문자열을 숫자로 변환할 수 있다.


특수한 숫자 값

자바스크립트에서는 몇 가지 특수한 숫자 값이 사용된다. 표현 가능한 가장 큰 유한 수보다 더 큰 값은 Infinity로 출력한다. 비슷하게 표현 가능한 가장 작은 음수 값보다 더 작은 값은 -Infinity로 출력한다.

수리 연산이 정의되지 않은 결과를 산출하거나 에러를 발생시킬 경우에는 NaN를 출력한다. 이 값을 테스트해 보기 위해 isNaN()이라는 특별한 함수가 필요하다. 관련 함수 isFinite()는 주어진 숫자가 NaN이 아닌 동시에 양의 무한대나 음의 무한대가 아닌지 검사한다. 

"2" / 4
0.5

"ㅁ" / 4
NaN

isNaN("ㅁ" / 4);
true

isNaN("2" / 4);
false


문자열

문자열은 Unicode 문자나 숫자, 문장부호들의 시퀀스로 텍스트를 표현하는 자바스크립트 데이터 타입이다. 작은따옴표 혹은 큰따옴표 쌍으로 문자열을 둘러싸서 문자열 리터럴을 표현한다.


문자열 리터럴

0개 또는 하나 이상의 Unicode 문자들이 작은따옴표 혹은 큰따옴표로 둘러싸인 시퀀스다. 큰따옴표로 둘러싸인 문자들은 작은따옴표로 둘러싸인 문자열 내에 포함될 수 있으며, 작은따옴표로 둘러싸인 문자들은 큰따옴표로 둘러싸인 문자열 내에 포함될 수 있다. 문자열 리터럴은 한 줄을 넘지 말아야 한다. 문자열 리터럴 내에 줄바꿈 문자를 포함하고 싶다면 '\n'을 사용하라.

"" // 빈 문자열
'테스트'
"3.14"
'name="form"'
"line1\nline2"

문자열 리터럴 내 이스케이프 시퀀스

역슬래시 문자(\)는 자바스크립트 문자열에서 특별한 목적을 위해 사용된다. (예 : \n) 작은따옴표로 둘러싸인 문자열 리터럴 내에 작은따옴표 문자를 포함해야 할 때 \' 이스케이프 시퀀스를 유용하게 사용할 수 있다.

'it can\'t speak english'

더 많은 이스케이프 시퀀스 보기


문자열 조작

자바스크립트가 지원하는 기본 기능 중 하나는 여러 문자열을 이어붙이는 것이다. 숫자에 + 연산자를 적용하면 숫자들이 더해진다. 그러나 문자열에 적용하면 두 번째 문자열을 첫 번째 문자열에 이어 붙여 두 문자열을 합친다.

msg = "Hello, " + "world"; // Hello, world

문자열 길이를 알고 싶으면 length 프로퍼티를 사용하면 된다.

var s = "sss";
s.length;

더 많은 문자열 프로퍼티와 메서드 보기


숫자를 문자열로 변환하기

숫자는 필요할 때 문자열로 자동으로 변환된다.

var n = 100;
var s = n + ' aaa';
 
var n_as_string = n + '';

명시적으로 숫자를 문자열로 변환하려면 String() 함수를 사용한다.

var s = String(number);

숫자를 문자열로 변환하는 다른 기법으로 toString() 메서드를 사용하는 방법이 있다.

var n = 100;
var s = n.toString(); // 디폴트는 10진수 변화이고, 파라티터로 숫자(2~36)를 던지면 해당 진수로 변환한다.

toFixed(), toExponential(), toPrecision()은 숫자를 문자열로 변환할 때, 문자열에 포함될 소수점 자릿수나 지수 표기법 사용 여부 등을 지정할 수 있다.

var n = 123456.789;
n.toFixed(0); // "123457"
n.toFixed(2); // "123456.79"
n.toExponential(1); // "1.2e+5"
n.toExponential(3); // "1.235e+5"
n.toPrecision(4); // "1.235e+5"
n.toPrecision(7); // "123456.8"

문자열을 숫자로 변환하기

문자열이 숫자 문맥에 사용되면 자동으로 숫자로 변환된다.

var p = "21" * "2"; // 42
var p = "20" - 0; // 20

명시적으로 변환하는 방법은 Number() 생성자를 함수처럼 호출하는 것이다.

var number = Number(string_value);

좀 더 융통성 있는 방법이 필요하다면 parseInt()와 parseFloat()를 사용하라. parseInt()는 정수만 변환할 수 있지만, parseFloat()는 정수와 부동소수점 숫자를 모두 변환할 수 있다.

parseInt("3 blind mice"); // 3
parseFloat("3.14 meters"); // 3.14
parseInt("12.34"); // 12
parseInt("0xFF"); // 255
 
// parseInt()는 변환하려는 숫자의 기수를 지정하는 두 번째 전달인자를 받기도 한다.
parseInt("11", 2); // 3
parseInt("ff", 16); // 255
 
// parseInt()와 parseFloat()는 지정된 문자열을 숫자로 변환하지 못할 경우 NaN을 반환한다.
parseInt("eleven"); // NaN


불리언 값

불리언 데이터 타입은 오직 true, false 두 개의 값만을 가질 수 있다. 불리언 값은 무언가가 참인지 거짓인지를 말한다.


불리언 타입 변환

불리언 값은 쉽게 다른 타입으로 변환되거나 다른 타입에서 불리언 값으로 변환될 수 있으며 많은 경우 그 변환은 자동으로 수행된다. 명시적 타입 변환을 선호한다면 Boolean() 함수를 사용할 수 있다.

var x_as_boolean = Boolean(x);

다른 방법으로 불리언 NOT 연산자를 두 번 사용하는 방법이 있다.

var x_as_boolean = !!x;


함수

함수는 자바스크립트 프로그램에 정의되어 있거나 자바스크립트 구현에 미리 정의되어 있는 실행 가능한 코드다. 함수는 한 번만 정의하면, 자바스크립트 프로그램 내에서 여러 번 실행될 수 있다. 함수는 계산 대상인 값들을 지정하는 전달인자(argument)나 매개변수(parameter)를 넘겨받을 수 있으며 계산 결과를 나타내는 값을 반환할 수도 있다.

function square (x, y) {
    return x + y;
}
 
square(3, 10); // 13

자바스크립트의 중요한 특징 중 하나는 함수도 자바스크립트 코드로 조작할 수 있는 형태의 값이라는 점이다. 이것은 함수를 변수나 배열, 객체에 저장할 수 있으며 다른 함수의 전달인자로 넘겨 줄 수 있다는 것을 의미한다. 함수도 숫자나 문자열처럼 값이므로 다른 값처럼 객체 프로퍼티에 할당될 수 있고, 할당된 함수는 그 객체의 메서드(method)라고 부른다.


함수 리터럴

자바스크립트는 함수를 정의하는 함수 리터럴 문법도 제공한다.

function square (x, y) {
    return x + y;
}
 
var square = function (x, y) {
    return x + y;
};


객체

객체는 이름 붙은 값들의 모음이다. 보통 이 이름 붙은 값들을 객체의 프로퍼티라고 부른다. 객체 프로퍼티를 참조하려면 객체 이름을 쓰고 이어서 마침표와 프로퍼티 이름을 적어 주면 된다. 함수가 객체 프로퍼티로 저장될 경우 그 함수를 흔히 메서드라고 부른다.

var obj = {
    a : "aaa",
    b : "bbb",
    c : function () {
        alert(obj.a + obj.b);    
    }
}
 
obj.a; // "aaa"
obj.b; // "bbb"
obj.c(); /// "aaabbb"

객체 생성

객체는 특수한 생성자 함수를 호출하여 생성할 수 있다.

var o = new Object();
var now = new Date();
var pattern = new RegExp("\\sjava\\s", "i");
 
// 객체를 생성하고 나면 마음대로 객체를 사용하고 프로퍼티 값을 설정할 수 있다.
o.name = 'yang';

객체 리터럴

자바스크립트는 객체를 생성하고 프로퍼티를 지정하는 객체 리터럴 문법을 제공한다. 객체 리터럴은 중첩될 수 있다.

var o = {
    name : 'yang',
    hobby : 'soccer',
    weight : {
        past : '76kg',
        current : '80kg'
    }
}


배열

배열은 객체처럼 데이터값들의 모음이다. 객체 내에 포함되는 각 데이터 값에는 이름이 있지만, 배열의 각 데이터 값에는 번호(index)가 있다.

var a = ["a", "b", "c"];
 
a[1]; // "b"

배열 생성

배열은 Array() 생성자 함수로 생성할 수 있다.

var a = new Array();
 
a[0] = 1.2;
a[1] = "aaa";
a[2] = true;
a[3] = {x:1, y:2}
 
// 배열 원소들을 Array() 생성자에 넘겨주어 배열을 초기화할 수도 있다.
var a = new Array(1.2, "aaa", true, {x:1, y:2});
 
// 하지만 Array() 생성자에 숫자 하나를 넘겨주면 그 숫자는 배열의 크기로 사용된다.
var a = new Array(10);

배열 리터럴

자바스크립트는 배열을 생성하고 초기화하는 리터럴 문법을 제공한다. 객체 리터럴처럼 배열 리터럴도 중첩될 수 있다.

var a = [1.2, "aaa", true, {x:1, y:2}];
var b = [ [1, 2, 3], ["a", "b", "c"], [true, false] ];


null

자바스크립트 키워드 null은 아무런 값도 나타내지 않는 특수한 값이다.



undefined

undefined는 선언은 되었지만, 값이 할당된 적이 없는 변수에 접근하거나, 존재하지 않는 객체 프로퍼티에 접근할 경우 반환되는 값이다.



Date 객체

자바스크립트에서는 날짜와 시간을 표현하고 그 값을 조작하는 데 사용할 수 있는 객체 집합을 제공한다. Date 객체는 new 연산자와 Date() 생성자로 생성할 수 있다.

var now = new Date();

var xmas = new Date(2015, 11, 25); // 달을 나타내는 값이 0을 기반으로 하므로 12월이 숫자 11로 표현된다.

Date 객체의 메서드를 사용하여 다양한 날짜와 시간 값을 읽어 오거나 설정하고, Date 객체를 현지 시각이나 그리니치 표준시(GMT) 중 한 가지를 나타내는 문자열로 변환할 수 있다.

xmas.getFullYear();
xmas.getDay();
xmas.setFullYear( xmas.getFullYear() + 1 );


정규 표현식

정규 표현식은 텍스트 패턴을 기술하는 데 사용할 수 있는 강력한 문법을 제공한다. 정규 표현식은 RegExp() 생성자로 생성할 수 있고, 리터럴 문법을 사용할 수도 있다.

/^HTML/
/[1-9][0-9]*/


Error 객체

ECMAScript는 에러를 표현하는 몇 가지 클래스들을 정의하고 있다. 자바스크립트 인터프리터 런타임 에러가 발생하면 이러한 클래스 중 하나에 해당하는 객체를 던진다. (throw)



기본 데이터 타입 래퍼 객체

var s = "abcdefg";
var lastWord = s.substring(s.length-1, s.length);

위 예제에서 문자열을 조작할 때 객체 표기법을 사용하고 있다. 문자열을 객체일까? 기본 데이터 타입일까? typeof 연산자는 'string' 데이터 타입이라고 분명히 말해준다.

사실 자바스크립트에는 세 가지 핵심 기본 데이터 타입 각각에 대응되는 클래스가 정의되어 있다. 즉, 자바스크립트는 숫자, 문자열, 불리언 데이터 타입을 지원할 뿐만 아니라 Number, String, Boolean 클래스도 지원한다. 이 클래스들은 기본 데이터 타입을 둘러싸는 래퍼들이다. 래퍼는 기본 데이터 타입 값과 같은 값을 담고 있지만, 데이터 조작을 위한 프로퍼티와 메서드도 가지고 있다.

var len = s.length;

위 코드에서 s는 문자열인 채로 남아있다. 새로운 임시 String 객체가 생성되고, 이 객체를 통해 length 프로퍼티에 접근하고, 임시 String 객체는 버려진다.



값에 의한 VS. 참조에 의한

데이터값 조작 방식은 두 가지인데, 이 둘은 근본적으로 서로 다르다. 이 두 방식은 '값에 의한(by value)' 조작과 '참조에 의한(by reference)' 조작이라고 불린다.

값에 의해 데이터를 조작할 때 중요한 것은 데이터값이다. 값 할당 시에는 실제로 값이 복사되며 원본과는 완전히 별개로 저장되는 독립적인 값이다.

참조에 의한 조작에서는 값에 대한 실제 복사본이 오직 하나만 존재한다. 우리가 조작하는 것은 값에 대한 참조다. 참조에 의해 할당된 새 변수는 원본 변수가 가리키는 값과 같은 값을 가리킨다.


기본 타입과 참조 타입

기본 타입은 값에 의해 조작되고 참조 타입은 참조에 의해 조작된다. 숫자와 불리언 타입은 기본 타입이다. 이들은 정해진 개수의 작은 바이트로 구성되어 있어 인터프리터가 저수준 오퍼레이션을 통해 손쉽게 조작할 수 있기 때문이다. 반면 객체, 배열, 함수는 참조 타입이다. 이들은 임의 개수의 프로퍼티나 원소를 포함할 수 있으므로 쉽게 조작할 수 없다. 그 이유는 이들을 값에 의해 조작하면 복사나 비교작업에 메모리를 비효율적으로 많이 사용해야 하기 때문이다.

문자열의 길이는 임의적이므로 참조 타입이어야 할 것 같지만, 객체가 아니라는 이유로 기본 타입으로 취급된다. (사실 문자열을 '기본 타입' 대 '참조 타입'이라는 이분법에 들어맞지 않는다.)

// 값에 의한
var n = 1;
var m = n;
 
n = n + 1;
console.log(n); // 2
console.log(m); // 1
 
// 참조에 의한
var o = {x : 10};
var co = o;
 
o.y = 20;
console.log(o); // {x: 10, y: 20}
console.log(co); // {x: 10, y: 20}

문자열 복사와 전달

문자열은 내용을 변경할 방법이 없다. 자바스크립트에서 문자열은 의도적으로 변경하지 못하게 만들어져 있다. 문자열 내부의 문자들을 변경하는 문법이나 메서드 혹은 프로퍼티는 존재하지 않는다. 따라서 문자열이 값에 의해 전달되는지 참조에 의해 전달되는지를 구별할 방법은 없다. 효율성 때문에 자바스크립트의 문자열이 참조에 의해 전달된다고 가정해도 되지만, 실제 코드 작성에 영향을 주지는 않기 때문에 어떤 가정을 내리든 별로 상관이 없다.


문자열 비교

문자열이 값에 의해 전달되는지 참조에 의해 전달되는지를 구별할 수는 없지만, 값에 의해 비교되는지 참조에 의해 비교되는지 알 수 있다. 이 예는 문자열이 값에 의해 비교됨을 보여 준다.

var s1 = 'hello';
var s2 = 'hell' + 'o';
s1 === s2 // true


댓글