JavaScript 에센셜 | 위니북스

논리형, undefined, null, 심볼

1. 불리언 (Boolean)

논리 자료형(Boolean, 불리언) 타입은 true 또는 false 값 중 하나를 가지며, 주로 조건문(if)의 조건으로 사용됩니다.

let bool1 = true;
let bool2 = false;

let bool1 = true;
let bool2 = false;

1.1. 비교 연산자

비교 연산자는 두 개의 값을 비교하여 true 또는 false 값을 반환합니다. 대소관계 연산자와 동등, 일치 연산자가 있습니다. 예를 들어, x > y와 같은 표현식은 x가 y보다 큰지 여부를 true 또는 false 값으로 반환합니다.

숫자 자료형에서 배운 것처럼 ==와 ===의 차이점을 알아두세요. ==는 값만 비교하고, ===는 값과 타입까지 비교합니다. 따라서 ===를 사용하는 것이 더 안전합니다.

let x = 5; let y = 10; let z = 5; console.log(x > y); // false console.log(x < y); // true console.log(x >= z); // true console.log(x <= z); // true console.log(x == z); // true console.log(x != z); // false console.log(x === y); // false console.log(x !== y); // true

1.2. 논리 연산자

논리 연산자는 true나 false 값을 가지고 연산을 수행하는 도구입니다. 논리 연산자는 우리가 일상에서 사용하는 논리와 비슷하게 작동합니다.

1.2.1. 논리곱 (&&) 연산자

논리곱 연산자는 "그리고" 라는 의미를 가지고 있습니다. 두 가지 조건이 모두 참일 때만 결과가 참이 됩니다.

console.log(true && true); // true (둘 다 참이므로 결과는 참) console.log(true && false); // false (하나가 거짓이므로 결과는 거짓) console.log(false && true); // false (하나가 거짓이므로 결과는 거짓) console.log(false && false); // false (둘 다 거짓이므로 결과는 거짓)

예를 들어, "비가 오고 있고, 우산을 가지고 있다"는 조건이 모두 참일 때만 "외출을 한다"는 상황을 표현할 수 있습니다. 조건문을 사용하여 다음과 같이 작성할 수 있습니다.

조건문은 뒤에서 자세히 다룰 예정이니 지금은 논리 연산자가 어떻게 사용되는지만 이해해 주세요. 문법이라 생각하지 마시고 문장이라 생각하고 읽어보세요. 영어로 표현하면, "If it is raining and I have an umbrella, I will go out. Else, I will not go out." 입니다.

let isRaining = true; let hasUmbrella = true; if (isRaining && hasUmbrella) { console.log('외출을 한다'); } else { console.log('외출을 하지 않는다'); }

1.2.2. 논리합 (||) 연산자

논리합 연산자는 "또는" 이라는 의미를 가지고 있습니다. 두 가지 조건 중 하나만 참이어도 결과가 참이 됩니다.

console.log(true || false); // true (하나가 참이므로 결과는 참) console.log(false || true); // true (하나가 참이므로 결과는 참) console.log(false || false); // false (둘 다 거짓이므로 결과는 거짓)

예를 들어, "비가 오거나, 눈이 온다"는 조건 중 하나라도 참이면 "외출을 하지 않는다"는 상황을 아래와 같이 표현할 수 있습니다.

let isRaining = true; let isSnowing = false; if (isRaining || isSnowing) { console.log('외출을 하지 않는다'); } else { console.log('외출을 한다'); }

1.2.3. 논리부정 (!) 연산자

논리부정 연산자는 "아니다" 라는 의미를 가지고 있습니다. 조건이 참이면 거짓으로, 거짓이면 참으로 바꿉니다. 예를 들어, "비가 오지 않는다"는 상황에서는 비가 오는지 여부를 반대로 말하는 것입니다.

console.log(!true); // false (참을 거짓으로 바꿈) console.log(!false); // true (거짓을 참으로 바꿈) console.log(!!true); // true (참을 두 번 부정해서 다시 참이 됨) console.log(!!false); // false (거짓을 두 번 부정해서 다시 거짓이 됨)

논리부정 연산자의 경우 두 번 사용하여 true값이나 false값을 반환할 수 있습니다. 이 연산자는 해당 값이 truthy인지 falsy인지를 판단할 때 사용됩니다. truthy와 falsy는 자바스크립트에서 참으로 간주되는 값과 거짓으로 간주되는 값을 말합니다. 자바스크립트에서는 특정 값이 조건문에서 true 또는 false로 평가되는데, 이를 truthy와 falsy라고 합니다. 값이 truthy인지 falsy인지 코드를 실행하여 확인해보세요.

분류	값
Truthy	true, 비어 있지 않은 문자열, 0을 제외한 숫자, 객체, 배열, 함수
Falsy	false, 빈 문자열(''), 0, null, undefined, NaN

console.log(!!{}); // true (객체는 참으로 간주됨) console.log(!!23); // true (0을 제외한 숫자는 참으로 간주됨) console.log(!!undefined); // false (undefined는 거짓으로 간주됨) console.log(!!null); // false (null은 거짓으로 간주됨) console.log(!!NaN); // false (NaN은 거짓으로 간주됨)

값을 truthy 또는 falsy로 판단하는 것은 조건문을 작성할 때 유용합니다. 예를 들어, 아래처럼 변수에 0을 넣고 조건문에서 이를 그대로 활용했을 때 어떻게 동작하는지 확인해보세요. 이처럼 truthy와 falsy를 이해하면 조건문을 작성할 때 더 효율적으로 코드를 작성할 수 있습니다.

let num = 0; if (num) { console.log('참'); } else { console.log('거짓'); }

2. undefined

undefined는 변수가 값이 할당되지 않은 경우를 가리키는 데이터 타입입니다. 즉, 해당 변수에 아무런 값도 할당되지 않았거나, 정의되지 않은 변수에 접근하려고 할 때 undefined가 반환됩니다.

다만 위니북스에서는 undefined를 출력하지 않습니다. 따라서 아래 코드는 개발자 도구의 콘솔창에서 확인해주세요.

let a; console.log(a); // undefined

선언되지 않는 변수에 직접 접근하려고 하면 오류가 발생하지만 typeof 연산자를 이용하면 오류가 발생하지 않고 undefined가 반환됩니다.

console.log(typeof b); // undefined

3. null

null은 값이 없음을 나타내는 데이터 타입입니다. 이 값을 사용하여 변수에 값을 지정하지 않도록 초기화 할 수 있습니다.

let value1; // undefined let value2 = null; console.log(value2); // null let isLoggedIn = true; let currentUser = { name: 'licat', level: 3, }; if(isLoggedIn === false){ currentUser = null; }

undefined는 변수가 선언되었지만 값이 지정되지 않은 경우를 나타내며, null은 어떤 값이 의도적으로 비어있음을 표현하기 위해 사용합니다.

값이 비어있음을 나타내기 위해 undefined을 사용해도 되나요?

null은 초기화를 하기 위한 특정한 목적으로 의도적으로 사용됩니다. 그렇다면 빈 값을 나타내는 undefined을 사용하여 초기화하는 것은 어떨까요?

→ 의미적으로는 부적절합니다. undefined는 ‘선언된 변수에 아직 값이 할당되지 않았음’ 을 의미하기 때문입니다. 명시적으로 빈 값을 나타내기 위해서는 null을 사용합니다.

왜 typeof null 은 object인가요?

null은 원시타입중 하나지만 타입을 검사해보면 객체 타입을 의미하는 object를 반환하는것을 확인 할 수 있습니다. 이는 자바스크립트 개발 과정에서 발생한 오류이지만, 이미 관련된 수 많은 코드가 사용되었기 때문에 수정되고 있지 않는 상황입니다. 따라서 null의 타입을 확인할 때는 Object.prototype.toString.call()을 사용하여 확인하는 것이 좋습니다.

typeof - JavaScript | MDN

console.log(typeof null); // "object"

console.log(Object.prototype.toString.call(null)); // "[object Null]"

4. 심볼(Symbol)

ES6에 추가된 원시타입으로, 고유하고 변경 불가능한 식별자를 만드는데 사용됩니다. 인자로 심볼의 설명을 추가할 수 있지만, 설명과 관계없이 Symbol 함수를 호출할 때마다 새로운 식별자를 생성합니다. 심볼의 출력또한 위니북스에서 지원하고 있지 않으니 콘솔창에서 실행해서 확인해보세요.

let sym1 = Symbol('name'); let sym2 = Symbol('name'); console.log(sym1 === sym2); // false

주로 객체의 속성 키 값으로 사용되며 속성 간의 충돌을 방지할 수 있습니다. 또한 for in 이나 Object.keys와 같이 객체를 탐색하는 기능에 포함되지 않아 숨겨진 속성을 만들 수 있습니다.

const secretKey = Symbol(); const licat = { name: '라이캣', [secretKey]: '#0000', }; for(let key in licat){ console.log(key); // name만 출력 } console.log(licat); console.log(licat[secretKey]);