6주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2

JS 데이터 객체

다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

Object - JavaScript | MDN

//참조형, 메모리의 주소만 참조해서 사용
const userAge = {
  //key: value
  name: "H.E",
  age: 21,
};
const userEmail = {
  name: "H.E",
  email: "hyeone@gmail.com",
};
const target = Object.assign(userAge, userEmail);
//Object라는 전체영역에서 사용할 수 있는 전역객체 사용, assign은 실제 데이터객체 사용X(정적메소드)
console.log(target);
console.log(userAge); //원본객체에 userEmail이 합쳐졌음
console.log(target === userAge); //true
//같은 메모리를 바라보고 있기 때문에 true반환
const target2 = Object.assign({}, userAge, userEmail);
//Object라는 전체영역에서 사용할 수 있는 전역객체 사용, assign은 실제 데이터객체 사용X(정적메소드)
//userAge는 첫번째 인수자리에 있지 않기 때문에 대상객체가 아니고 target2라니 새로운 객체가 만들어짐
console.log(target2);
console.log(target2 === userAge); //false
const a = { k: 123 };
const b = { k: 123 };
console.log(a === b); //false
//생긴것은 똑같으나 다른 객체

const user = {
  name: "H.E",
  age: 21,
  email: "hyeon@gmail.com",
};
const keys = Object.keys(user);
//Object.keys에 정적메소드를 통해서 키들만 추출되어 새로운 배열 데이터 생성
console.log(keys); //['name', 'age', 'email']
console.log(user["email"]); //hyeon@gmail.com
console.log(user.email); //hyeon@gmail.com
const values = keys.map((key) => user[key]);
//배열 map 메소드를 사용해 각 value를 모아 values라는 새로운 배열 생성
//user[key]를 user.key로 하면 undefined이 뜸
console.log(values); //['H.E', 21, 'hyeon@gmail.com']

---

JS 데이터 구조 분해 할당

const user = {
  //key: value
  name: "H.E",
  age: 21,
  email: "hyeone@gmail.com",
  address: "Korea",
};
const { name, age, email: em, address = "USA" } = user;
//ex) user.address
//객체 데이터를 구조분해해서 각각의 변수로 만들어서 활용 할 수 있음
//비어있다면 할당연산자를 이용해 지정해 줄 수 있음. address = "USA"
console.log(`이름: ${name}`); //이름: H.E
console.log(`${name} 나이: ${age}`); //H.E 나이: 21
console.log(`${name} 이메일 주소: ${em}`);
//H.E 이메일 주소: hyeone@gmail.com. email이라 쓰면 오류
console.log(address);
//Korea

const fruits = ["Apple", "Banana", "Cherry"];
const [, b, c, d] = fruits;
//Apple은 추출X
console.log(b, c, d); //Banana Cherry undefined

---

JS 데이터 전개 연산자

//전개 연산자(Spread)
const fruits = ["Apple", "Banana", "Cherry", "Orange"];
console.log(fruits); //(3) ['Apple', 'Banana', 'Cherry']
console.log(...fruits); //Apple Banana Cherry
//문자데이터 형태로 출력됨
//...가 전개 연산자 기호

function toObject(a, b, ...c) {
  //여기서 c는 나머지 인수를 다 받음 rest parameter라고 불림
  return {
    //객체데이터 반환
    a: a, //a: a라는 매개변수
    b: b,
    c: c,
  };
}
const toObject2 = (a, b, ...c) => ({ a, b, c });
//함수부분을 축약형으로 작성. 위쪽과 똑같은 결과가 나옴

console.log(toObject(...fruits)); //c: (2) ['Cherry', 'Orange']
console.log(toObject2(...fruits));
console.log(toObject(fruits[0], fruits[1], fruits[2]));
//같은 결과가 나옴 하지만 불편

---

JS 데이터 전개 불변성

원시데이터

• String
• Number
• Boolean
• undefined
• null

참조형 데이터

• Object
• Array
• Function

let a = 1;
let b = 4;
console.log(a, b, a === b); //1 4 false
//메모리 주소가 다르기때문에 불일치
b = a;
console.log(a, b, a === b); //1 1 true
//b가 a의 주소를 바라보기 때문에 일치
a = 7;
console.log(a, b, a === b); //7 1 false
//a의 주소지가 바뀜. 그렇기에 a와 b 불일치
let c = 1;
console.log(b, c, b === c); //1 1 true
//c가 새로운 메모리에 할당되는 것이 아닌 기존에 메모리에 있는 주소
//즉 처음 a주소를 할당받아 b와 c가 일치

let d = { k: 1 };
let e = { k: 1 };
console.log(d, e, d === e); //{k: 1} {k: 1} false
//같은 값이지만 다른 메모리 주소를 사용 위에 원시데이터와 다른것을 확인 할 수 있음
//즉 새로운 값을 만들때마다 새로운 메모리 주소에 할당되는 구조를 가지고 있음
d.k = 7;
e = d;
console.log(d, e, d === e); //{k: 7} {k: 7} true
d.k = 2;
e = d;
console.log(d, e, d === e); //{k: 2} {k: 2} true
//같은 메모리 주소를 사용하기 때문에 e가 바뀌면서 d의 값도 바뀌는 것을 확인할 수 있음
let f = e;
console.log(d, e, f, d === f); //{k: 2} {k: 2} {k: 2} true
//f가 e의 주소가 할당되어 d,e,f가 모두 일치
f.k = 3;
console.log(d, e, f, d === f);  //{k: 3} {k: 3} {k: 3} true
//f의 k를 바꾸었지만 d,e,f가 다 바뀐것을 확인할 수 있음

---

JS 데이터 얕은 복사와 깊은 복사

참조형 데이터를 복사할때 얕은 복사로도 충분히 문제가 없다면 얕은복사(..., .assign 등)를 이용하고 참조형 데이터가 내부에 또다른 참조형 데이터를 가지고 있다면 깊은 복사를 통해서 복사를 하는 것이 안전

const user = {
  //key: value
  name: "H.E",
  age: 21,
  emails: ["hyeone@gmail.com"],
  address: "Korea",
};
const copyUser = user;
console.log(copyUser === user); //true
//같은 메모리 주소를 바라보고 있음
const copyUser2 = Object.assign({}, user);
console.log(copyUser2 === user); //false
//다른 메모리 주소를 바라보고 있음
const copyUser3 = { ...user };  //얕은 복사
console.log(copyUser3 === user); //false
//새로운 객체에 값을 넣은것이기때문에 다른 메모리 주소를 바라보고 있음
const copyUser4 = _.cloneDeep(user); //깊은 복사, lodash사용
console.log(copyUser4 === user); //false

user.age = 22;
console.log("user", user); //age:22
console.log("copyUser", copyUser); //age:22
//같은 메모리 주소를 바라보고 있기 때문에 변경한 점이 따라 바뀜

user.emails.push("he@naver.com");
console.log(user.emails === copyUser3.emails);  //true
//emails은 배열, 배열도 참조형 데이터
//그렇기에 복사된게 아니고 그대로 같은 메모리 주소만 공유하는 것
console.log(user.emails === copyUser4.emails);  //false