[클린코드 자바스크립트] Section 3 : 타입 다루기

김보나·2022년 1월 19일
0

javascript

목록 보기
2/12
post-thumbnail

오늘은 타입 다루기에 대한 강의를 들었는데,
그동안 잘못 사용하고 있었던 경우가 꽤 많았다.
(굳이 따지면 잘못은 아니지만 clean하지 못한,,,)

특히 ==를 예시들어주신 것 처럼 야매로 사용하곤 했다.
그리고 null과 undefined의 차이를 정확히 알게 되었다.
마지막으로 형변환 할 때 명시적으로 해주기! 잊지 말아야지,,,


타입검사

  • 자바스크립트는 동적인 타입을 가지는 언어여서 타입 검사가 어려움!
  • 하나하나 잘 찾아서 검색을 해서 상황에 맞게 할 것. 어떠한 부분을 주의해야하는지 보자.(일일히 외우는건 어렵다.)
  • 프리미티브와 레퍼런스를 잘 구분해서 검사하자.

typeof

  • typeof(피연산자) → 타입을 리턴해줌
  • 불변하는 primitive 타입을 검사함
  • primitive
    • string, boolean, undefined, number
  • reference
    • object → array,function, date
  • typeof null → object로 나옴. ⇒ 언어적 오류임.
  • js는 동적으로 변하기 때문에 타입을 검사하기 어려움

instanceof

  • 객체가 Class에 속하거나 상속받는지 알아볼 수 있는 연산자
  • 객체 instanceof 클래스 → boolean으로 리턴
  • 예시
    function Person(name,age){
    	this.name = name;
    	this.age = age;
    }
    
    const poco = new Person('poco',99);
    
    poco instanceof Person //true
    
    const p = {
    	name : 'poco',
    	age:99
    	}
    p instanceof Person //false
  • poco는 Person으로 만들어서 true, p는 Person으로 만든게 아니라서 false
  • 레퍼런스형 타입은 모두 Object이기 때문에 array,function,date 타입을 instanceof Object로 검사했을때 모두 true가 나옴
    const arr = [];
    const func = function () {};
    const date = new Date();
    
    arr instanceof Array; //true
    func instanceof Function; //true
    date instanceof Date; //true
    
    arr instanceof Object; //true
    func instanceof Object; //true
    date instanceof Object; //true
    
    Object.prototype.toString.call("hello"); // [object String]
    Object.prototype.toString.call(arr); // [object Array]
    Object.prototype.toString.call(func); // [object Function]
    Object.prototype.toString.call(date); // [object Date]

💡 구글링 팁
javascript is 타입 와 같은 형식으로 검색한 뒤 다양한 글 보기
특히 스오플에서 좋아요날짜 확인하기‼️
→ 자바스크립트는 믿을만한 언어가 아니다.... 의심하기


undefined & null

  • 값이 없거나 정의되지 않은것을 명시적으로 표현한 것으로 서로 특징이 다르니 사용할 때 유의할것!
  • 개발시, 팀 차원에서 둘중에 어떤걸 사용할건지 정하는게 좋음

  • undefined → 무언가 만들어 놓고 정의하지 않은것
    // 선언했지만 값은 정의되지 않고 할당되지 않음
    
    let varb;
    typeof varb; //undefined
    
    //수학 연산시에는 NaN으로 표현됨
    undefined + 10 //NaN
    
    !undefined //true
    
    undefined == null //true
    undefined === null //false
    !undefined == !null //true
    
  • null → 없는걸 명시적으로 표현
    • ! → 값을 뒤집음 !! → 값을 boolean으로 형변환 시도
    !null //true
    !!null  //false
    
    null === false //false
    !null === true // true
    
    //수학 연산에서는 0으로 표현됨.
    null+12 //12
    

eqeq 줄이기

eqeq란?

  • 동등 연산자 == 를 뜻함.
  • Strict equality(엄격한 동등자) ===

equality

  • 검사만 했을 뿐인데 형변환이 자동으로 일어남
'1' ==1 //true
1 == true // true
  • 어떤 side Effect가 일어날지 모르므로 위험함!
  • 문자열로 받는 숫자와 숫자 비교시 형변환을 직접 해서 strict equlity를 사용할것
    ticketNum.value == 0 //true, 사용하지말기
    
    Number(tickeyNum.value) === 0 //true, 정석인 방법으로 사용하기

형 변환 주의하기

  • 암묵적인 형 변환 보다는 명시적인 형변환이 좋다.
11 + '문자' //'11문자'

!!'문자' //true
!!'' // false

//=> 모두 암묵적으로 형변환이 일어남

//parseInt('문자열',진수) -> 10진수가 default가 아니므로 몇진수인지 꼭 넣어주기 
parseInt('9.9999',10)   //9

String(11 + '문자') //'11문자'

Boolean('word')     //true
Boolean('')         //flase
Number('11')        //11

// => 명시적으로 형변환 해주기!

isNaN

  • 컴퓨터는 2진수, 사람은 10진수를 사용하기 때문에 그 사이 간극이 일어나게됨.
  • js에서는 부동소수점 처리를 위해 IEEE 754표준을 이용함
    • 부동 소수점 : 떠돌이 소수점

isNaN

  • is Not A Number : 숫자가 아니다.
  • 값이 NaN이면 true, 아니면 false
  • isNan(value) → 느슨한 검사 - 자동으로 숫자로 형변환됨
  • Number.isNaN(value) → 엄격한 검사(강제로 형변환하지 않음)
console.log(isNaN(123 + "test")); //true
console.log(Number.isNaN(123 + "test")); //false
profile
우주최강 개발자가 될 때까지😈

0개의 댓글