JavaScript에서는 `undefined`, `null`, `NaN` 세 가지 요소가 있습니다

이들은 각각 다른 의미를 가지고 있으며, 주로 값이 없거나 잘못된 상태를 나타냅니다

이제 각각의 차이점과 특징에 대해 알아보겠습니다

undefined

`undefined`는 변수가 선언되었지만 값이 할당되지 않은 경우를 나타냅니다

즉, 변수가 존재하지만 어떤 값도 가지고 있지 않습니다

var x;
console.log(x); // undefined

 

  • 변수의 초기값으로 자동 할당됩니다
  • 변수가 할당되지 않았거나, 객체 속성이 존재하지 않을 때 반환됩니다
  • `typeof undefined`의 결과는 `"undefined"`입니다

null

`null`은 명시적으로 "값이 없음"을 나타냅니다

따라서 `null`은 변수에 의도적으로 값이 없음을 할당하는 데 사용됩니다

var y = null;
console.log(y); // null

null == undefined // true
null === undefined // false

 

  • `null`은 자바스크립트의 객체로 간주되며, `typeof null`의 결과는 `"object"`입니다
  • 객체 속성의 초기값으로 사용할 수 있습니다
  • `null`은 `undefined`와 다릅니다

NaN

`NaN`은 "Not a Number"의 약어로, 숫자가 아닌 값을 나타냅니다

주로 수학적인 연산이 실패했을 때 반환됩니다

console.log(10 / "hello"); // NaN

NaN == NaN // false

 

  • 숫자와 문자열을 나누는 연산에서 발생할 수 있습니다
  • `typeof NaN`의 결과는 `"number"`입니다
  • `NaN`은 자신과의 동등 비교가 항상 `flase`입니다

'-- Language -- > JavaScript' 카테고리의 다른 글

[JavaScript] use strict 란?  (0) 2024.03.25
[JavaScript] 백틱(``)이란?  (0) 2024.03.22
[JavaScript] '=='와 '==='의 차이점  (1) 2024.01.03

use strict란?

JavaScript는 유연한 언어이지만, 때로는 코드의 실수나 잠재적인 오류를 찾아내기 어렵습니다

이러한 문제를 해결하기 위해 ECMAScript 5에서 "use strict"를 도입했습니다

이는 JavaScript 엔진에게 엄격한 모드로 실행하도록 지시합니다

use strict 사용 예제

"use strict"를 사용하려면 스크립트나 함수의 최상위에 선언해야 합니다

아래는 기본적인 사용법입니다

"use strict";

// 엄격 모드에서 실행될 코드
function myFunction() {
    "use strict";

    // 엄격 모드에서 실행될 코드
}

 

함수 내부에서 엄격 모드를 적용하려면 위와 같이 함수의 첫 줄에 선언합니다

use strict 사용 시 주요 변경 사항

  • 변수 선언 시 var, let, const 키워드를 사용하지 않으면 오류가 발생합니다
  • 변수가 선언되지 않은 상태에서 사용하면 오류가 발생합니다
  • 객체의 속성을 삭제할 때에도 오류가 발생합니다
  • 함수의 매개변수 이름이 중복되면 오류가 발생합니다
  • eval() 함수의 사용이 제한됩니다
  • 전역 객체의 this 값이 undefined가 됩니다
  • "with" 문의 사용이 금지됩니다

결론

use strict는 JavaScript 코드를 더 엄격한 모드로 실행하여 코드 품질을 향상시키고 오류를 방지합니다

이는 개발자가 더욱 안정적이고 효율적인 코드를 작성할 수 있도록 도와줍니다

백틱은 템플릿 리터럴(template literal)이라고도 불리며, 문자열을 표현하는 새로운 방법을 제공합니다

백틱을 사용하면 문자열을 작성하는 동안 보간(interpolation)이나 여러 줄에 걸친 문자열을 쉽게 처리할 수 있습니다

 

표현식 삽입(Expression Interpolation)

백틱을 사용하여 `${}` 안에 변수나 표현식을 삽입하여 동적인 문자열을 생성할 수 있습니다

var name = 'John';
var greeting = `Hello, ${name}!`;

console.log(greeting); // 출력: Hello, John!

 

위 예제에서 `${name}`은 변수 `name`의 값을 삽입하여 출력됩니다

 

여러 줄 문자열(Multi-line Strings)

백틱을 사용하면 여러 줄에 걸친 문자열을 쉽게 작성할 수 있습니다

var multiLineString = `
    This is a
    multi-line
    string.
`;

console.log(multiLineString);

 

특수문자 처리

백틱을 사용하면 이스케이프 문자(\)를 사용하지 않고도 특수 문자를 삽입할 수 있습니다

var specialChars = `Backtick: \`, Single quote: ', Double quote: "`;

console.log(specialChars);

 

위 예제에서는 백틱 내에서 특수 문자를 사용하고 있습니다

'==' (동등 연산자)

'=='는 동등 연산자로서 두 값이 동등한지 여부를 판단합니다

그러나 이 연산자는 형 변환을 수행하여 비교하므로 데이터 형식이 다를 경우 자동으로 형 변환이 이루어집니다

 

1 == '1'; // true

 

위의 예제에서는 '1'이라는 문자열과 1이라는 숫자가 서로 다른 데이터 형식이지만 '==' 연산자는 자동으로 형 변환을 수행하여 true를 반환합니다

 

'===' (일치 연산자)

'==='는 일치 연산자로서 값과 데이터 형식이 완전히 일치하는지를 판단합니다

이 연산자는 형 변환을 수행하지 않으므로 데이터 형식이 일치해야만 true를 반환합니다

 

1 === '1'; // false

 

위의 예제에서는 '===' 연산자는 데이터 형식이 다르기 때문에 false를 반환합니다

 

언제 어떤 연산자를 사용해야 하는가?

일반적으로 '==='를 사용하는 것이 권장됩니다

왜냐하면 '==='는 형 변환을 수행하지 않기 때문에 예상치 못한 결과를 방지할 수 있습니다

특히 데이터 형식이 중요한 경우에는 '==='를 사용하여 명시적인 일치를 확인하는 것이 좋습니다

 

그러나 '=='는 특정 상황에서 유용할 수 있습니다

예를 들어, null 또는 undefined 값을 확인할 때 '=='를 사용하면 형 변환이 수행되어 두 값이 동등한지를 판단할 수 있습니다

 

null == undefined; // true;
null === undefined; // false;

+ Recent posts