koans 헷갈리는 예제
기본(원시)자료형 할당 , 객체(참조)자료형 할당 비교
-> 기본 자료형 할당 (값 복사)
설명
let a = 'a'; // 기본 자료형
let b = a; // 기본 자료형 값 복사! -> 깊은 복사(값 자체를 복사 -> 독립적으로 작동함)
a === b; // true
a; // 'a'
b; // 'a'
a = 'c'; // a 변수에 'c'라는 값 할당
b; // 'a' 출력됨. -> a = 'c' 를 할당하기 이전에 a변수의 값을 b에 할당했으므로 (값 복사)!-> 객체 자료형 할당
설명
let arr = [1,2,3]
let arr2 = arr; // arr2 와 arr은 같은 주소를 바라보고 있다.(즉 arr 복사가 아니라 arr의 주소값을 복사했다는 의미로 보자) -> 얕은 복사
arr === arr2 // true;
arr.push(4); // arr가 바라보는 객체의 주소의 배열 뒤에 요소 4를 추가
arr; // [1,2,3,4];
arr2; // [1,2,3,4]; -> arr 과 arr2가 바라보는 주소가 같아서 arr의 주소의 배열이 변하면 같이 변하게 되는것이다.
<------------>
let arr = [1,2,3];
let arr2 = arr; // 같은 주소 바라봄(주소값을 복사함) -> 얕은 복사
arr === arr2 // true;
arr2; // [1,2,3];
arr = [4,5,6]; // arr에 새로운배열(주소값변경)을 할당!
arr; // [4,5,6]; arr에 새로운배열을 할당한 값이 나옴.
arr2; // [1,2,3]; // let arr2 = arr;일때 arr이 바라보던 주소값을 복사했던것이므로 arr2는 그대로 바라보고 있다.깊은 복사 && 얕은 복사
얕은 복사 와 깊은 복사 란??
얕은 복사 : 주소값을 복사하는 것이라 변수이름만 다를뿐 같은 주소를 바라보고 있어서 한쪽을 변경하면 주소의값이 변하기 때문에 같은 주소를 바라보니 두 변수가 변해버린 같은 주소값을 바라본다.
깊은 복사 : 값 자체를 복사하는 것이라 만약 배열을 깊은 복사 하면 두 배열이 완전히 독립적으로 작동한다.
전개 연산자를 통한 객체의 깊은 복사
-> 설명
let obj ={a: 1,b: 2};
let obj2 = {...obj}; // 전개 연산자를 통한 깊은복사(값 자체를 복사 -> 독립적으로 작동)
obj === obj2; // false -> 주소값을 복사 했다면(얕은 복사) true이지만 얼핏보기엔 같아보여도 주소값이 다르면 다른 값이다.
obj.c = 3; // obj의 주소값에 c:3 속성 추가.
obj; // {a:1, b:2, c:3}
obj2; // {a:1, b:2} -> 이전에 let obj = {a:1, b:2} 일때 값 자체를 복사 하였기때문에 독립적으로 작동하였다.객체 얕은 복사
-> 설명
let obj = {a:1, b:2};
let obj2 = obj; // 얕은 복사 -> 주소값을 복사하는 것으로 같은 주소를 바라보는 두 변수일 뿐
obj === obj2; // true -> 같은 주소값을 가지므로
obj.c = 3; // obj의 주소값에 c: 3 속성 추가.
obj; // {a:1, b:2, c:3}
obj2; // {a:1, b:2, c:3} -> 같은 주소를 바라보고있으므로 주소값이 같이 변한다.객체를 속성으로 가지는 객체를 깊은복사를 하면 내부 속성의 객체는 어떤 복사가 되었을까???
-> 설명
let obj = {a: {c: 2, d: 3}, b: 1};
let obj2 = {...obj}; // 전개 연산자를 통한 깊은 복사 -> 값 자체를 복사 -> 독립적으로 작동
obj === obj2; // false -> 주소가 다르기때문
obj.name = 'hyo'; // obj객체에 name: 'hyo' 속성 추가.
obj; // {a: {...}, b: 1, name: 'hyo'}
obj2; // {a: {...}, b: 1} -> 주소값이 다른 값을 복사 했기때문에 즉 깊은 복사하였기때문에 obj의 주소의 값이 추가되어도 obj2에는 아무런 영향이 없다. -> 독립적 작동
<---------->
// 하지만 obj의 key중에 a라는 속성의 값인 객체는 어떤 복사 일까?
obj.a; // {c: 2, d: 3}
obj2.a; // {c: 2, d: 3}
obj.a === obj2.a; // true -> 주소값이 복사됨
// obj와 obj2는 깊은 복사를 하여 값을 복사하였지만,
// 내부속성인 키의 값이 객체인 obj.a 와 obj2.a는 얕은 복사가 되어 주소값이 복사가 되었다.
obj.a.e = 4; // obj.a 객체에 e: 4 라는 속성 추가!
obj.a; // {c: 2, d: 3, e: 4}
obj2.a; // {c: 2, d: 3, e: 4} -> obj.a의 주소를 같이 바라보기에 같이 변하였다.
rest 문법 (나머지 매개변수)로 쓰이는 arguments
구 버전의 자바스크립트에서 가변 매개변수 함수를 구현할 때는 배열 내부에서 사용할 수 있는 특수한 변수인 arguments 를 활용한다.
arguments는 매개변수와 관련된 여러 정보를 확인할 수 있고 배열과 비슷하게 사용할 수 있다.
arguments -> 유사 배열이지만 배열이 아닌 객체이다.
-> 설명
function A() {
return arguments // 나머지 매개변수로 쓰이는 arguments 변수
}
A('a','b','c'); //Arguments(3) ['a', 'b', 'c', callee: ƒ, Symbol(Symbol.iterator): ƒ] -> 유사 배열이지만 객체이다.
typeof A('a','b','c'); // 'object'
Array.isArray(A('a','b','c')); // false
A(1,2,3); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
A([1,2,3]) // Arguments [Array(3), callee: ƒ, Symbol(Symbol.iterator): ƒ]구조 분해 할당
배열 구조 분해 할당
-> 설명
const arr = ['a','b','c','d','e'];
const [first, second] = arr;
first; // 'a' -> first 변수에 arr 의 0번째 인덱스값 할당됨
second; // 'b' -> second 변수에 arr 의 1번째 인덱스값 할당됨
const [start, ...rest] = arr;
start; // 'a' -> start 변수에 arr의 0 번째 인덱스값 할당됨
rest; // ['b', 'c', 'd', 'e'] -> 나머지 매개변수(...) 를 사용함 으로써 start변수가 가지는 값 이후의 배열값들이 나옴.
객체 구조 분해 할당
-> 설명
const obj = {name: 'hyo', age: 29, height: 179};
const {name} = obj; // 객체 구조 분해 할당 obj 객체에서 변수를 추출한다. name 속성 그대로 꺼낸다.
name; // 'hyo'
const {height} = obj; // 객체에서 변수를 추출함. -> height 속성 그대로 꺼낸다.
height; // 179
-> 설명
const obj = {name: 'hyo', age: 29, height: 179};
const {name, ...args} = obj; // name속성 그대로 꺼내고, ...args -> 나머지 매개변수를 사용해 객체를 빼준다.
name; // 'hyo'
args; // {age: 29, height: 179}
-> 설명
const obj = {name: 'hyo', age: 29, height: 179};
function A({name, height: value, age}) { // name 속성을 변수로 height 속성값을 value라는 변수로 age 속성을 변수로 추출한다.
return `${name}은 나이는 ${age}이고 키는 ${value}이다.`
}
A(obj); // 'hyo은 나이는 29이고 키는 179이다'위와 거의 같은 코드이지만 , 변수만 다르게 해보았다.
개발 재밌다