형변환과 덕 타이핑

컴퓨터/IT학습

lu

luasenvy (luasenvy)

암묵적 / 명시적 형변환

const str = String(100); // 명시적 캐스팅
const str2 = 1024 + ""; // 암묵적 캐스팅
const tf = !"" // 암묵적 캐스팅

Number(null); // 0
Number(undefined); // NaN

위 예제처럼 Number(), Boolean(), String() 같은 내장함수를 명시적으로 호출하여 형변환을 하는 방법이 있는가 하면 문자열이나 부울_(boolean)을 대상 값과 함께 연산시켜 암묵적으로 형변환을 할 수도 있다. 자바스크립트에서는 형변환을 수행할 때 예상과 다른 값이 나오는 경우를 쉽게 마주칠 수 있다.

일례로 위 코드처럼 Number()를 통해 캐스팅을 하더라도 상식적으로 null과 undefined 두 값이 모두 비어있음을 나타내고 있어 같은 값이 나올거라 예상하지만 서로 다른 값이 나온다.

자료형의 상호작용

const a = true + false;
const b = 10 / "2";
const c = "number" + 10 + 1;
const d = [0] > null;
const e = "true" == true;
const f = {} + [] + [1];

동작해선 안될 것 같은 멍청한 코드들도 자바스크립트라면 오류없이 출력이 된다. 이런 웃기지만 잘 작동하는 예제들은 wtfjs에서 더 확인할 수 있다. 이런 특성은 보기에 쉽고 초기 학습장벽이 아주 낮다는 큰 장점이 있다. 초등학생 앉혀놓고 10분이면 변수에 값 넣고 간단한 사칙연산을 하거나 브라우저에 alert()정도는 쉽게 가능하다.

그러나 단점도 함께 가지고 있는데 디버그를 어렵게 하고 직접 실행되기 전까지 작동을 예상하기 어렵다는 점이다. 이러한 단점은 프로젝트가 커질수록 더욱 부각되는데 타입스크립트가 인기 있는 이유이기도 하다.

if ( numVariable === 0 ) console.log("exact number 0");
if ( strVariable == 0 ) console.log("number 0 or string 0 or boolean ...");

이런 느슨한 상호작용 덕분인지 ===, !==같은 생소한 연산자도 만나 볼 수 있다. 값은 물론 자료형까지 정밀하게 비교하는 비교 연산자이다. 상호작용에 대해서 더 깊게 공부하고 싶다면 JavaScript type coercion explained에서 확인하기를 추천한다.

덕 타이핑

오리처럼 생기고,
오리처럼 헤엄치고,
오리처럼 꽥꽥거리면
아마 오리겠지

쉽게 "뭐, 이 정도면 그렇다 칩시다"라고 이해하면 된다. 어원은 DuckTest¹에서 찾아볼 수 있다. 타이핑은 자료형_(타입)을 결정하는 방법을 말한다. 필요한 멤버가 모두 있다면 호환되는 자료형이라고 가정하는 방식이다. 두 클래스를 각각 사람과 오리라고 정의해도 발이 두개고 꽥꽥 소리를 낼 수 있으면 호환된다고 가정하는 것이다.

선언적 타이핑

int a = 10;

말 그대로 자료형을 문법적으로 명시하여 선언하는 방법이다. 다른 언어에서 쉽게 찾아볼 수 있다.

구조적 타이핑

class Duck {
  constructor() {
    this.sound = "quack";
  }

  makeSound() {
    return this.sound;
  }

  run() {
    return "foot";
  }
}

class Human extends Duck {
  constructor() {
    super();
    this.sound = "hello, world!";
  }
  
  think() {
    return "brain";
  }
}

const human = new Human();
console.log(human.makeSound()); // hello, world!

멤버를 확인하여 서로 호환되는 타입인지 확인하는 방법이다. extends 예약어를 사용하여 두 클래스가 호환됨을 문법적으로 명시한다. Human클래스는 Duck클래스를 모든 멤버를 가지게 되며 이를 '상속한다' 또는 '확장한다'라고도 표현하며 두 클래스는 각각 '부모', '자식' 또는 '상위', '하위' 클래스라 부르기도 한다.