데이터 타입의 종류

기본형 (원시형, Primitive type)

종류

• 숫자(Number)
• 문자열(String)
• 불리언(Boolean)
• Null
• Undefined
• Symbol (ES6에 추가 됨)

특징

• 할당이나 연산 시 복제
• 값이 담긴 주솟값을 복제
• 불변성(Immutability)을 띔

참조형 (Reference type)

종류

• 객체(Object)
  • 배열(Array)
  • 함수(Function)
  • 날짜(Date)
  • 정규식(RegExp)
  • Map, WeakMap (ES6에 추가 됨)
  • Set, WeakSet (ES6에 추가 됨)

특징

• 할당이나 연산 시 참조
• 엄밀히 말하면 참조형도 복제를 함
• 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제

데이터 타입에 관한 배경지식

메모리와 데이터

• C/C++, Java 등의 정정 타입 언어
  • 메모리가 부족했던 시절
  • 메모리 낭비를 최소화하기 위해 데이터 타입별로 할당할 메모리 영역을 2 Bytes, 4 Bytes 등으로 나눠서 정해 놓음
  • 허용 메모리 이상의 값을 입력하면 오류가 나거나 잘못된 값이 저장됨
  • 올바른 값을 저장하기 위해서는 더 큰 데이터 형으로 변환이 필요
    • C의 경우 동적인 길이의 문자열 저장을 위해선 malloc, calloc과 같은 동적 메모리 할당 함수를 통해서 요청 길이 만큼의 메모리를 할당하고 사용함. 만약 이후에 더 많은 공간이 필요한 경우 realloc을 통해서 다시 메모리를 할당 받음
• JavaScript
  • 과거보다 메모리 용량이 월등히 커진 상황에서 상대적으로 메모리 관리에 대한 압박에서 자유로워짐
  • 애초에 메모리 공간을 좀 더 넉넉하게 할당
  • 숫자의 경우 정수형인지 부동소수형인지 구분하지 않고 8 Bytes를 할당
  • 덕분에 개발자가 형 변환을 걱정해야 하는 상황이 훨씬 덜 발생하게 됨
    • 충분히 넉넉한 메모리를 사용하고 있음에도 블록체인의 토큰을 다룰 때와 같이 더 큰 숫자를 다룰 때에는 BigNumber, BigInt(ES2020에서 추가)와 같은 데이터 형을 이용하여야 함

식별자와 변수

• 변수와 식별자를 혼용하는 경우가 많음
• 대부분의 경우 문맥에 따라 무엇을 말하고자 하는지 유추할 수 있음
• 하지만 둘의 차이를 모른다면 혼란스러울 수 있음

변수 (Variable)

• 변할 수 있는 데이터 (숫자, 문자열, 객체, 배열 등...)

식별자 (Identifier)

• 어떤 데이터를 식별하는데 사용하는 이름
• 변수명

변수 선언과 데이터 할당

변수 선언

코드 예시

let a;

• a 라는 식별자를 갖는 데이터가 담길 공간을 만든다.

메모리 변화

• 임의의 메모리 주소 1003 번지에 a 라는 이름(식별자)을 갖는 공간이 할당 됨

데이터 할당

코드 예시

let a; // 1-1. 변수 선언
a = 'abc'; // 1-2. 데이터 할당

let a = 'abc'; // 2. 변수 선언과 동시에 데이터 할당

• 1번 처럼 단계를 나눠서 하는 것과 2번 처럼 동시에 하는 것 모두 JavaScript 엔진에서 하는 동작은 같음
  • 변수 a에 메모리 할당
  • 변수 a의 메모리 찾기
  • 해당 메모리 값에 'abc' 를 저장
• 위의 과정 처럼 될 것 같지만, 실제는 해당 위치(a)의 값에 직접 데이터('abc')를 저장하는 것이 아니라 데이터를 별도의 메모리에 저장하고 해당 메모리의 주소 값을 저장하는 방식

메모리 변화

• @5004 번지에 'abc' 값을 저장
• 변수 a의 메모리 찾기(@1003)
• 해당 메모리 값에 'abc'가 저장 된 주소(@5004)를 저장

데이터가 저장 된 주소를 저장하는 이유

• 자유로운 데이터 변환과 효율적인 메모리 관리하기 위함
• 만약 값을 직접 저장한다면, 해당 공간을 넘어가는 데이터로 변환 할 경우 공간을 늘리는 작업 필요
• 해당 공간의 앞 뒤로 여유 공간이 있다면 문제 없겠지만, 여유 공간이 없을 경우 데이터를 전부 옮기는 연산 불가피 함
• 결국 변수와 데이터를 별도의 공간에 나누어 저장하는 것이 효율적으로 데이터 변환을 처리하는데 최적

데이터 변환

코드 예시

let a = 'abc';
a = 'abcdef';

• 변수 a가 가리키는 메모리에 문자열 'abc'가 저장 된 메모리 주소 저장
• 메모리에 'abcdef'를 저장하고 해당 메모리의 주소를 변수 a의 메모리 값에 덮어 씌움

메모리 변화

• @5005번지 메모리 값에 'abcdef'를 저장
• 변수 a의 메모리 찾기 (@1003)
• 해당 메모리 값을 @5005로 교체

변수 영역과 데이터 영역 분리의 장점

• 메모리를 보다 효율적으로 사용
• 예시 : 500개의 변수를 생성하고 모든 변수에 동일하게 숫자 5를 할당한다고 가정
  • 변수 영역에 직접 값을 저장 할 경우 : 500 (변수 개수) * 8 (숫자 저장에 필요한 메모리) = 4,000 Bytes
  • 데이터 영역에 저장하고 주소를 저장 할 경우 : 500 (변수 개수) * 2 (주소 저장에 필요한 메모리, 가정) + 8 (숫자 저장에 필요한 메모리) = 1,008 Bytes

기본형 데이터와 참조형 데이터

불변값 (Immutable Value)

• 변수와 상수를 구분 짓는 요소 : 변수 영역 메모리의 변경 가능성
• 불변성 여부를 구분 짓는 요소 : 데이터 영역 메모리의 변경 가능성
• 기본형 데이터(Number, String, Boolean, Null, Undefined, Symbol)들은 모두 불변값

코드 예시

let a = 'abc;
a = a + 'def';

let b = 5;
let c = 5;
b = 7;

메모리 변화

• 변수 a의 메모리(@1003) 값에 문자열 'abc'가 저장 된 메모리 주소(@5004)를 저장
• 변수 a의 메모리(@1003) 값을 문자열 'abcdef'가 저장 된 메모리 주소(@5005)로 교체
• 변수 b의 메모리(@1004) 값에 숫자 5가 저장 된 메모리 주소(@5002)를 저장
• 변수 c의 메모리(@1005) 값에 숫자 5가 저장 된 메모리 주소(@5002)를 저장
• 변수 b의 메모리(@1004) 값을 숫자 7이 저장 된 메모리 주소(@5003)로 교체

가변값 (Mutable Value) - 참조형 데이터의 할당

코드 예시

let obj1 = {
  a: 1,
  b: 'bbb'
};

메모리 변화

• 변수 obj1의 메모리(@1002) 할당
• 데이터({a:1, b: 'bbb'})를 저장하기 위한 메모리(@5001) 할당
• 해당 메모리에 데이터를 저장하려고 보니 여러 프로퍼티로 이뤄진 데이터 인 것을 알게 됨.
• 프로퍼티를 별도로 저장하기 위해 객체 @5001의 메모리 영역을 별도로 만들고, 해당 영역 주소(@7103 ~ ?)를 @5001 의 값에 저장
• 프로퍼티 a의 메모리(@7103)에 숫자 1이 저장 된 메모리 주소(@5003)를 저장
• 프로퍼티 b의 메모리(@7104)에 문자열 'bbb'가 저장 된 메모리 주소(@5004)를 저장

가변값 - 참조형 데이터의 프로퍼티 재할당

• 기본형 데이터와 차이는 '객체의 변수(프로퍼티) 영역'이 별도로 존재하는 점
• 데이터 영역에 저장 된 모든 값은 불변값
• 변수 영역에 저장 된 값은 가변값
• 불변값이 들어가야 되는 데이터영역에 가변값을 갖는 객체 프로퍼티 주소를 가지고 있기 때문에 참조형 데이터는 가변한다고 표현

코드 예시

let obj1 = {
  a: 1,
  b: 'bbb'
};
obj1.a = 2;

메모리 변화

• obj1의 저장 된 메모리(@5001)의 값에는 변화가 없음
• obj1의 프로퍼티 a가 저장 된 주소(@7103) 값을 숫자 2가 저장 된 메모리 주소(@5005)로 교체

가변값 - 중첩 된 참조형 데이터(객체)의 프로퍼티 할당

코드 예시

let obj = {
  x: 3,
  arr: [ 3, 4, 5]
};

메모리 변화

• obj를 위한 메모리(@1002) 할당
• obj의 데이터를 저장하기 위한 메모리(@5001) 할당하고 obj 메모리(@1002) 값에 저장
• 데이터가 다중 프로퍼티로 이뤄진 것을 확인하여 @5001의 변수 영역을 할당(@7103 ~ ?)하고 obj의 데이터영역 메모리(@5001) 저장
• 프로퍼티 x를 위한 메모리(@7103)에 숫자 3이 저장 된 메모리 주소(@5002)를 저장
• 프로퍼티 arr를 위한 메모리(@7104)에 저장 할 데이터가 다중 프로퍼티로 이뤄진 것을 확인하여 해당 객체를 위한 변수 영역을 할당(@8104 ~ ?)하고 비어있는 데이터 영역 메모리(@5003)에 저장
• 프로퍼티 arr의 변수 영역이 저장 된 메모리(@5003)의 주소를 프로퍼티 arr를 위한 메모리(@7104) 값에 저장
• 프로퍼티 arr내부의 프로퍼티 중 0번째에 들어갈 데이터 숫자 3은 이미 @5002 번지에 있어서 해당 메모리 주소를 @8104에 저장
• 나머지 1, 2번째 프로퍼티의 값은 새롭게 할당하여 각각 @5004, @5005 번지에 저장하고 해당 주소를 @8105, @8106 값에 저장

가변값 - 중첩 된 참조형 데이터(객체)의 프로퍼티 재할당

코드 예시

let obj = {
  x: 3,
  arr: [ 3, 4, 5]
};

obj.arr = 'str';

메모리 변화

• obj.arr 프로퍼티의 메모리(@7104) 값은 문자열 'str'이 저장 된 메모리 주소(@5006)으로 교체
• 객체 [3, 4, 5] 를 위해 사용되었던 메모리 (@5003, @8104 ~)는 GC(가비지 컬렉터)의 수거 대상이 됨

변수 복사 비교

코드 예시

let a = 10;
let b = a;

let obj1 = { c: 10, d: 'ddd' };
let obj2 = obj1;

메모리 변화

• 단순 복사는 별다른 차이가 없음

변수 복사 후 프로퍼티 변경

코드 예시

let a = 10;
let b = a;

let obj1 = { c: 10, d: 'ddd' };
let obj2 = obj1;

b = 15;
obj2.c = 20;

• 복사하고 하면 프로퍼티 변경 시 원본에 영향을 안 미칠 것을 대기 함
• a, b 값이 다르고, obj1, obj2가 다른 값을 가지고 있어야 함
• 하지만 실제로 그렇지 않음

메모리 변화

• 기본형 데이터 변수인 a, b의 경우에는 b의 메모리(@1002) 값이 숫자 15가 저장 된 메모리 주소(@5004)로 변경 됨. 그래서 a !== b 성립
• 참조형 데이터 변수인 obj1, obj2의 경우에는 obj2의 메모리(@1004)에는 전혀 변화가 없고, 프로퍼티 c가 저장 된 메모리(@7103)의 값이 숫자 20이 저장 된 메모리 주소(@5005)로 변경 됨.
• 그런데 obj1과 obj2의 메모리(@1003, @1004) 값에는 전혀 변화가 없기 때문에 obj1 !== obj2는 성립하지 않음

변수 복사 후 객체 자체를 변경

• 위의 예제와 다르게 이번에는 아예 객체 자체를 새롭게 만들어서 변경

코드 예시

let a = 10;
let b = a;

let obj1 = { c: 10, d: 'ddd' };
let obj2 = obj1;

b = 15;
obj2 = { c: 20, d: 'ddd' };

메모리 변화

• 새로운 객체를 위한 변수 영역(@8204 ~ ?)이 새롭게 할당
• 해당 변수 영역을 저장 할 데이터 영역(@5006)도 새롭게 할당
• 그 값을 obj2 메모리(@1004) 값에 저장
• 서로 바라보는 객체 자체가 다르기 때문에 obj1 !== obj2 성립

불변 객체(immutable object)

• 불변 객체는 React.js, Vue.js, Angular.js 뿐만 아니라 함수형 프로그램, 디자인 패턴에서도 등장하는 중요한 기초 개념
• 참조형 데이터의 '가변'은 데이터 자체가 아니라 내부 프로퍼티를 변경할 때 성립

불변 객체를 만드는 간단한 방법

• 내부 프로퍼티를 변경할 필요가 있을 때 마다 매번 새로운 객체를 만들어 재할당 하기로 규칙을 정함
• 자동으로 새로운 객체를 만드는 도구를 활용
  • immutable.js, immer.js, immutability-helper 등의 라이브러리
  • ES6의 spread operator, Object.assign 메서드 등

불변 객체가 필요한 경우

• 값으로 전달 받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 되는 경우

객체의 가변성에 따른 문제점 예시

let user = {
  name: 'Seongil',
  gender: 'male'
};

const changeName = (user, newName) => {
  let newUser = user;
  newUser.name = newName;
  return newUser;
}

const user2 = changeName(user, 'modolee');

if (user !== user2) {
  console.log('유저 정보가 변경되었습니다.');
}

console.log(user.name, user2.name); // modolee modolee
console.log(user === user2); // true

• 결과 확인 - 개발자 도구 console에 찍히는 내용 확인
• 이름을 넘기면서 기존 유저를 복사하여 새로운 유저를 생성하고 싶었으나 기존 유저 이름까지 변경 됨

객체의 가변성에 따른 문제점 해결 예시

let user = {
  name: 'Seongil',
  gender: 'male'
};

const changeName = (user, newName) => {
  return {
    name: newName,
    gender: user.gender
  };
}

const user2 = changeName(user, 'modolee');

if (user !== user2) {
  console.log('유저 정보가 변경되었습니다.'); // 유저 정보가 변경되었습니다.
}

console.log(user.name, user2.name); // Seongil modolee
console.log(user === user2); // false

• 결과 확인
• 기존 유저 정보도 유지되고 새로운 유저도 생성 됨
• 하지만 user.gender를 직접 입력해야 되는 불편함이 있음
• 프로퍼티가 많은 경우에 문제가 됨

기존 정보를 복사해서 새로운 객체를 반환하는 함수 예시 (얇은 복사)

let user = {
  name: 'Seongil',
  gender: 'male'
};

const copyObject = (target) => {
  let result = {};
  for (const prop in target) {
    result[prop] = target[prop];
  }
  return result;
}

const user2 = copyObject(user);

user2.name = 'modolee';

if (user !== user2) {
  console.log('유저 정보가 변경되었습니다.'); // 유저 정보가 변경되었습니다.
}

console.log(user.name, user2.name); // Seongil modolee
console.log(user === user2); // false

• 결과 확인
• for 문을 이용해서 target 객체의 프로퍼티들을 복사
• 얇은 복사만 수행하여 아쉬움
• 궁금증이 생겨 Spread operator도 동일하게 얇은 복사를 실행할까?를 실험해 봄
  • user에 favorite 프로퍼티를 추가해서 배열로 데이터를 넣음
  • 유저 복사 이후에 favorite.push를 실행
  • 기존 유저의 favorite도 함께 변경 됨 (얇은 복사가 일어남)
  • 결과 확인

얕은 복사와 깊은 복사

• 얇은 복사 (shallow copy) : 바로 아래 단계의 값만 복사하는 방법
  • 중첩 된 객체에서 참조형 데이터가 저장 된 프로퍼티를 복사할 때 그 주소 값만 복사
  • 해당 프로퍼티에 대한 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리킴
  • 사본을 바꾸면 원본도 바뀌고, 원본을 바꾸면 사본도 바뀜
• 깊은 복사 (deep copy) : 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법

중첩 된 객체에 대한 얕은 복사 예시

const copyObject = (target) => {
  let result = {};
  for (const prop in target) {
    result[prop] = target[prop];
  }
  return result;
};

let user = {
  name: 'Seongil',
  urls: {
    linkedin: 'http://linkedin.com/in/modolee',
    github: 'http://github.com/modolee',
    blog: 'http://velog.io/@modolee'
  }
};

let user2 = copyObject(user);

user2.name = 'modolee';
console.log(user.name === user2.name); // false

user.urls.blog = 'https://medium.com/@modolee';
console.log(user.urls.blog === user2.urls.blog); // true

user2.urls.linkedin = '';
console.log(user.urls.linkedin === user2.urls.linkedin); // true

• 결과 확인
• user의 urls 객체의 프로퍼티 값을 변경하면 user2로 함께 변경되고, 반대도 마찬가지

중첩 된 객체에 대한 깊은 복사 예시

const copyObject = (target) => {
  let result = {};
  for (const prop in target) {
    result[prop] = target[prop];
  }
  return result;
};

let user = {
  name: 'Seongil',
  urls: {
    linkedin: 'http://linkedin.com/in/modolee',
    github: 'http://github.com/modolee',
    blog: 'http://velog.io/@modolee'
  }
};

let user2 = copyObject(user);
user2.urls = copyObject(user.urls);

user2.name = 'modolee';
console.log(user.name === user2.name); // false

user.urls.blog = 'https://medium.com/@modolee';
console.log(user.urls.blog === user2.urls.blog); // false

user2.urls.linkedin = '';
console.log(user.urls.linkedin === user2.urls.linkedin); // false

• user만 복사하는 것이 아니라 urls도 별도로 복사
• 결과 확인

객체의 깊은 복사를 수행하는 범용 함수 예시

const copyObjectDeep = (target) => {
  let result = {};
  if (typeof target === 'object' && target !== null) {
    for (const prop in target) {
      result[prop] = copyObjectDeep(target[prop]);
    }
  } else {
    result = target;
  }
  return result;
};

let user = {
  name: 'Seongil',
  urls: {
    linkedin: 'http://linkedin.com/in/modolee',
    github: 'http://github.com/modolee',
    blog: ['http://velog.io/@modolee', 'https://medium.com/@modolee']
  }
};

let user2 = copyObjectDeep(user);

user2.name = 'modolee';
console.log(user.name === user2.name); // false

user.urls.blog[1] = 'https://steemit.com/@modolee';
console.log(user.urls.blog[1] === user2.urls.blog[1]); // false

user2.urls.linkedin = '';
console.log(user.urls.linkedin === user2.urls.linkedin); // false

console.log(user);
/*
{
  name: 'Seongil',
  urls: {
    linkedin: 'http://linkedin.com/in/modolee',
    blog: ['http://velog.io/@modolee', 'https://steemit.com/@modolee'],
    github: 'http://github.com/modolee'
  }
}
*/

console.log(user2);
/*
{
  name: 'modolee',
  urls: {
    linkedin: '',
    blog: {0: 'http://velog.io/@modolee', 1: 'https://medium.com/@modolee'},
    github: 'http://github.com/modolee'
  }
}
*/

• 재귀적으로 함수를 호출하며 내부의 모든 객체들을 복사
• 배열의 경우 살짝 다르게 표현 되었지만, 사용에는 지장이 없음
• 결과 확인

JSON을 활용한 간단한 깊은 복사 예시

const copyObjectViaJson = (target) => {
  return JSON.parse(JSON.stringify(target));
};

let user = {
  name: 'Seongil',
  urls: {
    linkedin: 'http://linkedin.com/in/modolee',
    github: 'http://github.com/modolee',
    blog: ['http://velog.io/@modolee', 'https://medium.com/@modolee']
  }
};

let user2 = copyObjectViaJson(user);

user2.name = 'modolee';
console.log(user.name === user2.name); // false

user.urls.blog[1] = 'https://steemit.com/@modolee';
console.log(user.urls.blog[1] === user2.urls.blog[1]); // false

user2.urls.linkedin = '';
console.log(user.urls.linkedin === user2.urls.linkedin); // false

console.log(user);
/*
{
  name: 'Seongil',
  urls: {
    linkedin: 'http://linkedin.com/in/modolee',
    blog: ['http://velog.io/@modolee', 'https://steemit.com/@modolee'],
    github: 'http://github.com/modolee'
  }
}
*/

console.log(user2);
/*
{
  name: 'modolee',
  urls: {
    linkedin: '',
    blog: ['http://velog.io/@modolee', 'https://medium.com/@modolee'],
    github: 'http://github.com/modolee'
  }
}
*/

• 객체를 JSON 문법으로 표현 된 문자열로 전환했다가 다시 JSON 객체로 전환하면 새로운 객체가 생성
• 모든 데이터를 새롭게 할당한 것과 같은 효과가 있음
• 다만 숨겨진 프로퍼티인 proto 와 getter/setter 등과 같이 JSON으로 변경할 수 없는 프로퍼티는 무시 됨
• httpRequest로 받은 데이터를 저장한 객체를 복사할 때 등 순수한 정보만 다룰 때 유용
• Function은 복사가 안됨
• 결과 확인

undefined와 null

• undefined, null 모두 '없음'을 나타내는 값
• 의미는 같지만 미묘한 차이가 있음

자동으로 undefined를 부여하는 경우

let a;
console.log(a); // (1) undefined. 값을 대입하지 않은 변수에 접근

let obj = { a: 1 };
console.log(obj.a); // 1
console.log(obj.b); // (2) undefined. 존재하지 않는 프로퍼티에 접근
// console.log(b); // Uncaught ReferenceError: b is not defined. 이건 전혀 다른 경우

const func = () => {};
const c = func(); // (3) return 값이 없으면 undefined를 반환한 것으로 간주
console.log(c); // undefined

1. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접급할 때
2. 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
3. return 문이 없거나 호출되지 않는 함수의 실행 결과

undefined와 배열

• 값을 대입하지 않은 변수의 경우 undefined를 부여했지만, 배열에서는 조금 특이하게 동작

let arr1 = [];
arr1.length = 3;
console.log(arr1); // [empty x 3]

let arr2 = new Array(3);
console.log(arr2); // [empty x 3]

let arr3 = [undefined, undefined, undefined];
console.log(arr3); // [undefined, undefined, undefined]

• 배열에서는 값을 대입하지 않을 경우, 공간은 확보하지만 어떤 값도 할당되지 않음
• 결과 확인

빈 요소(Empty)를 포함한 배열의 순회

• 빈 요소는 순회와 관련 된 많은 배열 메서드들의 순회 대상에서 제외

let arr1 = [undefined, 1];
let arr2 = [];
arr2[1] = 1;

arr1.forEach((value, index) => { console.log(value, index); }); // undefined 0 / 1 1
arr2.forEach((value, index) => { console.log(value, index); }); // 1 1

console.log(arr1.map((value, index) => { return value + index })); // [NaN, 2]
console.log(arr2.map((value, index) => { return value + index })); // [empty, 2]

console.log(arr1.filter((value) => { return !value; })); // [undefined]
console.log(arr2.filter((value) => { return !value; })); // []

console.log(arr1.reduce((accumulator, value, index) => { return accumulator + value + index; }, '')); // undefined011
console.log(arr2.reduce((accumulator, value, index) => { return accumulator + value + index; }, '')); // 11

• 명시적으로 undefined를 대입한 경우에는 값으로 취급해서 순회
• 대입하지 않은 경우에는 값이 없는 것으로 취급하여 순회에서 제외
• 결과 확인

배열에 대한 편견

• 배열은 무조건 length 프로퍼티의 개수만큼 빈 공간을 확보하고 각 공간에 인덱스를 이름으로 지정할 것이라고 생각. 당연히 이렇게 동작할 것이라고 생각 했음
• 실제로는 객체와 마찬가지로 특정 인덱스에 값을 지정할 때 비로소 빈 공간을 확보하고 인덱스를 이름으로 지정하고 데이터의 주소 값을 저장

undefined의 구분

사용자가 명시적으로 부여한 경우

• 실존 데이터. undefined 라는 데이터 형의 값
• 프로퍼티나 배열의 요소는 고유의 키 값(프로퍼티 이름)이 실존하게 되어 순회의 대상이 됨

비어있는 요소에 접근하려 할 때 반환하는 경우

• 실존하지 않는 데이터. 문자 그대로 값이 없음
• JavaScript 엔진이 하는 수 없이 undefined를 반환
• 해당 프로퍼티 또는 배열의 키 값 자체가 존재하지 않음을 의미

undefined의 자동 할당의 실제 동작

• 입문서에서는 값을 대입하지 않은 변수를 선언할 때 자동으로 변수에 undefined를 할당한다고 설명 됨
• 실제는 변수 선언할 때는 아무 것도 할당되지 않고 끝나며, 변수에 접근할 때 JavaScript 엔진이 어쩔 수 없이undefined를 반환

코드 예시

• 그러면 실제로 명시적으로 부여한 경우와 JavaScript 엔진이 하는 수 없이 반환하는 경우의 undefined는 다르게 취급되는 것인가? 를 확인하기 위한 코드

let a;
let b = undefined;

console.log(a); // undefined
console.log(a == b); // true
console.log(a === b); // true

• 실제로 다르게 취급 하지는 않음
• 결과 확인

undefined와 null의 비교

const n = null;
console.log(typeof n); // object

console.log(n == undefined); // true
console.log(n == null); // true
console.log(n === undefined); // false
console.log(n === null); // true

• 결과 확인
• null의 타입이 object로 나오는 것은 JavaScript의 버그
• '없음'을 표현 하고자 할 때는 null을 사용
• 사용자가 표현한 '없음'(null) 인지 확인하고자 할 때는 === 연산자를 사용해서 비교

정리

• 데이터 타입
  • 기본형 : 불변값
  • 참조형 : 가변값
• 변수 : 변경 가능한 데이터가 담길 수 있는 공간
• 식별자 : 변수의 이름
• 변수 선언
  • 메모리의 빈 공간에 식별자 저장
  • 그 공간의 값으로 undefined를 할당
• 변수에 기본형 데이터 할당
  • 별도의 공간에 데이터 저장
  • 그 공간의 주소를 변수의 값 영역에 할당
• 변수에 참조형 데이터 할당
  • 참조형 데이터 내부 프로퍼티들을 위한 변수 영역을 별도로 확보
  • 확보 된 주소를 변수에 연결
  • 앞서 확보한 변수 영역에 각 프로퍼티의 식별자를 저장
  • 각 데이터를 별도의 공간에 저장하고 그 주소를 식별자들과 매칭
• 참조형 데이터를 불변값으로 사용하기 위해서는 '깊은 복사'가 필요
• '없음'을 나타내는 값
  • undefined : 어떤 변수에 값이 존재하지 않을 경우 반환하는 값
  • null : 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값
  • 명시적으로 '없음'을 표현하기 위해 undefined을 사용하는 것은 지양

참고

• 코어 자바스크립트 - 정재남 지음
• Symbol
  • 자바스크립트의 자료형
  • 7번째 타입 심볼(Symbol)
  • [Javascript] Symbol 에 대해서
• ES2015(ES6) Map, Set, WeakMap, WeakSet
• The Top 6 JavaScript Features From ES2020