21일차

📦

21일차

 

Part 4. JavaScript Level up

Ch 1. JS 데이터

 

---

 

Ch 1. JS 데이터

 

 

주제

 

• JS 문법

 

 

주요 내용

 

 🔗 객체 

 

정적(static) 메소드: prototype이 붙어 있지 않는 메소드 => 실제 데이터 객체에 직접 사용할 수 없다.

 

• object.assign(target, sources): 하나 이상의 출처 객체(sources)로부터 대상 객체(target)로 속성을 복사

const userAge = {
  // key: value
  name: "Yujin",
  age: 23,
};
const userEmail = {
  name: "Yujin",
  email: "yujinny00@gmail.com",
};

const target = Object.assign({}, userAge);
console.log(target);
console.log(userAge);
console.log(target === userAge);

// 서로 다른 메모리 주소를 바라 봄.
const a = { k: 123 };
const b = { k: 123 };
console.log(a === b);

 

 

• object.keys(obj): key 들만 추출하여 새로운 배열로 변환

const user = {
  name: "Yujin",
  age: 23,
  email: "hyjinny00@gmail.com",
};

const keys = Object.keys(user);
console.log(keys);
// ['name', 'age', 'email']

console.log(user["email"]);

const values = keys.map((key) => user[key]);
console.log(values);

 

 

 

 🔗 구조 분해 할당 

const user = {
  name: "Yujin",
  age: 23,
  email: "hyjinny00@gmail.com",
  address: "USA",
};

const { name: yujin, age, address = "Korea" } = user;
// {address = "Korea"} : 기본값 지정

console.log(`사용자의 이름은 ${name}입니다.`);
console.log(`${yujin}의 나이는 ${age}입니다.`);
console.log(`${yujin}의 이메일 주소는 ${user.email}입니다.`);
console.log(address);

const fruits = ["Apple", "Banana", "Cherry"];
const [, , b] = fruits;
console.log(b);

 

 

 

 🔗 전개 연산자 (Spread) : 하나의 배열 데이터를 쉼표(,)로 구분하는 각각의 아이템으로 전개해서 출력

const fruits = ["Apple", "Banana", "Cherry", "Orange"];
console.log(fruits);
console.log(...fruits);
// console.log('Apple', 'Banana', 'Cherry')

const toObject = (a, b, ...c) => ({
  a,
  b,
  c,
});
console.log(toObject(...fruits));

 

 

 

 🔗 불변성 (Immutability) 

 

원시 데이터: String, Number, Boolean, undefined, null

• 데이터가 '불변'하기 때문에 데이터의 생김새가 똑같으면 같은 데이터라고 봐도 무방하다.

 

 

let a = 1;
let b = 4;

console.log(a, b, a === b); // a b의 메모리 주소가 다르기 때문에 일치하지 않는다.
b = a;
console.log(a, b, a === b);
a = 7;
console.log(a, b, a === b);
let c = 1; // 원시 데이터는 한 번 만들어지면 새로 만들어지는 것이 아니라 '불변'한다.
console.log(b, c, b === c);

 

 

 

참조형 데이터: Object, Array, Function

• 데이터가 불변하는 개념이 아니기('가변'하기) 때문에, 선언할 때 마다 새로운 메모리 주소에 데이터들이 할당되어 생김새가 똑같더라도 같은 데이터가 아닐 수 있다.
• (주의) 한 쪽을 수정하면 의도치 않게 다른 쪽도 수정된다.
• (해결) '복사'라는 개념을 통해서 데이터를 메모리 상에서 분리한다.

 

 

let a = { k: 1 };
let b = { k: 1 };

// 참조형 데이터는 새로운 값을 만들 때 마다, 새로운 메모리 주소에 할당된다. => 불변성이 없다. '가변'한다.
// (주의) 같은 메모리를 바라보고 있는 여러 개의 변수가 있을 때, 한 쪽의 변수에 있는 값을 수정하면 다른 값이 의도하지 않게 바껴져 있는 상태가 될 수 있다.

console.log(a, b, a === b); // a b의 메모리 주소가 다르기 때문에 일치하지 않는다.
a.k = 7;
b = a;
console.log(a, b, a === b);
a.k = 2;
console.log(a, b, a === b);
let c = b;
console.log(a, b, c, a === c);

 

 

 

 🔗 얕은 복사와 깊은 복사 

 

• 깊은 복사 (lodash - ._cloneDeep())

https://lodash.com/docs/4.17.15#cloneDeep

Lodash Documentation

import _ from "lodash";

const user = {
  name: "Yujin",
  age: 23,
  emails: ["hyjinny00@gmail.com"],
};

// 얕은 복사
// const copyUser = Object.assign({}, user);
// const copyUser = { ...user };
// 깊은 복사
const copyUser = _.cloneDeep(user);
console.log(copyUser === user);

user.age = 13;
console.log("user", user);
console.log("copyUser", copyUser);

console.log("------");
console.log("------");

// 깊은 복사 => 참조 데이터 안 참조 데이터(emile)은 한 번 더 깊은 복사를 해줘야 됨.
user.emails.push("hyjinny00@naver.com");
console.log(user.emails === copyUser.emails);
console.log("user", user);
console.log("copyUser", copyUser);

 

 

 

느낀점

 

 지금까지 배운 JS 문법들이 직접적으로 웹사이트를 만드는데 어떤 도움이 될지 추상적으로 학습한 것이라고 말할 수 있다. 그래서 지금 배운 것들로 어떻게 웹사이트를 만드는지 ??? 상태일 수 있다.

 하지만 JS를 통해서 데이터를 처리하는 과정 자체가 웹 사이트를 만드는데 중요한 작용을 한다. 그러므로 JS 데이터를 온전히 숙달하고 관리하지 못하면 결국에는 웹 사이트를 만드는데 지장이 생긴다.

 결국 우리는 지금 'JS' 프로그래밍 언어 문법 자체를 배운 것이고, 이것을 통해 웹 사이트를 만드는 방법은 뒤쪽에서 Vue, React를 학습하는 시간에 충분히 알아 볼거다.

 그러니까 지금은 웹 사이트를 제작하는 거에는 ??? 이겠지만 조금은 이것을 내려놓고, JS 학습 시간에는 문법 자체에 집중해서 학습을 하면 오히려 추후에 도움이 될 거다.

 

 쌤이 이번 강의 초반에 말씀 하신 건데 좋은 말인거 같아서 가져왔다!!!

 

---