> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 단점: 알아야 할 사항

JavaScript의 단점: 알아야 할 사항

PHPz
풀어 주다: 2024-08-01 09:10:51
원래의
932명이 탐색했습니다.

JavaScript Quirks: What You Need to Know

JavaScript는 강력하고 유연한 언어이지만 숙련된 개발자도 놀라게 할 수 있는 몇 가지 특징이 있습니다. 이러한 이상한 동작을 이해하면 더욱 강력하고 버그 없는 코드를 작성하는 데 도움이 될 수 있습니다. 이 기사에서는 JavaScript의 가장 주목할 만한 몇 가지 이상한 점을 살펴보겠습니다.

1. 유형 강제

JavaScript는 특정 상황에서 유형을 자동으로 변환하므로 예상치 못한 결과가 발생할 수 있습니다.

console.log(1 + '1'); // '11' - Number 1 is coerced to a string
console.log(1 - '1'); // 0 - String '1' is coerced to a number
console.log(true + true); // 2 - true is coerced to 1
console.log('' == 0); // true - Empty string is coerced to 0
console.log([] == 0); // true - Empty array is coerced to 0
로그인 후 복사

2. NaN은 NaN과 같지 않습니다.

NaN은 "Not-a-Number"를 의미하며 유효한 숫자가 아닌 값을 나타내는 데 사용됩니다. 흥미롭게도 NaN은 그 자체와 동일하지 않습니다.

console.log(NaN === NaN); // false
console.log(Number.isNaN(NaN)); // true - Correct way to check for NaN
로그인 후 복사

3. 연산자의 종류

typeof 연산자는 예상치 못한 결과를 반환할 수 있습니다.

console.log(typeof null); // 'object' - This is a long-standing bug in JavaScript
console.log(typeof []); // 'object' - Arrays are technically objects in JavaScript
console.log(typeof function(){}); // 'function' - Functions have their own type
로그인 후 복사

4. 어레이 추가

두 배열을 함께 추가하면 유형 강제로 인해 놀라운 결과가 나올 수 있습니다.

console.log([] + []); // '' - Both arrays are coerced to empty strings
console.log([] + {}); // '[object Object]' - Empty array is coerced to empty string, empty object is coerced to string '[object Object]'
console.log({} + []); // 0 - Here, {} is interpreted as an empty block
로그인 후 복사

5. 부동 소수점 연산

JavaScript는 부동 소수점 연산을 사용하므로 정밀도 문제가 발생할 수 있습니다.

console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false
로그인 후 복사

6. 이중 같음(==) 연산자

== 연산자는 비교 전에 유형 강제를 수행하므로 예상치 못한 결과가 발생할 수 있습니다. 일반적으로 엄격한 항등 연산자(===)를 사용하는 것이 더 좋습니다.

console.log('' == false); // true
console.log(0 == false); // true
console.log('' == 0); // true
console.log(null == undefined); // true
로그인 후 복사

7. var를 사용한 잘못된 범위 지정

var로 선언된 변수는 블록 범위가 아닌 함수 범위이므로 예기치 않은 동작이 발생할 수 있습니다.

if (true) {
  var x = 5;
}
console.log(x); // 5 - x is available outside the block

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 3 3 3 - Because var is function-scoped, the same i is referenced
로그인 후 복사

8. 전역 객체

브라우저에서는 비엄격 모드의 전역 창 개체를 나타냅니다. 이로 인해 놀라운 동작이 발생할 수 있습니다.

function foo() {
  console.log(this); // window (in browser)
}
foo();

const bar = {
  method: function() {
    console.log(this); // bar object
  }
};
bar.method();

const baz = bar.method;
baz(); // window (in browser)
로그인 후 복사

결론

JavaScript는 다재다능하고 강력한 언어이지만 그 특징과 특이한 점을 인식하는 것이 중요합니다. 이러한 이상한 동작을 이해함으로써 일반적인 함정을 피하고 보다 안정적인 코드를 작성할 수 있습니다. JavaScript를 계속 탐색하고 실험하여 언어의 이러한 측면과 기타 흥미로운 측면에 대한 이해를 심화시키세요.


Javascript의 또 다른 특징을 알고 있나요? 댓글로 적어주세요.

Javascript의 기본 메소드를 아시나요? 자세한 내용은 여기에서 내 기사를 확인하세요!

위 내용은 JavaScript의 단점: 알아야 할 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿