[Javascript] 변수의 데이터 타입

변수의 데이터 타입

총 다섯가지의 기본적인 데이터 타입이 존재하며 이를 원시 데이터 타입 이라고 한다. 확인하는 법으로는 typeof 를 사용하면 알 수 있다.

Number

- 가장 기본이 되는 데이터 타입

var number1 =1;
var number2 = '1';
console.log(number1 == number2);    // result : false;

- 형 변환

/*
* 암시적 형변환
- 자바스크립트 엔진이 필요에 의해 암시적으로 형을 자동으로 변환시키는 것
- 문자열이 숫자 문맥에 사용되면 자동으로 변환
*/
var num1 = "1";    //string
var num2 = "2";    //string
var result = num1 * num2;
console.log(typeof result);    //result : number
/*
* 명시적 형변환
- 개발자가 자바스크립트를 이용하여 직접 변환할 타입을 지정해주는 것
- 숫자에 빈 문자열을 더하면 된다.
*/
var num1 = "1";
console.log(typeof num1);    //result : string
num1 = Number(num1);    //문자형 데이터를 숫자형 데이터로 변환
num1 = parseInt(num1);    //문자형 데이터를 숫자형 데이터로 변환 + 숫자가 아닌 경우 자체 삭제

- NaN(Not a Number)은 숫자형 값 중 하나로, 해당 값을 반환하는 경우는 의도한 조작이 실패했을 경우이다.

1. Error 가 아님을 유의

2. 예를 들어 타 프로그래밍 언어에서는 string타입의 변수를 숫자로 나누려 하면 Error를 반환하며 코드 실행을 멈추지만,

자바스크립트에서는 Nan을 반환하며 나머지 코드는 실행한다.

3. NaN 이 포함된 조작은 항상 Nan을 반환 eg: Nan/10 ==> return NaN

4. Nan은 어떠한 값과도 일치하지 않으며, NaN끼리도 일치 하지 않는다.

5.isNaN(NaN) 함수를 이용할 수 있음

String

- 기본적으로 문자열은 ''(작은 따옴표) 혹은 ""(큰 따옴표)로 감싸서 표현

var str = "This is String";
str.charAt(10)    //result : 'r', str의 변수 안에서 index가 10인 글자를 반환
str.substring(1,10)    //result : 'his is St', str의 변수 안에서 index 기준 1에서부터 10에 해당하는 글자를 반환
str.indexOf("String")    //result : 8, str의 변수 안에서 "String" 에 해당하는 index번호를 반환

- 형변환

/*
* 암시적 형변환
- 자바스크립트 엔진이 필요에 의해 암시적으로 형을 자동으로 변환시키는 것
- 숫자에 빈 문자열을 더하면 된다.
*/
var num = 1;
console.log(typeof num);    //result : number
num = num + "";
console.log(typeof num);    //result : string
/*
* 명시적 형변환
- 개발자가 자바스크립트를 이용하여 직접 변환할 타입을 지정해주는 것
- 숫자에 빈 문자열을 더하면 된다.
*/
var num = 1;
console.log(typeof num);    //result : number
num = toString(num);
console.log(typeof num);    //result : string

Object

- 자바스크립트의 핵심( 자바스크립트는 객체기반의 스크립트언어)

- Property와 Method로 이루어져 있음.

var thatPerson = {
    name : "김철수",
    age : "15",
    haveGirlFriend : false
}
//김철수라는 이름을 가졌으며, 나이는 15살, 애인은 없음

- `객체 리터럴 표기법은 프로퍼티를 여러 개 쓸 경우, 가독성을 확보하는 용도로만` 쓸 것을 권장( 아래와 같이 매개변수를 여러개 넘길 경우 많이 사용 )

var thatPerson = {
    name : "김철수",
    age : "15",
    haveGirlFriend : "없음"
}
function rendering(props){
    var str ="";
    str += props.name + "라는 이름을 가진 사람의 나이는";    // === str += props["name"] + "라는 이름을 가진 사람의 나이는";
    str += props.age + "살이며, 애인은 ";    // === str += props["age"] + "살이며, 애인은 ";
    str += props.haveGirlFriend + "니다.";    // === str += props["haveGirlFriend"] + "니다.";
    return str;
}
console.log(rendering(thatPerson));    //result : 김철수라는 이름을 가진 사람의 나이는15살이며, 애인은 없음니다

null

- 빈 객체를 참조하는 특별한 값. `null` 이라는 값이 들어 있다.

- 변수를 정의할 때, 객체를 가르키게 할 경우 null 값을 할당해주는 것을 권장

- 자바스크립트가 생긴 이래로 계속 존재해오던 버그

undefined

- 변수를 정의하였으나 초기화하지 않았을 경우의 데이터 타입

- null 값에서 파생된 데이터 타입

- 초기화 하지 않은 경우 undefined라면 변수의 default값은 undefined 라는 의미

- 명시적으로 undefined를 할당하지 않더라도, 기본값으로 저장되기에 undefined를 지정하면 안됨

> 일부에서는 명시적으로 지정하면 안된다고 나오지만, 상황에 따라서 delete 연산자를 쓰기보단 오히려 명시적으로 undefined를 할당하는 것을 권장

Boolean

- ECMAScript 에서 가장 많이 쓰이는 데이터 타입

- 값으로는 'true' 혹은 'false' 만 존재