타입스크립트에서 null과 undefined의 차이는 무엇인가요?
_____Q1: `null`과 `undefined`란 무엇인가요?
- `undefined`: 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다. 예를 들어, `let x;`일 때 `x`는 `undefined`입니다.
- `null`: 명시적으로 "값이 없음"을 나타내기 위해 개발자가 할당하는 값입니다. 즉, 의도적으로 "값이 비어있음"을 표현할 때 사용합니다.
Q2: 자바스크립트와 타입스크립트에서 `null`과 `undefined`는 어떻게 다르게 취급되나요?
- 자바스크립트에서는 둘 다 "없음"을 의미하지만, 타입스크립트에서는 엄격하게 구분합니다.
- 타입스크립트의 엄격 모드(`--strictNullChecks`)가 활성화된 경우, `null`과 `undefined`는 각각 별도의 타입으로 취급되어, 명시적으로 처리해야 합니다.
Q3: 기본적으로 변수에 할당되는 값은 무엇인가요?
- 선언만 된 변수는 기본적으로 `undefined`입니다.
- `null`은 명시적으로 개발자가 할당해야 합니다.
```typescript
let a; // a는 undefined
let b = null; // b는 null
```
Q4: 타입스크립트에서 `null`과 `undefined`를 타입으로 사용할 수 있나요?
- 네, 가능합니다. 예를 들어 `string | null` 또는 `number | undefined`처럼 유니언 타입으로 포함해서 사용합니다.
```typescript
let name: string | null = null;
let age: number | undefined;
```
Q5: `null`과 `undefined`의 비교는 어떻게 되나요?
- 느슨한 동등 비교(`==`)에서는 `null == undefined`가 `true`입니다.
- 엄격한 동등 비교(`===`)에서는 `null === undefined`는 `false`입니다.
```typescript
null == undefined // true
```
Q6: 함수에서 반환값이 없을 때 기본적으로 어떤 값이 반환되나요?
- 함수가 명시적으로 값을 반환하지 않으면, 기본적으로 `undefined`가 반환됩니다.
- `null`을 반환하려면 명시적으로 `return null;` 해야 합니다.
Q7: 타입스크립트에서 `--strictNullChecks` 옵션이란 무엇인가요?
- 이 옵션이 활성화되면, `null`과 `undefined`는 명시적으로 타입에 포함되지 않으면 허용되지 않습니다.
- 즉, `string` 타입 변수에 `null`이나 `undefined` 할당이 불가하며, `string | null` 또는 `string | undefined`로 선언해야 합니다.
Q8: `null`과 `undefined` 중 어느 것을 사용하는 게 좋나요?
- 일반적으로 `undefined`는 "값이 할당되지 않음"을 나타내기 위해 사용하고,
- `null`은 "의도적으로 값이 없음"을 나타내기 위해 사용합니다.
- 그럼에도 불구하고 팀 컨벤션에 따라 다르게 사용할 수 있습니다.
Q9: `null`과 `undefined`를 타입으로 구분하지 않고 사용하려면 어떻게 해야 하나요?
- `any` 타입을 사용하거나, 유니언 타입에 둘 다 포함시킬 수 있습니다.
```typescript
let value: string | null | undefined;
```
Q10: 요약하면 `null`과 `undefined`의 핵심 차이점은 무엇인가요?
| 구분 | undefined | null |
|--------------|-------------------------------------|-----------------------------------|
| 값 | 정의되지 않은 상태 | "값이 없음"을 명시적으로 표현 |
| 기본 초기값 | 변수 선언 시 초기값 | 개발자가 명시적으로 할당 |
| 타입스크립트 | 별도의 타입, 엄격 모드에서 구분됨 | 별도의 타입, 엄격 모드에서 구분됨 |
| 사용 의도 | 값이 아직 할당되지 않았음을 의미 | 의도적으로 값이 없음을 나타냄 |
---
이 FAQ를 통해 타입스크립트에서 `null`과 `undefined`를 정확히 이해하고 올바르게 사용하는 데 도움이 되길 바랍니다.
이 두 가지 개념은 자바스크립트(JavaScript)에서 유래했으며, 타입스크립트는 이를 명확하게 구분하여 타입 시스템을 강화하고 있습니다.
1. 정의 - `null` : `null`은 의도적으로 "값이 없음"을 나타내는 값입니다.
즉, 변수나 객체가 존재하지만 그 값이 비어있음을 명시적으로 표현할 때 사용됩니다.
예를 들어, 객체를 초기화할 때 나중에 값을 할당할 의도로 `null`을 사용할 수 있습니다.
- `undefined` : `undefined`는 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.
즉, 변수는 존재하지만 그 값이 정의되지 않은 상태입니다.
자바스크립트에서 함수가 반환값을 명시하지 않으면 기본적으로 `undefined`를 반환합니다.
2. 사용 예 ```typescript let a: number | null = null; // a는 null로 초기화됨 let b: number | undefined; // b는 선언되었지만 값이 없음 console.log(a); // null console.log(b); // undefined ```
3. 타입 시스템에서의 차이 타입스크립트에서는 `null`과 `undefined`를 명시적으로 타입으로 사용할 수 있습니다.
기본적으로 `strictNullChecks` 옵션이 활성화되어 있다면, `null`과 `undefined`는 다른 타입으로 취급됩니다.
이 옵션이 활성화되면, `null`과 `undefined`는 각기 다른 값으로 간주되며, 이를 통해 코드의 안정성을 높일 수 있습니다.
```typescript let c: string | null = null; // c는 null을 가질 수 있음 let d: string | undefined; // d는 undefined를 가질 수 있음 d = "Hello"; // 유효 c = "World"; // 유효 ```
4. 기본값과의 관계 `undefined`는 변수가 선언되었지만 초기화되지 않은 상태를 나타내므로, 자주 기본값을 설정할 때 사용됩니다.
반면, `null`은 명시적으로 값이 없음을 나타내기 위해 사용됩니다.
예를 들어, 함수의 매개변수에 기본값을 설정할 때 `undefined`를 사용하여 기본값을 제공할 수 있습니다.
```typescript function greet(name: string | undefined = "Guest") { console.log(`Hello, ${name}!`); } greet(); // Hello, Guest! greet("Alice"); // Hello, Alice! ```
5. 비교 `null`과 `undefined`는 자바스크립트에서 동등 비교(`==`)를 사용할 경우 동일하게 평가됩니다.
그러나 엄격 비교(`===`)를 사용할 경우 서로 다르게 평가됩니다.
```javascript console.log(null == undefined); // true console.log(null === undefined); // false ``` 타입스크립트에서도 이러한 동작은 동일하게 적용됩니다.
6. 타입스크립트에서 `null`과 `undefined`는 모두 "값이 없음"을 나타내지만, 그 의미와 사용 방식은 다릅니다.
`null`은 의도적으로 값이 없음을 나타내는 반면, `undefined`는 값이 할당되지 않은 상태를 나타냅니다.
타입스크립트의 강력한 타입 시스템을 활용하여 이 두 가지를 명확하게 구분하고 적절히 사용하는 것이 중요합니다.
이를 통해 코드의 가독성과 안정성을 높일 수 있습니다.
작성자:
이은지 [비회원]
| 작성일자: 1년 전
2024-09-10 05:32:08
조회수: 220 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
조회수: 220 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.