// STEP01. 쭉 선언을 먼저 해볼께요.
var a = 10; //기본형
var obj1 = { c: 10, d: 'ddd' }; //참조형
// STEP02. 복사를 수행해볼께요.
var b = a; //기본형
var obj2 = obj1; //참조형
// 값 변경
b = 15;
obj2.c = 20;기본형과 참조형의 변수 복사 시 절차의 차이점
// 기본형 변수 복사의 결과는 다른 값!
a !== b;
// 참조형 변수 복사의 결과는 같은 값!(원하지 않았던 결과😭)
obj1 === obj2;! 해결방법 : 복사 이후 값 변경(객체 자체를 변경)
객체의 프로퍼티(=속성)에 접근해서 값을 변경하는 것이 아니라
객체 자체를 변경하는 방식으로 값 변경
//기본형 데이터
var a = 10;
var b = a;
//참조형 데이터
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;
b = 15;
obj2 = { c: 20, d: 'ddd'}; // > 이렇게!-> obj2 변수는 참조형 데이터이고, 참조형 데이터의 값을 변경한 것임에도 불구하고
이전 케이스와는 다르게 obj1과는 데이터 메모리 영역의 값이 달라졌다
참조형 데이터가 ‘가변값’이라고 할 때의 ‘가변’은 참조형 데이터 자체를 변경할 경우가 아니라,
그 내부의 프로퍼티를 변경할 때 성립한다고 할 수 있다 👍
But, 이 방법도 최선은 아니다
새로운 객체를 만들기 위해 변경할 필요가 없는 프로퍼티까지 하드코딩으로 입력
⇒ 만일 이러한 속성이 10개라면?..
- 더 나은 방법 : 얕은 복사
이 방법의 문제 : 바로 아래 단계의 값만 복사하기 때문에
중첩된 객체의 경우, 참조형 데이터가 저장된 프로퍼티를 복사할 땐 주소값만 복사
그래서 조금 더 나은 방법 ~
깊은 복사 : 내부의 모든 값들을 하나하나 다 찾아서 모두 복사하는 방법
깊은 복사를 잘 적용하는 방법이 바로 재귀적 수행!
재귀적 수행?
⇒ 함수나 알고리즘이 자기 자신을 호출하여 반복적으로 실행되는 것을 말한다
var copyObjectDeep = function(target) {
var result = {};
if (typeof target === 'object' && target !== null) {
for (var prop in target) {
result[prop] = copyObjectDeep(target[prop]);
}
} else {
result = target;
}
return result;
}-> 잘 모르겠으면 하나하나 찍어보면서 이해하기
//결과 확인
var obj = {
a: 1,
b: {
c: null,
d: [1, 2],
}
};
var obj2 = copyObjectDeep(obj);
obj2.a = 3;
obj2.b.c = 4;
obj2.b.d[1] = 3;
console.log(obj);
console.log(obj2);=> 깊은 복사 완벽 구현!
함수 선언문, 함수 표현식
// 함수 선언문. 함수명 a가 곧 변수명
// function 정의부만 존재, 할당 명령이 없는 경우
function a () { /* ... */ }
a(); // 실행 ok
// 함수 표현식. 정의한 function을 별도 변수에 할당하는 경우
// - 익명함수표현식 : 변수명 b가 곧 변수명(일반적 case에요)
var b = function () { /* ... */ }
b(); // 실행 ok함수 선언문을 주의해야 하는 이유
함수 선언문과 함수 표현식은 hoisting 과정에서 극명한 차이가 난다
함수 선언문으로 짠 코드는 기존의 위쪽 함수에 영향을 미치고,
함수 표현식으로 짠 코드는 선언부만 위로 올라갈 뿐 표현식 이후 코드만 영향을 받기 때문!
협업을 많이 하고, 복잡한 코드일 수록, 전역 공간에서 이루어지는 코드 협업일 수록,
함수 표현식을 활용하는 습관을 들이도록~!
이론만 보면 자바스크립트는 은근히 재밌는 구석이 있다
개발 공부