JavaScript 반환 정의되지 않음

JavaScript는 다른 프로그래밍 언어보다 라이브러리나 프레임워크가 적습니다. null 및 undefined는 JavaScript에서 빈 값을 나타냅니다.

정의되지 않음과 함께 발생하는 오류를 줄이기 위해서는 정의되지 않음이 반환되는 이유를 명확하게 이해해야 합니다. JavaScript에서 정의되지 않음에 대한 간략한 개요를 살펴보겠습니다.

JavaScript의 정의되지 않음

JavaScript의 6가지 프리미티브 유형 중 정의되지 않음은 값이 정의되지 않은 특수한 유형의 프리미티브입니다. 정의되지 않은 유형이 갖는 유일한 값은 정의되지 않은 것입니다.

‘정의되지 않음’은 쓰기 및 구성이 불가능한 속성인 전역 범위의 변수입니다. ECMA 사양에 따르면 변수에 값이 할당되지 않은 경우 정의되지 않은 값이 반환됩니다.

// uninitialized variable
let letters;
console.log(letters);

// non-existing array elements
let vowels = ['a', 'e'];
console.log(vowels[3]);

// non-existing object properties
let flower = {name: 'Rose'};
console.log(flower.color);

출력:

undefined
undefined
undefined

출력에 나타난 것처럼 초기화되지 않은 변수, 존재하지 않는 배열 요소 또는 개체 속성에 액세스할 때 정의되지 않음 값이 반환됩니다. 각 코드 청크를 개별적으로 실행한 후 세 개의 정의되지 않음 출력을 얻을 수 있습니다.

JavaScript가 정의되지 않음을 반환하는 상황과 정의되지 않음 반환을 해결하기 위한 몇 가지 모범 사례를 살펴보겠습니다.

정의되지 않음을 출력으로 반환하는 시나리오

초기화되지 않은 변수에 접근하기

값을 초기화하지 않고 변수를 선언하면 변수는 정의되지 않은 값을 반환합니다.

암호:

let letters;
console.log(letters);

출력:

undefined

코드 청크에서와 같이 선언된 변수 letters에 값이 할당되지 않습니다. 위의 출력에서 볼 수 있듯이 변수 호출과 함께 정의되지 않음을 반환하지만 변수에 값을 할당하면 아래 값을 반환합니다.

암호:

let letters = 5;
console.log(letters);

출력:

5

존재하지 않는 속성에 액세스

존재하지 않는 속성에 액세스하는 경우 오류를 발생시키는 대신 정의되지 않음이 반환됩니다. 아래 예시가 이를 잘 증명하고 있습니다.

암호:

let flower = {name: 'Rose'};
console.log(flower.color);

출력:

undefined

여기서 개체 속성 꽃에는 이름이라는 속성이 하나 있습니다. 그러나 액세스할 때 해당 개체의 존재하지 않는 속성인 색상 속성을 호출했습니다.

출력에 표시된 대로 정의되지 않음 값을 출력으로 반환합니다.

가장 좋은 방법은 액세스하기 전에 아래 구문을 사용하여 속성의 가용성을 확인할 수 있습니다. 그런 다음 출력으로 반환되는 정의되지 않음을 제거할 수 있습니다.

통사론:

'propertyName' in objectName

암호:

let flower = {name: 'Rose'};

if ('color' in flower) {
  console.log(flower.color);
}

함수 매개변수 호출

정의된 인수 수 대신 인수 수가 적은 함수를 호출하면 모든 인수를 전달하지 않기 때문에 정의되지 않음을 반환합니다. 따라서 동일한 수의 인수로 함수를 호출해야 합니다.

암호:

function multiply(a, b, c) {
  a;
  b;
  c;
  return a * b;
}
console.log(multiply(5, 3));

출력:

15

두 개의 인수를 사용하여 함수를 호출할 때 a 및 b, 5 및 3에 각각 값을 할당하여 해당 값을 할당한 후 출력으로 15를 반환합니다.

다음 코드는 a, b 및 c를 모두 곱하도록 return 문의 식을 변경한 후 동일한 두 값으로 동일한 함수를 호출합니다.

암호:

function multiply(a, b, c) {
  a;
  b;
  c;
  return a * b * c;
}
console.log(multiply(5, 3));

출력:

NaN

출력에 표시된 것처럼 계산 값 대신 NaN을 반환합니다. 나타나는 이유는 모든 인수를 전달하지 않고 c의 값이 정의되지 않음으로 유지되기 때문입니다.

함수의 return 문

출력이 정의되지 않음으로 반환되는 또 다른 인스턴스는 함수에 return 문이 없거나 근처에 표현식이 없는 return 문이 있는 경우입니다.

예를 들어 주어진 입력에 따라 제곱수를 생성하는 sq_num이라는 함수를 선언해 보겠습니다.

암호:

// doesn't have a return statement
function sq_num(x) {
  const result = x * x;
}
console.log(sq_num(2));

// return statement without an expression
function sq_num(x) {
  const result = x * x;
  return;
}
console.log(sq_num(2));

출력:

undefined
undefined

이 함수 sq_num을 예상대로 작동시키려면 return 문과 아래 코드에 언급된 표현식을 선언해야 합니다. 이를 통해 아래와 같은 함수의 계산 결과를 얻을 수 있습니다.

암호:

function sq_num(x) {
  const result = x * x;
  return result;
}
console.log(sq_num(2));

출력:

4

배열에서 범위를 벗어난 요소에 액세스

배열 내에서 정의되지 않은 요소에 액세스하면 범위를 벗어난 요소에 액세스하는 것으로 간주될 수 있습니다. 이러한 상황이 발생하면 정의되지 않음 값이 반환됩니다.

암호:

const animals = ['elephant', 'tiger', 'monkey'];
console.log(animals[5]);
console.log(animals[-1]);

출력:

undefined
undefined

같은 방식으로 희소 배열도 같은 문제를 나타냅니다. 희소 배열은 간격이 있고 인덱싱되지 않은 요소가 있는 배열입니다.

배열의 빈 슬롯에 액세스할 때 정의되지 않은 값도 반환합니다.

암호:

const SparseArray = ['elephant', , 'monkey'];
console.log(SparseArray);

출력:

["elephant", undefined, "monkey"]

여기서 SparseArray 배열은 두 번째 요소가 누락된 세 개의 요소로 생성됩니다. 아래와 같이 두 번째 요소에 액세스할 때 undefined를 반환합니다.

암호:

const SparseArray = ['elephant', , 'monkey'];
console.log(SparseArray[1]);

출력:

undefined

위의 시나리오와는 별도로 정의되지 않은 값이 void 연산자와 함께 반환됩니다. 다음은 평가 결과에도 불구하고 undefined를 반환하는 방법의 예입니다.

암호:

void 2;
console.log(void (true));

출력:

undefined

정의되지 않음과 널의 차이점

JavaScript에는 빈 값을 나타내는 null 및 undefined 값이 모두 있습니다.

변수에 명시적으로 할당된 값이 없는 경우 JavaScript는 변수에 정의되지 않은 기본 값을 할당합니다. 이름에서 알 수 있듯이 null은 다른 할당된 값이 의도적으로 없음을 나타내는 기본 값입니다.

typeof 연산자를 사용하면 아래와 같이 null과 undefined를 구분할 수 있습니다.

typeof undefined;
typeof null;

undefined
object

전체적으로 null은 누락된 개체를 나타내고 undefined는 초기화되지 않은 변수에 사용된 값입니다.

결론

이 문서에서는 초기화되지 않은 변수, 존재하지 않는 속성, 범위를 벗어난 인덱스 및 void 연산자와 함께 정의되지 않은 발생에 대해 설명합니다.

논의된 내용과 함께 예제와 함께 사용하는 동안 일부 모범 사례를 적용할 수 있습니다. 별도로, null과 정의된 값 및 해당 사용 인스턴스의 차이점을 살펴보았습니다.

모범 사례로서 초기화되지 않은 변수와 희소 배열의 사용을 줄임으로써 undefined 발생을 줄이는 책임을 져야 합니다.