자바스크립트 콘솔창에 undefined나 null이 뜰 때의 의미

자바스크립트 콘솔창에서 마주하는 낯선 단어들

자바스크립트로 코드를 작성하다 보면 브라우저의 개발자 도구 콘솔창을 자주 들여다보게 됩니다. 코드가 마음대로 동작하지 않을 때 원인을 찾기 위해서입니다.

이때 가장 흔하게 눈에 띄는 불청객이 바로 undefined와 null입니다. 화면에 빨간색 에러 메시지가 뜨는 것은 아니지만 이 두 단어가 덩그러니 출력되어 있으면 초보자뿐만 아니라 숙련된 개발자도 잠시 멈칫하게 됩니다.

이 두 가지 값은 자바스크립트에서 ‘값이 없다’는 상태를 나타낸다는 공통점이 있습니다. 하지만 그 속뜻과 발생 원인은 하늘과 땅 차이만큼 다릅니다.

이 차이를 정확히 이해하는 것은 버그 없는 안정적인 프로그램을 만드는 첫걸음입니다. 왜냐하면 많은 자바스크립트 오류가 이 두 개념을 혼동하거나 예상치 못한 곳에서 이 값들이 튀어나올 때 발생하기 때문입니다.

자바스크립트가 말해주는 undefined의 진짜 의미

콘솔창에 undefined가 떴다면 그것은 자바스크립트 엔진이 해당 변수를 인지하고는 있지만 아직 그 안에 어떤 값도 채워넣지 않은 상태를 말합니다.

쉽게 비유하자면 이름표가 붙어 있는 빈 상자를 상상하시면 됩니다. 상자는 존재하고 그 상자의 이름도 알지만 안에는 아무것도 들어있지 않은 상태입니다.

프로그래밍을 하다가 의도하지 않게 undefined를 만나게 되는 경우는 대개 다음과 같습니다.

• 변수를 선언만 하고 값을 할당하지 않은 경우
• 함수에서 리턴문이 없거나 반환할 값이 없을 때 결과를 변수에 담은 경우
• 객체 내부에 존재하지 않는 속성에 접근하려고 시도한 경우
• 함수를 호출할 때 매개변수로 전달해야 할 값을 누락한 경우

예를 들어 let username; 이라고만 적고 콘솔에 username을 찍어보면 undefined가 출력됩니다. 자바스크립트는 변수가 만들어질 때 기본적으로 이 값을 할당하여 메모리 공간을 확보해 둡니다. 즉 자바스크립트가 자동으로 부여하는 기본값 성격이 강합니다.

개발자가 직접 의도하는 값인 null의 특성

반면에 null은 자바스크립트가 알아서 채워 넣는 값이 아닙니다. 개발자가 의도적으로 이 변수에는 현재 값이 없다는 것을 명시적으로 표현하기 위해 집어넣는 값입니다.

앞선 상자 비유를 다시 가져오면 null은 빈 상자가 아니라 아예 상자 안에 ‘여기는 비어 있음’이라고 적힌 카드를 넣어둔 상태입니다.

null을 사용하는 주된 이유는 이전에 어떤 데이터를 담고 있던 변수를 초기화하거나 앞으로 여기에 데이터가 들어올 테지만 지금 당장은 비어 있음을 명확히 알리기 위해서입니다.

예를 들어 서버에서 사용자 정보를 가져오는 중인데 아직 데이터가 도착하지 않았거나 로그아웃 상태라서 사용자 정보가 존재하지 않을 때 null을 할당합니다.

이 두 가지 값의 가장 큰 차이점은 자발성과 의도성에 있습니다. undefined는 시스템이 준비 안 됨을 알리는 신호이고 null은 사람이 직접 비어 있음을 선언하는 기록입니다.

두 개념을 혼동할 때 발생하는 실무에서의 문제점

초보자들이 가장 많이 하는 실수 중 하나는 undefined와 null을 엄격하게 구분하지 않고 사용하는 것입니다. 실무에서는 이 둘을 같다고 생각했다가 낭패를 보는 경우가 적지 않습니다.

자바스크립트에서 이 둘은 타입 자체가 다릅니다. typeof 연산자를 사용해 보면 undefined는 ‘undefined’라는 문자열을 반환하지만 null은 역사적인 이유로 ‘object’를 반환합니다. 이 특이한 점 때문에 조건문을 작성할 때 예기치 않은 오류가 발생하기도 합니다.

특히 API 서버와 통신할 때 이러한 문제가 두드러집니다. 서버에서 데이터를 받아올 때 데이터가 없음을 null로 보내주는 경우와 아예 해당 키값을 누락하여 undefined로 처리되는 경우가 있습니다.

이 미묘한 차이를 코드가 제대로 처리하지 못하면 웹페이지가 하얗게 멈추거나 콘솔창에 붉은색 TypeError가 발생하면서 서비스가 중단될 수 있습니다.

안전하게 코드를 작성하는 실용적인 요령

콘솔창에 뜨는 undefined나 null로 인한 오류를 줄이기 위해 자주 쓰이는 방법이 있습니다. 이 방법들을 적용하면 오류를 줄이는 데 도움이 됩니다.

첫째로 비교할 때는 가능하면 일치 연산자(===)를 사용합니다. 값뿐만 아니라 타입까지 엄격하게 비교하는 세 개짜리 등호 기호(===)를 쓰면 오작동을 막을 수 있습니다. 값이 비어 있는지 확인할 때는 단순히 if(value) 형태로 체크하기보다 구체적으로 조건을 검사하는 것이 안전합니다. 예를 들어 숫자 0이나 빈 문자열도 if(value)에서는 ‘없는 값’처럼 처리되기 때문입니다.

둘째로 옵셔널 체이닝(?.)을 활용하는 것입니다. 객체 안의 깊은 곳에 있는 속성을 가져올 때 중간에 undefined나 null이 있어도 프로그램이 멈추지 않고 undefined를 반환하도록 도와주는 문법입니다. 이 문법을 사용하면 일일이 조건문을 길게 쓰지 않아도 오류를 줄일 수 있습니다.

아래 화면은 user라는 빈 객체를 만든 뒤 실행한 결과입니다. user?.address?.city는 address가 없어도 에러 없이 undefined를 돌려주지만, user.address.city는 address가 undefined인 상태에서 city를 읽으려다 TypeError가 발생합니다.

콘솔에서 user?.address?.city는 undefined가 나오고, user.address.city는 Cannot read properties of undefined 에러가 나오는 화면

셋째로 널 병합 연산자(??)를 활용하는 방법입니다. 변수가 null이거나 undefined일 때 대체할 수 있는 기본값을 지정해 주는 문법으로 빈 화면이나 에러 대신 사용자 친화적인 기본 문구를 보여줄 때 매우 유용합니다.

자주 묻는 질문과 명쾌한 해답

콘솔창에 에러가 뜨지 않는데 왜 굳이 이 값들을 신경 써야 할까요? 초보자라면 한 번쯤 궁금해할 만한 질문입니다. 에러가 당장 안 뜨더라도 이 값들이 예상치 못한 곳으로 전달되면 나중에 찾기 힘든 논리적 오류를 만들어냅니다.

예를 들어 가격 계산 함수에 undefined가 들어가면 전체 계산 결과가 NaN으로 망가져 버리므로 원인을 찾기 어려워집니다.

변수를 선언할 때 undefined를 직접 할당해도 되냐는 질문도 많습니다. 문법적으로는 가능하지만 권장하지 않습니다. 자바스크립트가 알아서 처리해 주는 영역이기 때문에 개발자가 직접 undefined를 넣는 것은 코드의 가독성을 떨어뜨립니다. 비어 있음을 표현하고 싶다면 차라리 null을 사용하는 것이 훨씬 더 전문적인 태도입니다.

코드를 작성하다가 갑자기 타입 에러가 발생하면서 Cannot read properties of undefined라는 문구가 뜰 때가 있습니다. 이는 존재하지 않는 객체의 속성을 읽으려 할 때 발생하는 가장 흔한 에러입니다. 이럴 때는 해당 객체를 콘솔에 미리 찍어보며 데이터가 정말로 잘 들어오고 있는지 흐름을 추적해 보아야 합니다.

버그를 예방하는 습관과 실천 방법

개발 과정에서 콘솔창을 수시로 확인하는 습관은 중요합니다. 코드를 조금 고칠 때마다 브라우저 창을 열어 콘솔을 확인하면 오류가 어디서 생겼는지 빨리 찾을 수 있습니다. 모든 코드를 다 짜고 나서 한꺼번에 확인하면 원인이 어디인지 찾기 어려워질 수 있습니다.

함수를 만들 때는 입력받은 값이 제대로 들어왔는지 방어 코드를 먼저 작성하는 것이 좋습니다. 만약 값이 비어 있다면 함수를 즉시 종료시키거나 기본값을 할당하여 프로그램이 안전하게 흐르도록 유도해야 합니다. 이러한 방어적 프로그래밍 습관이 쌓이면 실무에서 마주하는 수많은 예외 상황을 우아하게 대처할 수 있게 됩니다.

자바스크립트가 보내주는 작은 신호들을 무시하지 않고 귀를 기울인다면 머지않아 콘솔창에 떠 있는 undefined나 null은 두려움의 대상이 아니라 코드를 더 정확하게 만들어주는 고마운 이정표가 될 것입니다.