코어 자바스크립트 책을 읽고 배운 내용을 바탕으로 작성되었다.
📌 Data type
Primitive type
- Number
- String
- Boolean
- null
- undefined
- symbol
Reference type
- object
- array
- function
- date
- regexp
- map, weekmap
- set, weakset
❗ 자바스크립트는 동적타입언어
- 자료형을 컴파일 시 정하지 않고 런타임 시 결정된다.
- 숫자의 경우, 메모리 공간을 확보할 때 정수형인지 부동소수형인지 구분하지 않고 무조건 64비트(8바이트)를 확보한다.
- 정수만을 위한 데이터 타입이 없고, 모든 수를 64바이트 실수로 처리한다.
❗ 변수 선언과 데이터 할당
- 변수: 데이터를 저장하는 임시 기억 공간
- 메모리 영역에는 변수 영역과 데이터 영역이 있다.
- 메모리에는 byte 단위로 주소가 지정되어 있다.
const a = 'abc';- 변수 영역에 변수 a를 위한 공간 확보, 식별자 저장
- 그 공간에 자동적으로 undefined 할당
- 데이터 영역의 빈 공간에 문자열 'abc' 저장
- 문자열 'abc'가 저장된 메모리의 시작 주소를 변수 a의 메모리 공간에 복사하여 저장
📙 기본 자료형과 참조 자료형의 차이점
💡 불변값과 가변값
불변값
- 기본형은 불변값
immutable value이다. - 이때 불변하다는 것은 메모리 공간 영역에서의 변경이 불가능하다는 것이다. 재할당은 가능하다.
let str = "Hello";
str = "world";- 먼저 메모리의 데이터 영역에 문자열 'Hello’가 생성되고 식별자(변수명) str의 메모리 공간에 문자열 ‘Hello’가 저장된 메모리의 주소를 저장한다.
- 그리고 다음 코드가 실행되면 이전에 생성된 문자열 ‘Hello’을 수정하는 것이 아니라 새로운 문자열 ‘world’를 메모리에 생성하고 식별자 str의 메모리 공간에 시작주소를 저장한다.
- 이때 문자열 ‘Hello’와 ‘world’는 모두 메모리에 존재하고 있다. 변수 str은 문자열 ‘Hello’를 가리키고 있다가 문자열 ‘world’를 가리키도록 변경되었을 뿐이다.
- 즉, 기본 자료형은 메모리 공간에 한 번 생성되면 그 값은 바뀌지 않는다.
가변값
- 참조형은 가변값
mutable value이다. - 기본 자료형과 달리
property영역이 별도로 존재한다. - 프로퍼티의 값은 다른 값으로 얼마든지 바꿀 수 있기 때문에 참조형 데이터는 불변하지 않다.
const obj1 = { c: 10, d: 'ddd', };
const obj2 = obj1; // obj2는 obj1과 같은 메모리 주소 참조
obj2.c = 20;
console.log(obj2.c); // 20
console.log(obj1.c) // 20
// obj1과 obj2가 참조하고 있는 메모리의 주소가 같기 때문에 같은 프로퍼티 값을 같는다.const obj1 = { c: 10, d: 'ddd', };
const obj2 = obj1; // // obj2는 obj1과 같은 메모리 주소 참조
obj2 = { c: 20, d: 'ddd', }; // 새로운 객체를 생성하여 변수 obj2에 대입
// obj2는 새로운 객체의 시작 주소값을 저장
// 변수 obj1와 obj2는 서로 다른 메모리 주소를 참조- '가변'은 참조형 데이터 자체를 변경하는 경우가 아니라 그 내부의 프로퍼티를 변경할 때만 성립된다.
💡 Pass by Value & Pass by Reference
- 데이터 유형에 따라 함수에게 인수를 전달하는 두가지 방법
Pass by Value (값의 복사에 의한 전달)
- pass by value는 인자로 넘기는 값을 복사하여 함수에 전달하는 방식이다. 이는 기본형 데이터를 인자로 전달할 때 일어난다.
- 값을 복사하여 전달했기 때문에 함수 실행 도중 인자의 값을 바꾸더라도 변경 사항이 원래의 데이터에 적용되지 않는다.
Pass by Reference (참조에 의한 전달)
- pass by reference는 인자로 넘기는 값의 메모리 상의 주소를 함수에 전달한다. 이는 참조형 데이터를 인자로 전달할 때 일어난다.
- 메모리 상의 주소를 전달했기 때문에 함수 실행 도중 해당 값에 대한 수정 사항이 원래의 데이터에 그대로 적용된다.
📌 불변 객체 만들기
📙 얕은 복사
const copyObject = function(target){
let result = {};
for (let prop in target){
result[prop] = target[prop];
}
return result;
}- 기존 객체의 프로퍼티와 값들을 복사해서 새로운 객체를 만든다.
- 하지만 중첩된 객체에서 참조형 데이터에 저장된 프로퍼티를 복사할 때 주소값만 복사하게 된다.
- 따라서, 만약 객체의 어떤 프로퍼티의 값이 참조형 데이터이고, 그 데이터의 프로퍼티 값을 변경하면 원본 객체도 이에 따라 변경된다.
📙 깊은 복사
- 객체의 프로퍼티 중에서 그 값이 기본형 데이터일 경우에 그대로 복사하고, 참조형 데이터일 경우 다시 내부의 프로퍼티의 값들을 복사해야 한다.
const copyObjectDeep = function(target){
let result = {};
if (typeof target === 'object' && target !=== null){
for (let prop in target){
result[prop] = copyObjectDeep(target[prop]);
}
else{
result = target;
}
return result;
}📌 undefined과 null
undefined
- 정의되지 않은 값을 나타냄.
- 변수가 선언되었지만, 값을 할당하지 않았을 때 자바스크립트 엔진에 의해 undefined로 초기화된다.
undefined를 반환하는 경우- 선언되었지만, 값을 대입하지 않은 변수에 접근할 때
- 존재하지 않는 객체의 프로퍼티에 접근할 때
- return 문이 없거나 호출되지 않는 함수의 실행 결과
null
- 값이 없음을 나태냄.
- 의도적으로 변수에 값이 없다는 것을 명시할 때 사용
