원시 자료형과 참조 자료형
원시 자료형 (primitive data type) : number, string, boolean 등
// 원시 자료형(primitive type): number, string, boolean, undefined, null
42, 'string', true, undefined, null
참조 자료형 (reference data type) : 배열, 객체, 함수 등
// 참조 자료형(reference type)
[0, 1, 2] // 배열
{name: 'kimcoding', age: 45} // 객체
function sum (x, y) { return x + y } // 함수
얕은 복사, 깊은 복사
- 원시 자료형 : 할당한 변수를 다른 변수에 할당하면 값 자체의 복사가 일어난다. (값 자체가 복사된다는 것은 둘 중 하나의 값을 변경해도 다른 하나에는 영향을 미치지 않는다는 것을 의미)
- 참조 자료형 : 임의의 저장공간에 값을 저장하고 그 저장공간을 참조하는 주소를 메모리에 저장하기 때문에 다른 변수에 할당할 경우 값 자체가 아닌 메모리에 저장되어 있는 주소가 복사된다.
💡 얕은 복사 ) 중첩된 구조 중 한 단계까지만 복사
Object.assign, slice , spread syntax문법 등과 같은 기존 배열을 새로운 배열로 만든 것을
다른 변수에 저장한다면 다른 주소 값을 가질 수 있게 된다.
위의 함수,문법을 적용해도 복사가 안되는 경우 : 참조 자료형 내부에 참조 자료형이 중첩된 구조는 복사할 수 없다.
💡 깊은 복사 ) 참조 자료형 내부에 중첩되어 있는 모든 참조 자료형을 복사하는 것
// javascript 내부적으로는 깊은 복사를 수행할 수 있는 방법이 없다.
그러나 다른 문법을 응용하면 같은 결과물을 볼 수 있음
다른 문법 : JSON.stringify()와 JSON.parse()
1. JSON.stringify()는 참조 자료형을 문자열 형태로 변환하여 반환
2. JSON.parse()는 문자열의 형태를 객체로 변환하여 반환
++ 먼저 중첩된 참조 자료형을 JSON.stringify()를 사용하여 문자열의 형태로 변환하고,
반환된 값에 다시 JSON.parse()를 사용하면, 깊은 복사와 같은 결과물을 반환
예시 )
const arr = [1, 2, [3, 4]];
const copiedArr = JSON.parse(JSON.stringify(arr));
위의 깊은 복사가 안되는 예외의 경우 )
완전한 깊은 복사를 반드시 해야 하는 경우, node.js 환경에서 외부 라이브러리인 lodash,또는 ramda를 사용하면 된다.
뜬금없는 가비지 콜렉터 알아보기
- JavaScript 엔진은 사용하지 않는 값을 자동으로 메모리에서 삭제한다. 이게 가비지 콜렉터라고 한다.
- 가비지 콜렉터가 어느 시점에 진행되는지는 예측할 수 없다.
let num = 20;
num = 30
=> console.log(num) => 30
이처럼 num에 30을 재할당 하면, 남아있던 20은 가비지 콜렉터에 의해 사용하지 않는 값을 자동으로 메모리에서 삭제한다.
'Front end > JavaScript' 카테고리의 다른 글
[ javascript ] - OOP 개념 정리 (0) | 2023.03.22 |
---|---|
[ javascript ] - class /instance (0) | 2023.03.22 |
[ javascript ] - 클로저 알아보기 (0) | 2023.03.22 |
[ javascript ] - 스코프 알아보기 (0) | 2023.03.22 |
[ javascript ] - 객체 알아보기 (0) | 2023.03.22 |
원시 자료형과 참조 자료형
원시 자료형 (primitive data type) : number, string, boolean 등
// 원시 자료형(primitive type): number, string, boolean, undefined, null
42, 'string', true, undefined, null
참조 자료형 (reference data type) : 배열, 객체, 함수 등
// 참조 자료형(reference type)
[0, 1, 2] // 배열
{name: 'kimcoding', age: 45} // 객체
function sum (x, y) { return x + y } // 함수
얕은 복사, 깊은 복사
- 원시 자료형 : 할당한 변수를 다른 변수에 할당하면 값 자체의 복사가 일어난다. (값 자체가 복사된다는 것은 둘 중 하나의 값을 변경해도 다른 하나에는 영향을 미치지 않는다는 것을 의미)
- 참조 자료형 : 임의의 저장공간에 값을 저장하고 그 저장공간을 참조하는 주소를 메모리에 저장하기 때문에 다른 변수에 할당할 경우 값 자체가 아닌 메모리에 저장되어 있는 주소가 복사된다.
💡 얕은 복사 ) 중첩된 구조 중 한 단계까지만 복사
Object.assign, slice , spread syntax문법 등과 같은 기존 배열을 새로운 배열로 만든 것을
다른 변수에 저장한다면 다른 주소 값을 가질 수 있게 된다.
위의 함수,문법을 적용해도 복사가 안되는 경우 : 참조 자료형 내부에 참조 자료형이 중첩된 구조는 복사할 수 없다.
💡 깊은 복사 ) 참조 자료형 내부에 중첩되어 있는 모든 참조 자료형을 복사하는 것
// javascript 내부적으로는 깊은 복사를 수행할 수 있는 방법이 없다.
그러나 다른 문법을 응용하면 같은 결과물을 볼 수 있음
다른 문법 : JSON.stringify()와 JSON.parse()
1. JSON.stringify()는 참조 자료형을 문자열 형태로 변환하여 반환
2. JSON.parse()는 문자열의 형태를 객체로 변환하여 반환
++ 먼저 중첩된 참조 자료형을 JSON.stringify()를 사용하여 문자열의 형태로 변환하고,
반환된 값에 다시 JSON.parse()를 사용하면, 깊은 복사와 같은 결과물을 반환
예시 )
const arr = [1, 2, [3, 4]];
const copiedArr = JSON.parse(JSON.stringify(arr));
위의 깊은 복사가 안되는 예외의 경우 )
완전한 깊은 복사를 반드시 해야 하는 경우, node.js 환경에서 외부 라이브러리인 lodash,또는 ramda를 사용하면 된다.
뜬금없는 가비지 콜렉터 알아보기
- JavaScript 엔진은 사용하지 않는 값을 자동으로 메모리에서 삭제한다. 이게 가비지 콜렉터라고 한다.
- 가비지 콜렉터가 어느 시점에 진행되는지는 예측할 수 없다.
let num = 20;
num = 30
=> console.log(num) => 30
이처럼 num에 30을 재할당 하면, 남아있던 20은 가비지 콜렉터에 의해 사용하지 않는 값을 자동으로 메모리에서 삭제한다.
'Front end > JavaScript' 카테고리의 다른 글
[ javascript ] - OOP 개념 정리 (0) | 2023.03.22 |
---|---|
[ javascript ] - class /instance (0) | 2023.03.22 |
[ javascript ] - 클로저 알아보기 (0) | 2023.03.22 |
[ javascript ] - 스코프 알아보기 (0) | 2023.03.22 |
[ javascript ] - 객체 알아보기 (0) | 2023.03.22 |