JavaScript - 데이터형, 형변환, 리터럴

1. 데이터 형(Data Type)

자바스크립트의 데이터형(Data Type)은 원시형(Premetive Type) 여섯가지와 객체형(Object Type) 한가지로 총 일곱가지가 있습니다.

1.1. 원시형(Premitive Type)

- Boolean : true와 false 값을 가집니다.
- null : 어떤 값이 의도적으로 비어있음을 의미하는 특별한 키워드 null을 사용합니다. 대소문자를 구별하므로 Null, NULL등은 null이 아닙니다.
- undefined : 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당됩니다.
- Number : 정수 또는 실수형 숫자입니다.
- String : 문자열 입니다.
- Symbol : ES6에서 추가된 자료로 값이 고유하고 불변인 데이터형 입니다.

// Symbol 사용예
const symbol1 = Symbol();
const symbol2 = Symbol();
console.log(symbol1 === symbol2 ? true : false);  // false

console.log(symbol1);
console.log(symbol2);

// 인자를 줄 수 있지만 생성된 symbol에는 영향이 없고 디버깅용입니다.
const symbol3 = Symbol("symbol3");
console.log(symbol3);

결과)
false
Symbol()
Symbol()
Symbol(symbol3)

1.2. 객체형(Object Type)

객체형은 참조형(Reference Type)이라고도 합니다. 객체를 저장할 메모리가 힙(Heap)에 생성되고 그곳을 가리키는 참조 주소가 객체형 변수에 할당되기 때문입니다.

- Object : 객체의 참조를 가집니다.

2. 자료형 변환(Type Cast)

자바스크립트는 동적 형지정 언어입니다. 변수를 선언할때 저장할 수 있는 데이터 형(Data Type)을 지정할 필요가 없습니다. 또한 데이터 형이 프로그램 실행 도중 필요에 따라 자동으로 변환됩니다.

// 변수에 숫자값을 넣습니다.
var answer = 42;

// 동일한 변수에 문자열을 넣습니다.
answer = "답변입니다.";

2.1. 숫자를 문자로 변환

플러스(+) 연산자로 문자열과 연결되면 자동으로 변환됩니다.

// 숫자가 문자로 자동변환됩니다.
var x = "정답은 " + 10;  // "정답은 10"
var y = 10 + "이 정답";  // "10이 정답"

플러스(+) 가 아닌 다른 연산자는 문자열 연결에 사용되지 않습니다.

// 마이너스(-) 연산자는 숫자로 변환되어 계산이 됩니다.
"37" - 7  // 30

// 플러스(+) 연산자는 문자열로 변환되어 연결됩니다.
"37" + 7 // 377

2.2. 문자를 숫자로 변환

문자를 숫자로 변환하기 위해서는 내장함수 parsetInt(), parseFlat()를 사용합니다.

// 문자열을 정수로 변환합니다.
var numString = "15";
// 10진수로 파싱합니다.
parsetInt(numString, 10);   // 15

// 문자열을 실수로 변환합니다.
numString = 1.5;
parseFloat(numString);  // 1.5

3. 리터럴(Literal)

리터럴은 값을 나타내기 위해 사용됩니다.

3.1. 불린(Boolean) 리터럴

true와 false 두 가지 값을 가집니다.

// flag 변수를 선언하고 Boolean 값으로 초기화 합니다.
var flag = true;
if(flag === true) {
    flag = false;  // false 값으로 변경
}

console.log("값은 " + flag); // "값은 false"

3.2. 정수형 리터럴

정수는 10진, 16진, 8진 및 2진수로 표현됩니다.

- 10진수 : 0(Zero) 또는 0(zero)이 아닌 숫자로 시작되는 숫자입니다.
- 8진수 : 0(zero), 0o(혹은 0O)로 시작하면 8진수입니다. 8진수는 오직 숫자 0-7만 포함할 수 있습니다.
- 16진수 : 시작이 0x(나 0X)는 16진수임을 나타냅니다. 16진 정수는 숫자 0-9 및 문자 a-f, A-F를 포함할 수 있습니다.
- 2진수 : 시작이 0b(나 0B)는 2진수입니다. 2진 정수는 오직 숫자 0과 1만 포함할 수 있습니다.

// 10진수 예
0, 15, -20

// 8진수 예
012, 0o7, -0O15

// 16진수 예
0x12A, -0xFF

// 2진수 예
0b001, -0B0101

3.3. 부동 소수점 리터럴

부동 소수점 리터를은 다음과 같은 부분으로 구성됩니다.

- 부호("+"나"-")가 붙은 10진 정수
- 소수점(".")
- 소수
- 지수

// 부동 소수점 리터럴 예
3.14159
- 3.14.159
3.1E+12
.1e-23

3.4. 문자열 리터럴

문자열 리터럴은 큰 따옴표("") 또는 작은 따옴표('')로 묶인 0개 이상의 문자입니다.

// 문자열 리터럴의 예
"foo"
'bar'
"12345"

3.5. 템플릿 리터럴

템플릿 리터럴은 ES2015(ES6)에서 추가된 리터럴로 backtick(`)으로 둘러싸인 문자열을 말합니다. 템플릿 리터럴은 내부에서 줄바꿈을 할 수 있고, ${} 를 사용해서 문자열 내에 표현식도 넣을 수 있습니다.

// 템플릿 문자열 예
var name = "홍길동";

var backtick = `템플릿 문자열 입니다.
줄바꿈도 가능합니다.
나의 이름은 ${name} 입니다.`;

console.log(backtick);

결과)
템플릿 문자열 입니다.
줄바꿈도 가능합니다.
나의 이름은 홍길동 입니다.

3.6. 정규식 문자열

자바 스크립트 정규식 문자열은 /pattern/flags; 와 같은 형식을 가집니다.

// 정규식 문자열 예
var patt = /^abc/gi;  // 전체에서 abc로 시작하는 열을 검색합니다.

정규식의 자세한 내용은 "자바스크립트 정규식 객체와 자주 쓰이는 함수"를 참조하세요.

3.7. 배열 리터럴

배열 리터럴은 대괄호([])로 묶인 0개 이상의 식 또는 값의 목록 입니다. 배열 리터럴을 사용해서 배열을 만들면 지정된 요소로 초기화된 배열이 만들어지고, 배열의 길이는 요소의 갯수 입니다.

// 배열 리터럴 예
var name = "홍길동";

var arr = [name, "aaa", "bbb"];

console.log(arr);
console.log(arr.length);

결과)
(3) ['홍길동', 'aaa', 'bbb']
3

3.8. 객체 리터럴

객체 리터럴은 중괄호({})로 묶인 0개 이상의 객체의 속성명과 값의 쌍의 목록입니다. 객체 리터를을 사용해서 객체를 간단하게 만들 수 있습니다.

// 객체 리터럴 사용예
let person = { name: "홍길동", age: 30, job: "회사원" };

let person = {
    name: "홍길동",
    age: 30,
    job: "회사원",
    office: {
        name : "좋은회사",
        address : "제주도"
    }
};

console.log(person.office.name);  // "좋은회사"

객체의 속성명은 공백을 포함한 어떤 문자열도 될 수 있습니다. 하지만 자바스크립트 식별자(identifier) 규칙에 맞지 않는 속성명을 사용하려면 따옴표로 묶어야 하고 사용할때도 마침표(.) 연산자를 사용하지 못하고, 배열 표기법([]) 를 사용해야 합니다.

let person = {
    name: "홍길동",
    "office name" : "좋은 회사"
}

console.log(person.name);
console.log(person["office name"]);

향상된 객체 리터럴
ES2015(ES6)에서 객체 리터럴 표현이 향상되었습니다.

var obj = {

    // __proto__ 사용하여 프로토타입 설정
    __proto__: theProtoObj,

    // 속성과 값의 이름이 같으면 줄여서 사용가능
    // 'handler: handler'의 단축 표기
    handler,

    // 함수 간단히 표시 기존은 toString: function() { ... } 
    toString() {

        // super를 사용한 prototype 함수 호출
        return "d " + super.toString();
    },

    // 속성 이름에 계산식(동적)으로 사용가능
    [ 'prop_' + (() => 42)() ]: 42

};

저작자표시

쉬고 싶은 개발자