자바 스크립트에서 정의되지 않은 것을 처리하기위한 7 가지 팁

Ruby, Python 또는 Java와 같은 대부분의 최신 언어는 단일 null 값 (nil 또는 null), 합리적인 접근 방식으로 보입니다.

하지만 JavaScript는 다릅니다.

null뿐만 아니라 undefined도 JavaScript 빈 값으로 나타냅니다. 그렇다면 그들 사이의 정확한 차이점은 무엇입니까?

짧은 대답은 JavaScript 인터프리터가 아직 초기화되지 않은 변수 또는 개체 속성에 액세스 할 때 undefined를 반환한다는 것입니다. 예 :

반면에 null는 누락 된 개체를 나타냅니다. 참고. 자바 스크립트는 null를 사용하여 변수 또는 개체 속성을 초기화하지 않습니다.

String.prototype.match()와 같은 일부 네이티브 메서드는 null를 반환하여 누락 된 개체를 나타낼 수 있습니다. 샘플을 살펴보세요.

자바 스크립트는 허용되기 때문에 개발자는 초기화되지 않은 값에 액세스하려는 유혹을받습니다. 나도 그렇게 나쁜 습관을 가지고 있습니다.

이러한 위험한 작업은 종종 undefined 관련 오류를 생성합니다.

• TypeError: "undefined" is not a function
• TypeError: Cannot read property "<prop-name>" of undefined
• 및 유사 유형 오류.

자바 스크립트 개발자는이 농담의 아이러니를 이해할 수 있습니다. :

이러한 오류를 줄이려면 undefined가 생성됩니다. undefined와 코드 안전성에 미치는 영향을 살펴 보겠습니다.

1. 정의되지 않은 것

JavaScript에는 6 개의 기본 유형이 있습니다.

그리고 분리 된 객체 유형 : {name: "Dmitri"} , .

6 개의 기본 유형에서 undefined는 고유 한 유형이 정의되지 않은 특수 값입니다. ECMAScript 사양에 따르면 :

변수에 값이 할당되지 않은 경우 정의되지 않은 값 프리미티브 값이 사용됩니다.

이 표준은 초기화되지 않은 변수, 존재하지 않는 개체 속성에 액세스 할 때 undefined를받을 것이라고 명확하게 정의합니다. 존재하지 않는 배열 요소 등.

몇 가지 예 :

위의 예는 다음에 대한 액세스를 보여줍니다.

• 초기화되지 않은 변수 number
• 존재하지 않는 개체 속성 movie.year
• 또는 존재하지 않는 배열 요소 movies

는 undefined로 평가됩니다.

ECMAScript 사양은 undefined 값의 유형을 정의합니다.

정의되지 않은 유형은 유일한 값이 undefined 값인 유형입니다.

이 의미에서 typeof 연산자는 undefined 값에 대해 "undefined" 문자열을 반환합니다.

물론 typeof는 변수에 undefined 값이 포함되어 있는지 확인하는 데 효과적입니다.

2. 정의되지 않은 생성 시나리오

2.1 초기화되지 않은 변수

선언되었지만 아직 값 (초기화되지 않음)이 할당되지 않은 변수는 기본적으로 undefined입니다.

일반적이고 단순함 :

myVariable가 선언되었지만 아직 값이 할당되지 않았습니다. 변수에 액세스하면 undefined로 평가됩니다.

초기화되지 않은 변수의 문제를 해결하기위한 효율적인 접근 방식은 가능할 때마다 초기 값을 할당하는 것입니다. 초기화되지 않은 상태의 변수가 적을수록 좋습니다.

이상적으로는 const myVariable = "Initial value" 선언 직후에 값을 할당합니다. 하지만 항상 가능한 것은 아닙니다.

팁 1 : const를 선호하고 그렇지 않으면 let를 사용하지만

제 생각에 ECMAScript 2015의 가장 좋은 기능 중 하나는 const 및 . 큰 진전입니다.

const 및 let는 블록 범위입니다 (var) 선언 줄까지 일시적인 데드 존에 존재합니다.

값이 변경되지 않을 때 const 변수를 권장합니다. 변경 불가능한 바인딩을 생성합니다.

const의 멋진 기능 중 하나는 변수 const myVariable = "initial"에 초기 값을 할당해야한다는 것입니다. 변수는 초기화되지 않은 상태에 노출되지 않으며 undefined에 액세스 할 수 없습니다.

단어가 회문인지 확인하는 기능을 확인해 보겠습니다.

length 및 half 변수에는 값이 한 번 할당됩니다. 이러한 변수는 변경되지 않으므로 const로 선언하는 것이 합리적입니다.

값이 변경 될 수있는 변수에는 let 선언을 사용하십시오. 가능하면 즉시 초기 값을 지정하십시오. let index = 0.

오래된 학교 var는 어떻습니까? 내 제안은 사용을 중지하는 것입니다.

var 선언 문제는 함수 범위 내에서 변수를 끌어 올리는 것입니다. 함수 범위의 끝에서 var 변수를 선언 할 수 있지만 여전히 선언 전에 액세스 할 수 있습니다. 그러면 undefined.

myVariable에 액세스 할 수 있으며 선언 줄 이전에도 undefined를 포함합니다. var myVariable = "Initial value".

반대로 const 또는 let 변수는 선언 줄 (변수) 전에 액세스 할 수 없습니다. 선언 전에 일시적인 데드 존에 있습니다. undefined에 액세스 할 기회가 적기 때문에 좋습니다.

위의 예는 let (대신 of var)는 일시적 데드 존의 변수에 액세스 할 수 없기 때문에 ReferenceError를 발생시킵니다.

불변 바인딩에 대해 const 사용을 장려하거나 그렇지 않으면 let를 사용하면 초기화되지 않은 변하기 쉬운.

팁 2 : 응집력 향상

통합력은 모듈의 요소 (네임 스페이스, 클래스, 메서드, 코드 블록)가 함께 속하는 정도를 나타냅니다. 응집력은 높거나 낮을 수 있습니다.

높은 응집력 모듈은 그러한 모듈의 요소가 단일 작업에만 집중하기 때문에 바람직합니다. 모듈을 다음과 같이 만듭니다.

• 집중되고 이해 가능 : 모듈의 기능을 더 쉽게 이해
• 유지 관리 및 리팩터링이 더 쉽습니다. 모듈의 변경은 더 적은 수의 모듈에 영향을줍니다.
• 재사용 가능 : 단일 작업에 집중하면 모듈을 더 쉽게 재사용 할 수 있습니다.
• 테스트 가능 : 단일 작업에 집중하는 모듈을 더 쉽게 테스트 할 수 있습니다.

느슨한 결합을 수반하는 높은 응집력은 잘 설계된 시스템의 특징입니다.

코드 블록은 작은 모듈로 간주 될 수 있습니다. 높은 응집성의 이점을 활용하려면 변수를 사용하는 코드 블록에 최대한 가깝게 유지하십시오.

예를 들어, 블록 범위의 논리를 형성하기 위해 변수가 단독으로 존재하는 경우 해당 블록 내에서만 변수를 선언하고 활성화합니다 (const 또는 let 선언). 이 변수를 외부 블록 범위에 노출하지 마십시오. 외부 블록은이 변수에 대해 신경 쓰지 않아야합니다.

불필요하게 연장 된 변수 수명의 한 가지 전형적인 예는 함수 내부 순환 :

index, item 및 length 변수는 함수 본문의 시작 부분에 선언됩니다. 그러나 그들은 끝 부분에서만 사용됩니다. 이 접근 방식의 문제점은 무엇입니까?

맨 위의 선언과 for 구문의 사용 사이에서 변수 index, item는 초기화되지 않고 undefined에 노출됩니다. 전체 기능 범위에서 비합리적으로 긴 수명주기를가집니다.

더 나은 접근 방식은 이러한 변수를 사용 장소에 최대한 가깝게 이동하는 것입니다.

index 및 item 변수는 for 문의 블록 범위에만 존재합니다. for 외부에서는 의미가 없습니다.
length 변수도 사용 소스에 가깝게 선언됩니다.

수정 된 버전이 초기 버전보다 나은 이유는 무엇입니까? 다음을 살펴 보겠습니다.

• 변수가 초기화되지 않은 상태에 노출되지 않으므로 undefined

에 액세스 할 위험이 없습니다. 가능한 한 사용 장소에 가까운 변수는 코드 가독성을 높입니다.

• 높은 응집력있는 코드 덩어리는 필요한 경우 리팩토링하고 별도의 함수로 추출하기가 더 쉽습니다.

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

존재하지 않는 개체 속성에 액세스 할 때 JavaScript는 undefined를 반환합니다.

예를 들어 설명해 보겠습니다.

favoriteMovie는 단일 속성 title이있는 개체입니다. 속성 접근 자 favoriteMovie.actors를 사용하여 존재하지 않는 속성 actors에 액세스하면 undefined로 평가됩니다.

존재하지 않는 속성에 액세스해도 오류가 발생하지 않습니다. 이 문제는 잘 알려진 오류 메시지 TypeError: Cannot read property <prop> of undefined 트랩 인 존재하지 않는 속성에서 데이터를 가져 오려고 할 때 나타납니다. .

TypeError throw를 설명하기 위해 이전 코드 스 니펫을 약간 수정 해 보겠습니다.

favoriteMovie에 actors 속성이 없으므로 favoriteMovie.actors undefined로 평가됩니다.

결과적으로 undefined 값의 첫 번째 항목에 favoriteMovie.actors 표현식을 사용하여 액세스하면 TypeError.

존재하지 않는 속성에 대한 액세스를 허용하는 JavaScript의 허용 적 특성은 비결 정성의 원인입니다. 속성이 설정되거나 설정되지 않을 수 있습니다. 이 문제를 우회하는 좋은 방법은 객체가 항상 보유하고있는 속성을 정의하도록 제한하는 것입니다.

안타깝게도 개체를 제어 할 수없는 경우가 많습니다. 이러한 개체는 다양한 시나리오에서 다른 속성 집합을 가질 수 있습니다. 따라서 이러한 모든 시나리오를 수동으로 처리해야합니다.

새 요소 배열의 시작 및 / 또는 끝에 추가하는 함수 append(array, toAppend)를 구현해 보겠습니다. toAppend 매개 변수는 속성이있는 개체를 허용합니다.

• first :
• last : 요소가 array 끝에 삽입되었습니다.

이 함수는 원래 배열을 변경하지 않고 새 배열 인스턴스를 반환합니다.

append()의 첫 번째 버전은 약간 순진하지만 다음과 같습니다.

toAppend 객체는 first 또는 last 속성을 생략 할 수 있습니다. 이러한 속성이 .

속성이 존재하지 않는 경우 속성 접근자는 undefined로 평가됩니다. first 또는 last 속성이 있는지 확인하려는 첫 번째 유혹은 undefined. 이것은 조건부 if(toAppend.first){} 및 if(toAppend.last){}…

그다지 빠르지 않습니다. 이 접근 방식에는 단점이 있습니다. undefined 및 false, null, 0, NaN 및 ""는 잘못된 값입니다.

append()의 현재 구현에서이 함수는 잘못된 요소 삽입을 허용하지 않습니다.

다음 팁은 속성의 존재를 올바르게 확인하는 방법을 설명합니다.

팁 3 : 속성의 존재를 확인

다행히도 자바 스크립트는 개체에 특정 속성이 있는지 확인하는 여러 방법 :

• obj.prop !== undefined : undefined 직접
• typeof obj.prop !== "undefined" : 속성 값 유형 확인
• obj.hasOwnProperty("prop") : 개체에 고유 속성이 있습니다.
• "prop" in obj : 개체에 고유 속성이 있는지 아니면 상속 속성이 있는지 확인합니다.

내 권장 사항은 in 연산자를 사용하세요. 짧고 달콤한 구문이 있습니다. in 연산자 존재는 실제 속성 값에 액세스하지 않고 개체에 특정 속성이 있는지 여부를 확인하려는 명확한 의도를 나타냅니다.

obj.hasOwnProperty("prop")도 좋은 솔루션입니다. in 연산자보다 약간 길며 개체의 자체 속성에서만 확인합니다.

in 연산자를 사용하여 append(array, toAppend) 기능을 개선하겠습니다.

"first" in toAppend (및 "last" in toAppend)는 해당 속성이 있는지 여부에 관계없이 true, false 그렇지 않으면.

in 연산자는 잘못된 요소 삽입 문제를 해결합니다. 0 및 false. 이제 의 시작과 끝에 이러한 요소를 추가하면 예상되는 결과 가 생성됩니다.

팁 4 : 개체 속성에 액세스하기위한 구조 해제

개체 속성에 액세스 할 때 속성이없는 경우 기본값을 설정해야하는 경우가 있습니다.

삼항 연산자와 함께 in를 사용할 수 있습니다.

확인할 속성 수가 증가하면 삼항 연산자 구문이 어려워집니다. 각 속성에 대해 기본값을 처리하기 위해 새 코드 줄을 만들어야하므로 비슷해 보이는 삼항 연산자의 추악한 벽이 늘어납니다.

보다 우아한 접근 방식을 사용하기 위해 객체 분해라는 훌륭한 ES2015 기능에 대해 알아 봅시다.

객체 분해를 통해 객체 속성 값을 변수로 직접 인라인 추출하고 속성이없는 경우 기본값을 설정할 수 있습니다. undefined를 직접 처리하지 않는 편리한 구문입니다.

사실 속성 추출은 이제 정확합니다.

동작을보기 위해 문자열을 따옴표로 묶는 유용한 함수를 정의 해 보겠습니다.

quote(subject, config)는 줄 바꿈 할 문자열로 첫 번째 인수를 허용합니다. 두 번째 인수 config는 속성이있는 개체입니다.

개체 구조화의 이점을 적용하여 quote() :

const { char = """, skipIfQuoted = true } = config 한 줄의 구조 해제 할당은 char 및 skipIfQuoted from config object.
config 개체에 일부 속성이 누락 된 경우 구조 해제 할당이 기본값을 설정합니다. : char의 경우 """ 및 skipIfQuoted의 경우 false div>.

다행히도이 기능은 여전히 개선의 여지가 있습니다.

해체 할당을 매개 변수 섹션으로 이동하겠습니다. 그리고 config 매개 변수에 대한 기본값 (빈 개체 { })을 설정하여 기본 설정으로 충분할 때 두 번째 인수를 건너 뜁니다.

해체 할당은 함수 서명의 config 매개 변수를 대체합니다. 좋아요 : quote()가 한 줄 더 짧아집니다.

= {} 구조 해제 할당의 오른쪽에있는 두 번째 인수가 전혀 지정되지 않은 경우 빈 개체가 사용되도록합니다. quote("Sunny day").

객체 분해는 객체에서 속성 추출을 효율적으로 처리하는 강력한 기능입니다. 액세스 된 속성이 존재하지 않을 때 반환 될 기본값을 지정할 수있는 가능성이 마음에 듭니다. 결과적으로 undefined와 그 주변의 번거 로움을 피할 수 있습니다.

팁 5 : 기본 속성으로 개체 채우기

구조 해제 할당처럼 모든 속성에 대한 변수를 만들 필요가없는 경우 일부 속성을 놓친 개체를 채울 수 있습니다. 기본값으로.

ES2015 Object.assign(target, source1, source2, ...)는 하나 이상의 소스 개체에서 모든 열거 가능한 고유 속성의 값을 대상 개체로 복사합니다. 이 함수는 대상 개체를 반환합니다.

예를 들어 항상 전체 속성 집합을 포함하지 않는 unsafeOptions 개체의 속성에 액세스해야합니다.

unsafeOptions에서 존재하지 않는 속성에 액세스 할 때 undefined를 방지하려면 다음과 같이 몇 가지를 조정 해 보겠습니다.

• 기본 속성 값을 보유하는 개체 defaults 정의
• Object.assign({ }, defaults, unsafeOptions)를 호출하여 빌드 새 개체 options. 새 개체는 unsafeOptions에서 모든 속성을 수신하지만 누락 된 속성은 defaults에서 가져옵니다.

unsafeOptions에는 fontSize 속성 만 포함됩니다. defaults 개체는 fontSize 및 color 속성의 기본값을 정의합니다.

Object.assign()는 첫 번째 인수를 대상 개체 {}로 사용합니다. 대상 개체는 unsafeOptions 소스 개체에서 fontSize 속성 값을받습니다. 그리고 defaults 소스 개체의 color 속성 값은 unsafeOptions에 color.

소스 개체가 열거되는 순서는 중요합니다. 나중에 소스 개체 속성이 이전 속성을 덮어 씁니다.

이제 options.color에서 사용할 수 없었던 options 개체의 모든 속성에 안전하게 액세스 할 수 있습니다. div id = “5cc93a0102”> .

다행히도 개체를 기본 속성으로 채우는 더 쉬운 대안이 있습니다.개체 이니셜 라이저에서 스프레드 속성을 사용하는 것이 좋습니다.

Object.assign() 호출 대신 개체 확산 구문을 사용하여 소스 개체에서 모든 고유하고 열거 가능한 속성을 대상 개체에 복사합니다.

개체 이니셜 라이저는 defaults 및 unsafeOptions 소스 개체의 속성을 확산합니다. 소스 객체가 지정되는 순서는 중요합니다. 나중에 소스 객체 속성이 이전 속성을 덮어 씁니다.

불완전한 개체를 기본 속성 값으로 채우는 것은 코드를 안전하고 내구성있게 만드는 효율적인 전략입니다. 상황에 관계없이 개체는 항상 전체 속성 집합을 포함하며 undefined를 생성 할 수 없습니다.

보너스 팁 : nullish 병합

연산자 nullish 병합은 피연산자가 undefined 또는 :

널리시 병합 연산자는 다음과 같은 경우 기본값을 가지면서 객체 속성에 액세스하는 데 편리합니다. 이 속성은 undefined 또는 null :