CodeGym /행동 /Frontend SELF KO /JavaScript에서의 형 변환

JavaScript에서의 형 변환

Frontend SELF KO
레벨 35 , 레슨 0
사용 가능

1.1 명시적 형 변환

JavaScript에서의 형 변환은 한 데이터 타입의 값을 다른 데이터 타입으로 변환하는 과정이야. 크게 두 가지 형 변환이 있어: 명시적(수동) 변환과 암시적(자동) 변환. 이 과정을 이해하는 것은 오류를 방지하고 예측 가능한 코드를 작성하는 데 중요해.

명시적 변환은 수동 변환이라고도 알려져 있으며, JavaScript의 내장 함수와 메서드를 사용하여 수행돼. 프로그래머가 명확하게 어떤 데이터 타입이 다른 타입으로 변환되어야 하는지 명시하는 변환이야.

명시적 변환의 주요 메서드:

1. 문자열로 변환

  • 메서드 String(value): 값을 문자열로 변환해
JavaScript
    
      let num = 123;
      let str = String(num);
      console.log(typeof str); // "string"
    
  

  • value.toString(): 객체의 메서드로, 값을 문자열로 변환해
JavaScript
    
      let bool = true;
      let str = bool.toString();
      console.log(typeof str); // "string"
    
  

2. 숫자로 변환

  • Number(value): 값을 숫자로 변환해
JavaScript
    
      let str = "456";
      let num = Number(str);
      console.log(typeof num); // "number"
    
  

  • parseInt(value, base): 문자열을 정수로 변환해. base 매개변수는 진법을 지정해
JavaScript
    
      let str = "123";
      let num = parseInt(str, 10);
      console.log(typeof num); // "number"
    
  

  • parseFloat(value): 문자열을 부동 소수점 숫자로 변환해
JavaScript
    
      let str = "123.45";
      let num = parseFloat(str);
      console.log(typeof num); // "number"
    
  

3. 불리언 값으로 변환

  • Boolean(value): 값을 불리언으로 변환해
JavaScript
    
      let str = "";
      let bool = Boolean(str);
      console.log(typeof bool); // "boolean"
    
  

1.2 암시적 형 변환

암시적 변환, 자동 또는 숨겨진 변환이라고도 알려져 있으며, JavaScript가 다른 데이터 타입과의 연산을 수행할 때 자동으로 수행돼. 암시적 변환은 예기치 않은 결과를 초래할 수 있으므로 이해하고 신중히 사용해야 해.

1. 문자열로 변환

중요!

어떤 객체든 문자열과 결합할 때 JavaScript는 해당 객체를 문자열로 변환하려고 해.

예시:

JavaScript
    
      let result = "The number is " + 123;
      console.log(result); // "The number is 123"
    
  

2. 숫자로 변환

중요!

문자열에 수치가 포함된 경우, (+)를 제외한 다른 산술 연산자를 사용할 때.

JavaScript
    
      let result = "123" - 0;
      console.log(result); // 123 (숫자)
    
  

실제 상황에서 어떻게 동작하는지:

JavaScript
    
      let result = "123" - 10;
      console.log(result); // 113 (숫자)

      let result2 = "123" + 10;
      console.log(result2); // 12310 (문자열)
    
  

3. 불리언 값으로 변환

값이 논리적 문맥(조건문, 반복문 등)에서 사용될 때.

JavaScript
    
      let value = "hello";

      if (value) {
        console.log("Value is truthy");   // 출력: "Value is truthy"
      }
    
  

논리적 문맥에서의 변환 예시:

  • false, 0, "" (빈 문자열), null, undefined, 그리고 NaN은 거짓(false) 값으로 간주돼
  • 다른 모든 값은 참(true)으로 간주돼
JavaScript
    
      if ("") {
        console.log("This won't be logged.");
      } else {
        console.log('""는 불리언 문맥에서 false로 간주돼.');
      }

      // '""는 불리언 문맥에서 false로 간주돼.'
    
  

1.3 암시적 변환 예시

산술 연산과의 예시:

JavaScript
    
      let width = "100";
      let height = "200";

      let area = Number(width) * Number(height); // 명시적 변환
      console.log(area); // 20000

      let perimeter = (+width) + (+height); // 명시적 변환을 위해 단항 플러스 사용
      console.log(perimeter); // 300
    
  

논리적 문맥과의 예시:

JavaScript
    
      let userInput = ""; // 빈 문자열

      if (!userInput) {
        console.log("사용자가 데이터를 입력하지 않았어."); // 문자열을 불리언 값으로 암시적 변환
      }
    
  

혼합 데이터 타입의 예시:

JavaScript
    
      let value = "10";
      let increment = 5;

      let result = value + increment; // 숫자를 문자열로 암시적 변환
      console.log(result); // "105"

      result = Number(value) + increment; // 문자열을 숫자로 명시적 변환
      console.log(result); // 15
    
  
코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION