3장 데이터 타입과 값

3장 데이터 타입과 값 단원에 대한 내용 정리.

1. 특수한 숫자 값
    - Infinity, -Infinity : 무한대를 나타내는 특수한 값
    - NaN : 수리연산이 정의되지 않은 결과를 산출하거나 에러를 발생시킬 경우 리턴되는 값
                어떤 숫자와 비교해도 동일하지 않으며 심지어 스스로와 비교해도 그렇다.                 ( ==, === 할때 다시 나오는 내용)

        cf. isNaN() : NaN값을 테스트 하기 위함 .
           isFinite() : 주어진 숫자가 NaN이 아닌 동시에 양의 무한대나 음의 무한대가 아닌지 여부를 검사

2. 숫자를 문자열로 변환
 a. var n = 100;
     var s = n + “bottles of beer on the wall.”;

 b. var n_as_string = n + “”;

 c. var string_value = String(number)

 d. string_value = number.toString();

3. 문자열을 숫자로 변환
 a. var product = “21“ * “2“; // 두 문자열 곱은 숫자 42가 된다.         cf. 뒤에서도 다루는 내용이지만 '+' 연산자를 사용할 경우 212이 되어 버린다.
            + 연산자는 문자열을 우선으로 취급하여 연산한다.
 b. var number = string_value – 0 ;
 c. var number = Number(string_value);
  * a ~ c는 10진수만 제대로 변환할 수 있다는 문제점이 있다.

 d. parseInt(“3 blind mice”); // return 3
 e. parseFloat(“3.14 meters”); // return 3.14
 f. parseInt(“12.34”); // return 12
 g. parseInt(“0xFF”); // return 255
 h. parseInt(“eleven”); // return NaN
 i. parseFloat(“$72.47“); // return NaN . 문자가 앞에 오기 때문..

4. 함수 리터럴
 - function 키워드, 함수 이름, 괄호로 둘러싸인 함수 전달인자 목록, 중괄호로 구성
  → 자바스크립트 표현식 내에 나타날 수 있다. 함수 이름을 명시하지 않는다.
 ex) var square = function(x) { return x * x; }

5. 객체 리터럴 (= 객체 초기자)
 - 콜론으로 구별되는 프로퍼티 이름/값 쌍들이 다시 쉼표로 분리된 목록이다.
  ex) var rectangle = { upperLeft : { x: 2, y: 2},
                                    lowerRight: { x: 4, y: 4}
                                  }; cf. 센차터치 프레임워크 사용시 굉장히 많이 사용 했으며, 

대부분의 클래스 생성 시 배열의 아이템으로 각각의 객체 리터럴을 선언하여 많이 사용 하였었다.

6. 배열 리터럴
 - 배열을 생성하고 초기화하는 리터럴 문법을 제공.
  대괄호로 둘러싸인 쉼표로 구분된 값들의 목록
  ex) var a = [1.2, “javascript”, true { x:1, y:3 } ];
        var sparseArray = [1,,,,5];
       // 쉼표 사이에 값을 생략하여 정의되지 않은 요소를 리터럴 내에 포함

7. null
 - 아무런 값도 나타내지 않는 특수한 값. 즉, 어떠한 객체도 나타내지 않는 값
 - 어떤 변수가 null 값을 가지면, 그 변수가 유효한 객체나 배열, 숫자, 문자열,
    또는 불리언 값을 담고 있지 않다는 것을 알 수 있다.

8. undefined
 - 선언은 되었지만 값이 할당된 적이 없는 변수에 접근할 경우 반환되는 값.
 - 존재하지 않는 객체 프로퍼티에 접근할 경우 반환되는 값.
 - null과 undefined는 서로 구별되는 값이지만 동등연산자는 같은 것으로 간주한다.      일치연산자는 다른 것으로 간주한다. ( 뒤에 나오는 내용 ) 
 - null과는 다르게 예약어가 아니다.
 - 불리언 문맥에서 사용되면 false로 변환된다.

* null vs undefined

 참고 블로그 : http://blog.naver.com/myrilke?Redirect=Log&logNo=150022239783

null변수란? 정의되지 않은 변수~!!

예를 들어 그냥 alert(s);라고 s변수값을 찾아보면 이는 null이다. 정의도 안 되어있고 변수도 지정이 안 되있기 때문이다.

 

undefined상태란? 초기화 되지 않은 변수~!!

예를 들어

 

var s;

alert(s);

 

라고 s변수값을 찾아보면 이는 undefined이다. 정의는  되어있지만 초기값이 지정이 안 되있기 때문이다.

 

BUT~!!! 이런 초기화는 null도 undefined도 아니다~!!

 

var s = "";

 

이런 식으로 처리를 해도 이는 null도 undefined도 아니다.

 

그럼 이런 논리식에서의 null과 undefined는 어떻게 처리가 될까?

 

if (s)

 

이건 s가 null이든 undefined이든 둘 다 false가 되면서 if문 조건에 만족하지 못한다.

 

만약 이 변수가 null인지 undefined인지 확실히 정해진 변수인지 알고 싶을 때에는 자세하게 쓰자

1. if ( s == null)          //  null일 때에 조건 만족

2. if ( s == undefined)  //  undefined일 때에 조건 만족, 만약 null 입력시 에러 창이 뜬다.

                               //  즉 undefined일때에만 조건 만족

3. if (s)                     //  s변수가 값이 있을 때에 조건 만족

 

만약 변수 초기값만 주고 선언을 하지 않았다면 어떨까? 이는 전역변수로 탈바꿈된다. 그러나 전역변수는 소스가 복잡해지면 다루기 힘드므로 사용을 배제하자. 꼭 최소한 var은 붙이자.

 

이번엔 NaN에 대해 알아보자. NaN은 (Not a Number)의 약자로 숫자로 바꿀 수 없을 경우 NaN상태로 간주한다.

 

var num = 1;

if(!isNaN(num)){       // isNaN은 숫자로 바꿀 수 없는 변수가 들어올 때 true임을 명심하자.

    alert(num); 

}

 

위의 소스의 경우 당연히 1을 출력하게 된다. 그럼 이건 어떨까?

 

var num = "";

if(!isNaN(num)){

    alert(num); 

}

 

놀랍게도 이건 공백을 출력하게 된다. 공백도 숫자의 대열에 들어가는 것 같다-_-;;;

 

 

var num;

if(!isNaN(num)){

    alert(num); 

}

 

이건 num이 정의되지 않았다는 에러창을 출력하게 된다. 최소한 어떤 값이 있어야 isNaN()메소드가 작동하는 것 같다. 이를 봐서는 당연히 null상태의 변수를 넣어도 에러가 발생함을 알 수 있다...;

 

지금까지 NaN, null, undefined상태에 대해 알아보았는데 이것을 알아둬야 하는 가장 중요한 이유는.... 나중에 변수가 많아지게 되면 이게 어떤 상태인지, 내가 썼던 변수를 쓰고 있는 것인지 혼돈이 오기 때문이다;; 잘 알아둬서 디버깅이나 에러를 만들지 않도록 소스를 잘 짜도록 하자...

 

예를 들어 숫자입력을 받는 변수는 isNaN메소드를 한번 거쳐서 이것이 제대로 값을 받았는지를 검사해 본다거나 alert창으로 검사했을 때 undefined값이 뜨면 변수의 선언부를 다시 한 번 찾아본다거나 하면서 말이다.

9.  래퍼(Wrapper)
- 기본 데이터 타입 값과 동일한 값을 담고 있지만, 데이터 조작을 위한 프로퍼티와 메서드도 가지고 있음     cf. 자바나 기타 언어 등에서 정의한 래퍼객체와 같은 것으로 생각하면 될 듯.    

10. 객체에서 기본 타입으로 변환
- valueOf() : 객체를 적절한 기본 타입 값으로 변환하는 것.                     때문에 객체에 따라서 valueOf() 메서드가 문자열을 반환할 수도 있다. 

- 대부분의 객체는 Object의 기본 valueOf() 메소드를 상속받으며 이 메서드는 간단히 객체 그 자체를 반환. 기본 valueOf() 메서드는 기본 데이터 타입 값을 반환하지 않기 때문에 자바스크립트는 다음으로 toString()메서드를 호출하고 반환되는 문자열을 숫자로 변환함으로써 객체를 숫자로 변환하려고 시도한다. 

- 배열의 toString() 메서드는 각 배열 원소를 문자열로 변환하고 배열 원소 사이에 쉼표를 삽입하여 이어 붙인 문자열을 결과로 반환한다. 아무 원소도 없는 배열은 빈 문자열로 변환되고 이것은 숫자 0 으로 변환된다. 배열의 원소가 둘 이상이거나, 숫자가 아닌 원소가 있으면 배열은 NaN으로 변환된다. 

* 내용이 어렵다. 한번 보고 정리중인데 다시 읽어보고 정리해야겠다.

11. 값에 의한 vs 참조에 의한
- 데이터 값 조작 방법 3가지
  1. 값 복사 : 값을 새로운 변수에 할당할 수 있다.
  2. 값을 함수나 메서드의 전달인자로 넘겨줌
  3. 두 값이 동일한지를 알아보기 위해 한값과 다른 값을 비교 

12. 기본 타입과 참조 타입
 - 기본 타입 : 숫자와 불리언 타입 또한 기본 타입이다. ( 고정된 크기의 메모리를 차지 )
 - 참조 타입 : 객체, 특수한 종류인 배열이나 함수 또한 참조 타입.
- 임의 개수의 프로퍼티나 원소를 포함할 수 있으므로,

 크기가 고정된 기본 타입을 조작하듯 쉽게 조작할 수는 없다.

13. 자바스크립트 문자열 비교
  - 자바스크립트 문자열은 값에 의해 비교 된다.

cf. 자바에서는 문자열을 비교하기 위해서 string1.equals(string2) 과 같은 것을 해야 했지만

자바스크립트에서는 그냥 == , < , > 등으로 비교해도 비교가 된다.

Quiz ( 출처 : Kingear님 )

1. 다음 소스에서 에러가 있다면 수정하고 최종 출력되는 결과를 적어라.

function foo(인자, isUse) {

if(isUse) {

return 인자 + 10;

} else {

return 인자;

}

}

result = foo("ABC", "false");

alert(result);

2. 다음 식의 결과를 써라 

A. isNaN("200A");

B. "number : " + 10 * 20;

C. 50 + "100";

D. "300" - 10 + 60;

E. parseInt("200KG");

F. parseInt(N: 30");

3. 다음 중 false 로 평가되는 식은 ?
      A. null == "undefined"

B. "false" 

C. 0

D. "  "

E. new Boolean(false)

4. 다음 소스의 실행 결과를 적어라. 

function foo(a, b) {

if(arr1 == arr2) {

return;

} else {

arr1[1] = arr2[0];

arr1[0] = arr2[1];

}

}

var arr1 = [1,2];

var arr2 = [1,2];

foo(arr1, arr2);

alert(arr1[1]);

답 :
 1. "ABC10"

 2.
    A. true

    B. number : 200
    C. 50100
    D. 350
    E. 200
    F. NaN

3.  
    A. C
    cf) A. undefined 일 경우에는 true

   D. "" 와 "  " 는 다른 것이다. 
   E. 객체 자체는 true이다.

4. 배열은 참조 타입 변수 이므로 서로 다른 것이다.
    즉, else 문에 걸리게 되어 최종 출력 값은 1이 출력되게 된다.