집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript의 유형 강제 설명

JavaScript의 유형 강제 설명

Linda Hamilton원래의: 2024-11-20 01:32:03225검색

JavaScript에서 변수는 특정 유형 선언이 필요하지 않으며 모든 데이터 유형의 값을 보유할 수 있습니다. 느슨한 유형의 언어인 JavaScript는 코드가 원활하게 실행되도록 자동으로 한 유형에서 다른 유형으로 값을 변환합니다. 이러한 동작으로 인해 JavaScript가 더욱 유연해지지만, 작동 방식에 익숙하지 않은 경우 예상치 못한 결과가 발생하거나 찾기 어려운 버그가 발생할 수도 있습니다.

이 게시물에서는 JavaScript의 유형 강제에 대해 알아보고, 코드를 보다 효과적으로 이해하고 제어하는 데 도움이 되는 다양한 유형의 강제, 예제 및 모범 사례를 다룹니다.

바로 뛰어들어볼까요!?

유형 강제란 무엇입니까?

유형 강제 변환은 한 데이터 유형에서 다른 데이터 유형으로 값을 자동 또는 수동으로 변환하는 것을 의미합니다.

예를 들어 '123'과 같은 문자열을 숫자 123으로 변환합니다.

JavaScript에서 유형 강제는 두 가지 유형이 될 수 있습니다.

암시적 강제: JavaScript가 자동으로 값을 변환하는 경우.
명시적 강제: 내장 함수나 연산자를 사용하여 의도적으로 값을 변환하는 경우.

강제에는 항상 두 유형 간의 변환이 포함되므로 다양한 유형의 강제에 대해 알아보기 전에 JavaScript의 기본 데이터 유형을 이해하는 것이 중요합니다.

JavaScript의 데이터 유형

기본 유형:
- 숫자(예: 42, 3.14, NaN)
- 문자열(예: "hello", '123')
- 부울(예: true, false)
- 정의되지 않음
- 무효
- 기호
- BigInt(예: 123n)
객체:
- 배열, 함수, 객체 등

데이터 유형에 대해 자세히 알아보세요.

이제 유형 강제의 종류를 살펴보겠습니다.

암시적 유형 강제

암시적 유형 강제 변환은 JavaScript가 연산이나 표현식의 요구 사항에 맞게 값의 유형을 다른 유형으로 자동 변환할 때 발생합니다. 이 프로세스를 유형 변환이라고도 합니다.

암시적 유형 강제 변환의 예

예제 1: 연산자를 사용한 문자열 강제

JavaScript에서 연산자를 사용하고 값 중 하나가 문자열인 경우 JavaScript는 자동으로 다른 값을 문자열로 변환하여 결합합니다. 이 프로세스를 문자열 강제라고 합니다.

console.log(3 + "7"); 
// Output: "37" (3 is coerced to "3")

예 2: 산술 연산자를 사용한 숫자 강제

-, *, / 또는 %와 같은 산술 연산자를 사용하면 숫자와 함께 작동합니다. 숫자가 아닌 다른 것을 제공하면(예: 문자열) JavaScript는 작업을 수행하기 전에 자동으로 이를 숫자로 변환합니다. 이를 수치강제라고 합니다.

console.log("7" - 3); 
// Output: 4 (string "7" coerced to number 7)

console.log(true * 3);
// Output: 3 (true coerced to 1)

예 3: 조건부 강제

JavaScript에서는 값이 조건(예: if 또는 while 문)에 사용되면 자동으로 부울(true 또는 false)로 변환됩니다.

진실한 값: 0, NaN, null, 정의되지 않음, false 또는 빈 문자열("")이 아닌 모든 값은 true로 간주됩니다.
거짓 값: 0, NaN, null, 정의되지 않음, false 및 빈 문자열("")은 false로 간주됩니다.

console.log(3 + "7"); 
// Output: "37" (3 is coerced to "3")

예 4: 느슨한 평등(==)과 강제

느슨한 항등 연산자(==)는 두 값이 다른 경우 동일한 유형으로 변환하여 비교합니다. 즉, 값을 비교하기 전에 하나 또는 둘 다를 변경하여 값을 일치시키려고 합니다.

console.log("7" - 3); 
// Output: 4 (string "7" coerced to number 7)

console.log(true * 3);
// Output: 3 (true coerced to 1)

명시적 유형 강제

내장 함수나 연산자를 사용하여 값을 한 유형에서 다른 유형으로 의도적으로 변환할 때 명시적 유형 강제가 발생합니다.

명시적 강제를 위한 일반적인 방법

문자열로 변환

문자열() 사용:

if ("Hello") { 
  console.log("This is truthy!"); // This will run because "Hello" is truthy 
}

if (27) { 
  console.log("This is also truthy!"); // This will run because 27 is truthy 
}

if (0) { 
  console.log("This won't run"); // This will not run because 0 is falsy 
}

if (null) { 
  console.log("This won't run either"); // This will not run because null is falsy 
}

if (!0) { 
  console.log("This will run"); // This will run because !0 is true (0 coerced to false, then negated) 
}

.toString() 사용:

console.log(5 == "5"); 
// Output: true (string "5" coerced to number 5)

console.log(null == undefined); 
// Output: true (both are considered "empty")

빈 문자열과 연결:

  console.log(String(37)); 
  // Output: "37"

숫자로 변환

숫자() 사용:

  console.log((37).toString()); 
  // Output: "37"

단항 사용: 값을 숫자로 변환하는 데 사용됩니다.

  console.log(37 + ""); 
  // Output: "37"

단항 사용 -: 값을 숫자로 변환하고 이를 부정하는 데 사용됩니다.

  console.log(Number("37")); 
  // Output: 37

parseInt() 또는 parseFloat() 사용:

  // If the value is a string that can be converted to a number, it returns the number representation.
  console.log(+"37"); 
  // Output: 37

  // If the value is a boolean, true becomes 1 and false becomes 0.
  console.log(+true);   // Output: 1 (true becomes 1)
  console.log(+false);  // Output: 0 (false becomes 0)

  // If the value cannot be converted to a valid number, it returns NaN (Not-a-Number).
  console.log(+undefined);  // Output: NaN (undefined cannot be converted)
  console.log(+null);       // output: 0 (null is converted to 0)
  console.log(+{});         // Output: NaN (object cannot be converted)

부울로 변환

부울() 사용:

  // If the value is a number, it simply negates the number.
  console.log(-3);  // Output: -3 (negates the number)

  // If the value is a string that can be converted to a number, it first converts it and then negates it.
  console.log(-"37"); // Output: -37 (string "37" is converted to number and negated)

  // If the value is a boolean, true becomes -1 and false becomes -0.
  console.log(-true);   // Output: -1
  console.log(-false);  // Output: -0 

  // If the value cannot be converted to a valid number, it returns NaN (Not-a-Number).
  console.log(-undefined);  // Output: NaN (undefined cannot be converted)
  console.log(-null);       // Output: -0 (null is converted to 0 and negated to -0)
  console.log(-{});         // Output: NaN (object cannot be converted)

이중 부정(!!) 사용: 이중 부정은 모든 값을 부울로 변환하는 빠른 방법입니다. 먼저 값을 부정(단일 !연산자 사용)하여 값을 부울(true 또는 false)로 변환한 다음 다시 부정하여 원래 부울 값을 얻는 방식으로 작동합니다.

  // parseInt(): Converts a string to an integer.
  console.log(parseInt("123.45")); 
  // Output: 123

  // parseFloat(): Converts a string to a floating-point number.
  console.log(parseFloat("123.45")); 
  // Output: 123.45

암묵적인 강제가 문제를 일으킬 수 있는 이유는 무엇입니까?

암시적 유형 강제는 특히 초보자나 이전 코드를 검토할 때 코드를 혼란스럽게 만들 수 있습니다. 강제는 자동으로 발생하기 때문에 원래 의도가 무엇인지 파악하기 어려울 수 있습니다.

몇 가지 예를 통해 이를 이해해 보겠습니다.

예상치 못한 결과:

암시적 강제는 특히 다양한 데이터 유형으로 작업할 때 예상치 못한 결과를 초래할 수 있습니다. 이로 인해 특정 표현이 어떻게 작동할지 예측하기가 어렵습니다.

예:

  console.log(Boolean(0)); 
  // Output: false

  console.log(Boolean(1)); 
  // Output: true

  console.log(Boolean(""));  
  // Output: false (empty string is falsy)

위의 예에서 첫 번째 표현식은 연산자 때문에 문자열 연결을 수행하지만, 두 번째 표현식은 -가 숫자로 강제 변환을 유발하기 때문에 숫자 뺄셈을 수행합니다.

데이터 유형 혼합:

작업에 데이터 유형을 혼합하면 예상치 못한 결과나 버그가 발생할 수 있습니다. 특히 한 유형을 기대했지만 다른 유형이 나올 경우에는 더욱 그렇습니다.

예:

console.log(3 + "7"); 
// Output: "37" (3 is coerced to "3")

어려운 디버깅:

예기치 않은 변환이 발생한 위치를 찾는 것이 까다로울 수 있으므로 버그 디버깅이 더 어려워집니다.

예:

console.log("7" - 3); 
// Output: 4 (string "7" coerced to number 7)

console.log(true * 3);
// Output: 3 (true coerced to 1)

거짓 값 및 유형 비교:

JavaScript에는 0, "", null, 정의되지 않음, NaN, false와 같은 여러 가지 거짓 값이 있습니다. 이러한 값이 비교 또는 논리 연산에 사용될 때 암시적 유형 변환으로 인해 혼란이 발생할 수 있습니다. JavaScript가 이러한 값을 해석하는 방법을 이해하지 못하면 예상치 못한 오류가 발생할 수 있습니다.

예:

if ("Hello") { 
  console.log("This is truthy!"); // This will run because "Hello" is truthy 
}

if (27) { 
  console.log("This is also truthy!"); // This will run because 27 is truthy 
}

if (0) { 
  console.log("This won't run"); // This will not run because 0 is falsy 
}

if (null) { 
  console.log("This won't run either"); // This will not run because null is falsy 
}

if (!0) { 
  console.log("This will run"); // This will run because !0 is true (0 coerced to false, then negated) 
}

유형 강제 문제를 피하는 방법은 무엇입니까?

암시적 유형 강제로 인해 발생하는 문제를 방지하는 데 도움이 되는 몇 가지 모범 사례는 다음과 같습니다.

엄격한 평등 사용(===):

비교 중에 예상치 못한 유형 강제 변환을 방지하려면 ==보다 ===를 선호하세요.

console.log(5 == "5"); 
// Output: true (string "5" coerced to number 5)

console.log(null == undefined); 
// Output: true (both are considered "empty")

유형을 변환할 때는 명시적으로 작성하세요.

명시적인 유형 변환 방법을 사용하여 원하는 유형 변경을 명확하게 지정하세요.

  console.log(String(37)); 
  // Output: "37"

작업 시 유형을 혼합하지 마십시오.

피연산자가 동일한 유형인지 확인하여 암시적 강제 변환에 의존하지 않는 코드를 작성하세요.

  console.log((37).toString()); 
  // Output: "37"

입력 검증:

API에서 사용자 입력이나 데이터를 받으면 이를 확인하고 숫자나 문자열 등 올바른 유형으로 변환해야 합니다.

  console.log(37 + ""); 
  // Output: "37"

배열과 객체의 동작을 알아보세요:

배열과 객체는 문자열로 강제 변환될 때 다르게 동작합니다.

배열: 문자열로 강제 변환하면 JavaScript는 배열을 해당 요소가 쉼표로 결합된 문자열로 변환합니다. 예를 들어:

  console.log(Number("37")); 
  // Output: 37

객체: 기본적으로 객체가 문자열로 강제 변환되면 객체에 사용자 정의 toString() 메서드가 없으면 "[object Object]"가 반환됩니다. 예를 들어:

  // If the value is a string that can be converted to a number, it returns the number representation.
  console.log(+"37"); 
  // Output: 37

  // If the value is a boolean, true becomes 1 and false becomes 0.
  console.log(+true);   // Output: 1 (true becomes 1)
  console.log(+false);  // Output: 0 (false becomes 0)

  // If the value cannot be converted to a valid number, it returns NaN (Not-a-Number).
  console.log(+undefined);  // Output: NaN (undefined cannot be converted)
  console.log(+null);       // output: 0 (null is converted to 0)
  console.log(+{});         // Output: NaN (object cannot be converted)

결론

JavaScript의 암시적 강제는 도움이 될 수 있지만 예상치 못한 동작으로 이어져 버그를 일으키고 코드를 유지 관리하기 어렵게 만들 수도 있습니다. 이러한 문제를 방지하려면 엄격한 동등성을 사용하고 유형을 명시적으로 변환하고 입력의 유효성을 검사하십시오. 이렇게 하면 더 깔끔하고 안정적이며 유지 관리하기 쉬운 JavaScript 코드를 작성할 수 있습니다.

오늘은 여기까지입니다.

도움이 되었기를 바랍니다.

읽어주셔서 감사합니다.

이와 같은 더 많은 콘텐츠를 보려면 여기를 클릭하세요.

X(Twitter)에서 저를 팔로우하시면 일상적인 웹 개발 팁을 보실 수 있습니다.

브라우저 콘솔을 열지 않고도 사이트에서 발생하는 오류, 경고, 로그를 확인할 수 있는 브라우저 확장 프로그램인 toast.log를 확인해 보세요. toast.log에서 25% 할인을 받으려면 여기를 클릭하세요.

계속 코딩하세요!!

Type Coercion in JavaScript Explained

위 내용은 JavaScript의 유형 강제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript String Boolean Array Object NULL if for while require double using operator console number undefined symbol default this input

성명：

이전 기사：지연 로딩의 기술: JavaScript 애플리케이션 속도 향상다음 기사：지연 로딩의 기술: JavaScript 애플리케이션 속도 향상