Javascript 기본

1. 객체

1. 키와 값으로 구성된 속성의 집합

중괄호호 선언한다. {}

const obj = { key: 'value'}

2. 참조 자료형

const userObj = {
  name: "vhul su",
  age: 20,
};

const copyUser = userObj; // 얕은 복사
userObj.age = 50;
console.log(userObj); // {... age:50}
console.log(copyUser); // {... age:50}

3. 동적으로 추가

객체의 속성에 접근해서 값을 할당

const userObj = {};

userObj.name = "영희"; // name이라는 key 값이 없어도 에러가 안남

console.log(userObj.age); // age이라는 key 값이 없어도 에러가 안남

4. 동적으로 삭제

delete 키워드를 사용해서 특정 속성을 삭제

const userObj = {};

userObj.name = "영희";

console.log(userObj); // { name: '영희' }
delete userObj.name;
console.log(userObj); // {}

const userObj = {
  name: "영희",
  age: 20,
};

const userObj2 = new Object();
userObj2.name = "철수";
userObj2.age = 20;

console.log(userObj);
console.log(userObj2);

5. 리터럴 표기법(literal) → [], {}…

데이터를 정의하는 데 있어서 간편하게 데이터를 정의할 수 있는 방법

// 객체 리터럴
const userObj = {};

// 배열 리터럴
const userArr = [];

// 문자 리터럴
const userName = "철수";

// 불리언 리터럴
const isUser = true;

// 숫자 리터럴
const num = 10;

// null 리터럴
const inUser = null;

// symbol
const uniqueKey = Symbol("a");

1. 기본 자료형과 참조 자료형을 선언했던 방법 모두가 리터럴 표기법

   // 객체 속성에 접근 
   console.log(userObj.name);
   console.log(userObj["my Name"]
   
   // 객체의 속성을 수정하는 방법 <-> 동적으로 속성을 추가하는 방법
   userObj.name = "영희"

6. this

예약이 되어져 있는 키워드

this → 함수를 호출한 객체를 가리킨다. (함수 선언문)

function getName(){
	console.log(this); // window
}

화살표 함수 this → 그 함수가 선언된 스코프(어휘적 스코프)를 가리킴

7. 순회

객체를 반복할 수 있는 방법

1. for

   for(let key in obj){
   	console.log(key, obj[key]);
   }

2. Object.keys()

   console.log(Object.keys(userObj)) // [...keys]
   Object.kets(obj).forEach((key)=>console.log(`${key}: ${obj[key]}`}

3. Object.values()

   for(let value of Object.values(obj){
   	console.log(value)
   }

4. Object.entries()

   console.log(Object.entries(obj)); // [[ke1: value1],[key2: value2]]
   Object.entries(obj).forEach(([key,value])=>{
   	console.log(`${key}: ${value}`}
   })

5. 객체 병합과 복사

1. 얕은 복사(shallow copy) → 객체, 복사

   const user = {
     name: "철수",
   };
   const copyUser = user;
   user.name = "영희";
   
   console.log(user, copyUser); //{ name: '영희' } { name: '영희' }

2. 깊은 복사(deep copy) → 기본 자료형

   const user = {
     name: "철수",
   };
   const copyUser = { ...user };
   user.name = "영희";
   
   console.log(user, copyUser); // { name: '영희' } { name: '철수' }

3. 깊은 복사 → 얕은 복사 불가능

4. 얕은 복사 → 깊은 복사 가능

5. 병합

   const user = {
     name: "철수",
     age: 20,
   };
   
   const developer = {
     skill: "react.js",
   };
   
   const person = {
     name: user.name,
     age: user.age,
     skill: developer.skill,
   };
   
   // or
   
   const person = {...user, ...developer};

   위 방법 중 스프레드 연산자 사용시 동일한 속성값이 있을 경우 뒤에 있는쪽으로 할당된다.

6. 깊은 복사의 다른 방법

   // 0x001
   // lodash -> cloneDeep()
   const user = {
     name: "철수",
     age: 20,
     today: { eat: "meat" },
   };
   
   const user2 = JSON.parse(JSON.stringify(user));
   
   user.age = 30;
   user.today.eat = "vegitable";
   
   console.log(user, user2);
   // { name: '철수', age: 30, today: { eat: 'vegitable' } } { name: '철수', age: 20, today: { eat: 'meat' } }

7. 배열의 복사

   // 배열의 얕은 복사
   const arr = [1, 2, 3, 4, 5];
   const newArr = arr;
   arr[0] = 4;
   console.log(newArr, arr);
   // [ 4, 2, 3, 4, 5 ] [ 4, 2, 3, 4, 5 ]
   
   // 배열의 깊은 복사 -> 객체와 동일

6. 데이터 속성 설명자 ← 고급 개념

객체 데이터의 속성을 설명하는 것

1. value, writable, enumerable, configurable

   const obj = {
     gender: "male",
   };
   obj.name = "영희"; // 동적 추가
   Object.defineProperty(obj, "name", {
     value: "철수",
     writable: false, // 수정 가능 여부
   });
   obj.name = "영희"; // writable 이후 안됨
   console.log(obj); // {...obj, name: '철수'}
   
   Object.defineProperty(obj, "age", {
     value: 20,
     enumerable: false, // 순회할 때 접근 가능한 속성
     configurable: false, // 이 설정을 바꿀 수 있는지, 또는 삭제할 수 있는지
   });
   for (let key in obj) {
     console.log(key); 
     // gender
     // name
   }

7. 접근 속성 설명자

get, set

const userObj = {
  firstName: "John",
  lastName: "Hash",
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(name) { 
    const splitNames = name.split(" ");
    this.firstName = splitNames[0];
    this.lastName = splitNames[1];
  },
};

userObj.fullName = "Mariana Hone";
console.log(userObj.fullName);

8. 메서드 체이닝

객체의 메서드는 연결해서 사용할 수 있다.

const calculate = {
  value: 0,
  add: function (n1) {
    this.value += n1;
    return this; // this를 반환
  },
  subtract: function (n1) {
    this.value -= n1;
    return this; // this를 반환
  },
  getresult: function () {
    return this.value;
  },
};

const result = calculate.add(10).subtract(1).getresult();
console.log(result); // 9

9. 추가적으로 사용할 수 있는 메서드

불변성을 유지하는 메서드

1. Object.seal(): 객체의 속성을 추가하거나 삭제 불가.

   const userObj = Object.seal({
     name: "철수",
   });
   userObj.age = 20;
   delete userObj.name;
   
   console.log(userObj);
   // { name: '철수' }

2. Object.preventExtensions(): 속성 추가 불가(수정, 삭제는 됨)

   **const userObj = Object.preventExtensions({
     name: "철수",
   });
   userObj.age = 20;
   userObj.name = '영희'
   
   console.log(userObj); // { name: '영희' }
   
   delete userObj.name
   
   console.log(userObj); // { }**

3. Object.freeze() : 동결 ← ⭐️

	const userObj = Object.freeze({
  		name: "철수",
	});
	userObj.age = 20;
	userObj.name = "영희";
	delete userObj.name;
	console.log(userObj); // { name: '철수' }