[JavaScript] 원시형 - Boolean, null (명시적), undefined (암시적)

Boolean

 

 

true와 false의 값은 Boolean 이라고 불리는 데이터 타입이고, 이 불린은 이렇게 true와 false 라는 두 가지 값만 사용하는 '논리 데이터' 이다. 그래서 true는 긍정의 의미, false는 부정의 의미를 가지고 있다. 대표적으로 if 조건문을 작성해본다. if 조건에 a 라는 데이터를 추가하고, 그 내부에서 console.log('Hello') 라고 작성을 해서 저장하면, 콘솔창에 Hello 라는 문자 데이터가 출력되는 것을 볼 수 있다. 그래서 if 조건을 통해 a 라는 변수가 true 라는 긍정을 의미하는 Boolean 데이터이기 때문에, 그 부분을 통과해서 이렇게 중괄호 영역에 코드가 실행될 수 있는 구조이다.

 

 

만약에 if 조건문에서 b 라는 변수로 변경하면, 콘솔에는 아무것도 출력되 않는다. 그것은 b 라는 변수가 부정을 의미하는 false 라는 불린 데이터를 가지고 있기 때문에 조건에 부합하지 않아서 중괄호 영역이 실행되지 않는 것이다. 이렇게 불린 데이터는 긍정의 true와 부정의 false 라는 두 가지의 값만 가지고 있어서 특정한 상황들을 분기처리 할 수가 있다. 그러한 용도로 굉장히 자주 사용되니 기억 해두어야겠다.

 

 

---

null

 

 

let 이라는 키워드로 변수를 하나 만들어서 여기에 null 이라는 값을 할당해보면, let 이라는 키워드를 사용했다는 것은 age 라는 이름의 변수에 어떤 새로운 값이 재할당 될 수 있다는 것을 의미한다. 이 null 이라는 데이터는 존재하지 않는다. 혹은, 값이 비어있다. 혹은, 값을 알 수 없다. 라는 것으로 우리가 명시적으로 직접 존재하지 않거나, 비어있거나, 알 수 없다는 것을 의미하도록 작성한 데이터라고 보면 된다. 그래서 이 age 라는 나이를 의미하는 변수에는 지금 어떠한 값이 존재하지 않는다 라는 것을 의미적으로 작성한 부분이다.

 

 

그리고 나서 이것을 console 창에 출력하게 되면 당연하게도 콘솔 창에는 null 이라는 데이터가 출력하게 된다. 보통 null 이라는 데이터를 직접적으로 사용하지는 않고, 의미적으로 age는 현재 값이 없는 상태임을 나타내는 용도인데, 언젠가는 값이 있는 상태가 되어야 된다. 그래서 예를 들면, 자바스크립트에 setTimeout() 이라는 함수를 작성한 다음에, 여기다가 일단 function 키워드로 callback 함수를 추가해준 다음에 이 내부에서 age 라는 변수의 값을 85로 할당해보기로 한다. 그리고 이것은 1초 뒤에 실행되도록 함수 다음에 쉼표로 구분해서 밀리초 밀리세컨드 (millisecond, ms) 단위로 숫자 1000을 추가한다.

 

결과적으로 null 이라는 데이터를 가지고 있었던 age는 다시 85 라는 숫자 데이터로 변경되는 것이고, 그렇게 변경된 결과를 콘솔창에 다시 출력을 해봤다. 그러면 작성한 결과를 저장하고 콘솔을 보면 null 이라는 데이터가 먼저 출력이 되고, 1초 뒤에 변경이 된 85 라는 데이터가 출력이 된다. 최초의 age는 값이 존재하지 않는다는 것이 명시적이였는데, 1초 뒤에 다른 숫자 데이터로 변경이 됐고, 그것이 콘솔에 출력이 된다는 것이다. age는 처음에는 아무것도 없는 상태였다가 어느 순간에 다른 값으로 바뀔 수 있다는 것을 처음에 null 이라는 데이터를 할당해서 만들 수가 있다. 그래서 이것을 명시적으로 null 이라는 데이터를 직접적으로 할당해서 사용할 수가 있는 것이다. 같은 개념으로 null 대신에 undefined 라는 것도 사용할 수 있다.

 

---

undefined

 

 

이 undefined도 null과 동일하게 값이 없는 상태다. 그런데 null 이라는 데이터는 명시적으로 값이 없다는 것을 직접 입력하는 개념이지만, undefined는 암시적이다. 그래서 undefined 라는 개념이 직접적으로 작성할 일이 많은 경우에 없을거고, 일단 저장해서 확인해보면 undefined가 출력이 되는데, 이 undefined는 따로 작성하지 않아도 출력되는 것을 확인할 수 있다.

 

 

그래서 제일 처음에 age 라는 변수를 아무런 값도 할당하지 않은 상태에서 let 이라는 키워드로 생성하고 콘솔에 바로 출력을 하면, 동일하게 undefined 가 출력되는 것을 볼 수 있다. 이렇게 명시적인 개념 (ex. null) 의 반대는 암시적 (ex. undefined) 이라고 하는데 암시적이라고 하는 것은 우리가 직접 값을 할당하지 않아도 이미 그 값이 존재하고 있다는 것이다. 그래서 이 undefined는 어떠한 변수에 값이 할당이 되어져있지 않은 상태를 의미한다. 그래서 기존의 null과 비슷하게 값이 없는 상태에서 1초 뒤에 값이 할당될 수 있는 구조의 코드를 만들 때, null 혹은 undefined를 사용할 수 있다. undefined는 우리가 직접 작성하는 것이 아니고, 기본적으로 만들어지는 변수에 아무런 값도 할당이 되지 않으면 자바스크립트가 자연스럽게 undefined 라는 값을 내부적으로 할당한다.

 

=> 결국 직전에 배웠던 null 이라는 데이터는 명시적으로 작성하는 것이고, undefined는 암시적으로 자동으로 들어가는 개념으로 차이점을 구분한다.

 

---

새로운 예제 ▼

 

 

console.log를 통해 user 라는 데이터를 출력해보면 객체 데이터가 확인이 되는데, 객체 데이터 안에는 name, age 라는 속성이 있다. 만약에 user 에서 name 이라는 속성을 점 표기법 (user.name) 을 통해서 출력하게 되면, user 안에 있는 name 이라는 속성의 값인 문자 데이터 sangah가 출력이 된다. 혹은 console.log를 통해서 user.age (user의 age) 를 출력하게되면 숫자 31이 확인이 된다.

 

 

그런데 아래쪽에 user.email 이라는 속성을 출력해보려고 하니 user라는 객체 데이터는 name, age 라는 속성은 있는데 email 이라는 속성은 보이지 않는다. 그랬을 때 해당 내용을 저장하게 되면 콘솔창에는 undefined 라는 데이터가 출력이 된다. 그래서 자바스크립트는 user 라는 데이터에 email 이라는 속성이 없는데도 불구하고, 그 속성을 조회하려고 시도하니 이것을 암시적으로 값이 할당되지 않은 상태를 의미하는 undefined를 출력한다. 그렇다고 한다면, 우리는 user라는 객체 데이터에서 email을 제외하고도 정말 다양하게 abc 라는 존재하지도 않는 속성을 조회해서 undefined 라는 값을 확인할 수도 있다.

 

 

결과적으로 undefined는 값이 할당되지 않은 암시적인 상태를 의미한다라는 것이고, 이럴 때 의도적으로 email 속성에 값이 아직은 비어있다는 것을 명시적으로 나타내기 위해서는 자동으로 undefined가 나오는 구조가 아니고, null 이라는 값을 할당해서 email은 없습니다. 라고 표시할 수 있다. 그래서 다시 user의 email을 조회했을 때는 이렇게 null 이라는 데이터가 출력되는 것을 볼 수 있다. 그래서 언뜻 생각하기에는 같은 개념으로 이해할 수 있겠지만, 어떤 변수에 값이 정확하게 존재하지 않는다는 것을 직접 작성하는 것과 혹은 값이 할당되지 않은 상태를 표시하는 것은 엄연하게 다르다!

 

=> 명시적인 null과 암시적인 undefined 데이터에 대해 살펴봤다. 지금은 약간 헷갈릴 수 있겠지만, 어려운 개념이 아니니까 이후에 여러 예제들을 보면서 조금 더 명확하게 이해길 기대한다.