자바스크립트는 다이나믹 타입 언어로, 변수의 타입을 선언하지 않고 사용할 수 있습니다. 이는 개발자에게는 유연성을 제공하지만, 때로는 형 변환으로 인해 발생하는 문제를 야기할 수도 있습니다. 형 변환에 대한 이해와 이를 피하기 위한 설계 패턴에 대해 알아보겠습니다.

1. 암시적 형 변환

자바스크립트에서는 변수의 타입에 따라 암시적 형 변환이 자동으로 수행됩니다. 이는 때로는 원하지 않는 결과를 초래할 수 있습니다. 예를 들어, 문자열과 숫자를 더할 경우 자동으로 문자열로 형변환이 이루어진다는 점에 주의해야 합니다.

let num = 10;
let str = '20';
let result = num + str;
console.log(result);  // 1020

위의 예시에서는 숫자 10과 문자열 ‘20’이 더해져서 ‘1020’이라는 결과가 출력됩니다. 이러한 형 변환이 예상치 못한 결과를 초래할 수 있으므로, 개발자는 명시적인 형 변환을 통해 이를 방지해야 합니다.

2. 명시적 형 변환

자바스크립트에서는 명시적으로 형 변환을 수행할 수 있는 다양한 방법이 있습니다.

2.1. Number() 함수

Number() 함수를 사용하여 문자열을 숫자로 변환할 수 있습니다.

let str = '100';
let num = Number(str);
console.log(num);  // 100

2.2. parseInt() 함수

parseInt() 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이때 함수의 두 번째 인자로 진법을 지정할 수도 있습니다.

let str = '10';
let num = parseInt(str);
console.log(num);  // 10

2.3. String() 함수

String() 함수를 사용하여 값을 문자열로 변환할 수 있습니다.

let num = 100;
let str = String(num);
console.log(str);  // '100'

2.4. toString() 메서드

값의 toString() 메서드를 호출하여 값을 문자열로 변환할 수도 있습니다.

let num = 100;
let str = num.toString();
console.log(str);  // '100'

3. 설계 패턴: 타입 체크 및 형 변환

암시적 형 변환을 피하기 위해 설계 패턴으로서 타입 체크와 형 변환을 직접 수행하는 방법을 사용할 수 있습니다. 이를 통해 명시적인 형 변환을 수행하고 코드의 가독성과 예측성을 높일 수 있습니다.

아래는 문자열을 정수로 변환하는 함수 예시입니다.

function parseToInt(str) {
  let num = parseInt(str);
  if (isNaN(num)) {
    throw new Error('정수로 변환할 수 없는 문자열입니다.');
  }
  return num;
}

// 사용 예시
let str = '10';
let num = parseToInt(str);
console.log(num);  // 10

이처럼 타입 체크와 형 변환을 분리하여 코드를 작성하면, 형 변환에 의한 예기치 않은 동작을 방지하고 코드의 가독성과 안정성을 향상시킬 수 있습니다.

결론

자바스크립트에서의 형 변환 문제는 명시적 형 변환을 통해 방지할 수 있습니다. 암시적 형 변환에 주의하고, 타입 체크와 형 변환을 분리하여 코드를 작성함으로써 예기치 못한 결과를 방지할 수 있습니다.

#tech #javascript