모든 개발자가 알아야 할 JavaScript의 이상한 부분 디코딩-JS 튜토리얼-php.cn

Decoding the Weird Parts of JavaScript Every Developer Should Know

우리가 좋아하는(또는 싫어하는) 언어인 JavaScript는 강력하면서도 당혹스러운 독특한 동작과 특징으로 가득 차 있습니다. 이러한 "이상한 부분"은 초보자에게 혼란을 줄 수 있지만, 능숙한 개발자가 되려면 이러한 부분을 마스터하는 것이 필수적입니다. 모든 개발자가 알아야 할 몇 가지 흥미로운 JavaScript 특징을 살펴보겠습니다.

1. 강제: 자바스크립트의 비밀 마술사

JavaScript는 유형 간 값을 변환하여 도움을 주려고 노력하지만 이러한 "유용성"은 놀라운 결과를 초래할 수 있습니다.

예: 예상치 못한 수학

console.log('5' - 3);  // 2
console.log('5' + 3);  // '53'

로그인 후 복사

뺄셈: JavaScript는 빼기 전에 '5'를 숫자로 변환합니다.
추가: 문자열이 포함되면 JavaScript는 추가하는 대신 연결합니다.

중요한 이유

이 암시적 변환(유형 강제)은 주의하지 않으면 버그를 유발할 수 있습니다.
놀라움을 피하려면 항상 Number(), String() 또는 Boolean()을 사용하여 명시적인 변환을 사용하세요.

2. 이것의 신비

자바스크립트에서 이 동작은 함수가 어떻게 호출되는지에 따라 달라지기 때문에 혼란스러울 때가 많습니다.

예: 다양한 상황

function showThis() {
  console.log(this);
}

showThis();  // Window or undefined in strict mode

const obj = { method: showThis };
obj.method();  // obj

const boundFunc = showThis.bind(obj);
boundFunc();  // obj

로그인 후 복사

중요한 이유

이는 선언 시 설정되지 않습니다. 통화 장소에 따라 다릅니다.
화살표 함수에는 자체 this가 없으므로 어휘 컨텍스트를 보존하는 데 적합합니다.

3. 이벤트 루프: 이해하기 쉬운 비동기 JavaScript

JavaScript는 단일 스레드이지만 이벤트 루프를 통해 비동기 작업을 처리할 수 있습니다.

예: 무엇이 먼저 실행됩니까?

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

console.log('End');

로그인 후 복사

출력

Start
End
Promise
Timeout

로그인 후 복사

동기 코드가 먼저 실행됩니다.
Promise(마이크로태스크)가 setTimeout(매크로태스크)보다 우선순위가 높습니다.

중요한 이유

이벤트 루프를 이해하는 것은 고성능 비동기 코드를 작성하는 데 핵심입니다.

4. 클로저: 기억하는 함수

클로저는 외부 함수가 반환된 후에도 함수가 어휘 범위를 "기억"하는 경우입니다.

예: 개인 변수

function counter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const increment = counter();
increment();  // 1
increment();  // 2

로그인 후 복사

중요한 이유

클로저를 사용하면 비공개 변수를 생성하고 함수 호출 전반에 걸쳐 상태를 유지할 수 있습니다.

5. 프로토타입: JavaScript의 백본

JavaScript는 프로토타입 기반 상속을 사용합니다. 즉, 객체는 다른 객체의 속성과 메서드를 상속받을 수 있습니다.

예: 사용자 정의 방법

console.log('5' - 3);  // 2
console.log('5' + 3);  // '53'

로그인 후 복사

중요한 이유

프로토타입을 사용하면 인스턴스 전체에서 효율적으로 메서드를 공유할 수 있습니다.

6. 동등성 검사: == 대 ===

JavaScript는 느슨한 동등(==)과 엄격한 동등(===)을 모두 제공하며 서로 다르게 동작합니다.

예: Null 및 정의되지 않음의 이상한 경우

function showThis() {
  console.log(this);
}

showThis();  // Window or undefined in strict mode

const obj = { method: showThis };
obj.method();  // obj

const boundFunc = showThis.bind(obj);
boundFunc();  // obj

로그인 후 복사

== 유형 변환을 수행하므로 null은 대략적으로 정의되지 않음과 동일합니다.
=== 유형과 값이 동일한지 확인합니다.

중요한 이유

명시적으로 유형 변환이 필요한 경우가 아니면 항상 ===를 사용하세요.
기본이 아닌 값을 직접 비교하지 마세요({} !== {}).

7. 불변성과 참조 유형

JavaScript는 객체와 배열을 참조 유형으로 처리합니다. 즉, 참조에 대한 변경 사항이 원본에 영향을 미칩니다.

예: 함정 복사

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

console.log('End');

로그인 후 복사

중요한 이유

얕은 복사본을 만들려면 Object.sign() 또는 스프레드 연산자({ ...original })를 사용하세요.
전체 복사의 경우 Lodash 또는 StructuredClone과 같은 라이브러리를 고려하세요.

8. NaN: 보기만큼 단순하지는 않다

NaN은 "Not a Number"를 의미하지만 그 동작은 전혀 간단하지 않습니다.

예: NaN 비교

Start
End
Promise
Timeout

로그인 후 복사

중요한 이유

NaN과 같은 특수한 경우에 엄격한 동등성이 필요할 때 Object.is를 사용하세요.

9. 호이스팅: 가장 먼저 선언되는 것은 무엇인가?

호이스팅은 변수 및 함수 선언을 해당 범위의 맨 위로 이동합니다.

예: 변수 호이스팅

function counter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const increment = counter();
increment();  // 1
increment();  // 2

로그인 후 복사

var 선언은 호이스팅되지만 정의되지 않은 상태로 초기화됩니다.
함수 선언이 완전히 끌어올려졌습니다.

중요한 이유

변수 호이스팅 혼동을 피하려면 let과 const를 사용하세요.

10. 이상한 기본값: 기본 매개변수

기본 매개변수는 함수를 더욱 유연하게 만들지만 정의되지 않은 매개변수와 결합하면 이상하게 동작할 수 있습니다.

예: 기본값 및 인수

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.greet();  // Hello, my name is Alice

로그인 후 복사