[데브코스/TIL] DAY16 - JavaScript(5) 객체

📖 객체의 기본 내용

🔎 객체란?

키와 값으로 구성된 속성의 집합으로, 여러 개의 데이터를 하나로 관리해주는 데이터 형태

1. 객체의 특징

• 속성(프로퍼티)로 구성
  • 속성(프로퍼티) : key와 value를 합쳐서 부르는 말
• 참조 자료형
  • 동적으로 속성을 추가하고 삭제 가능
  • 추가 : 객체명[추가할 키] = 추가할 값
  • 삭제 : delete 객체명[삭제할 키]
• 추가
  • 이렇게 추가하는 것도 가능

const key = "name";
const obj = {
  [key]: "minha",
}

2. 객체의 반복문

for ... in 활용

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

객체 메서드 - Object.keys()

• 객체의 키를 모아 배열 생성

객체 메서드 - Object.values()

• 객체의 값을 모아 배열 생성

객체 메서드 - Object.entries()

• 객체의 키와 값을 배열로 모아 [키, 값]으로 구성된 배열 생성

3. 이외의 객체 메서드

• 메서드 : 객체 안에 포함된 함수를 지칭

hasOwnProperty

• 객체에 특정 키가 존재하는지 확인하는 메서드
• boolean 타입으로 리턴
• 객체명.hasOwnProperty(키)

4. 객체의 병합과 복사

얕은 복사

• 객체와 배열과 같은 참조 자료형에서 많이 발생함
• 변경에 영향을 받음

깊은 복사

• 기본 자료형에서 발생함
• JSON.stringify와 JSON.parse를 활용하여 깊은 복사 가능
• lodash의 cloneDeep 함수를 사용하여 깊은 복사 가능

얕은 복사에서 깊은 복사 가능?

• spread 연산자를 이용하면 가능
• spread 연산자는 바깥 껍데기만 바꿔주는 것이라 생각하자.
  • 내부의 다른 껍데기가 있다면, 그건 바꿔줄 수 없음
  • 오로지 바깥 껍데기만 바꿔줌

객체의 병합

• spread 연산자로 쉽게 가능
• 단, 같은 키를 가진 속성이 있다면 뒤에 오는 객체의 값으로 변경

const obj1 = {
  a: 1,
  b: 1,
  c: 1,
}

const obj2 = {
  c: 2,
  d: 2,
  e: 2,
}

const result1 = { ...obj1, ...obj2 };
const result2 = { ...obj1, ...{ f: 3 }}; // 이것도 가능

5. 객체의 this

• 객체 함수 내에서 this를 사용할 경우 this는 해당 객체를 의미한다.

const obj = {
  number: 1,
  getNumber: function() {
    console.log(this.number); // 여기서의 this는 obj를 의미함
    // console.log(number); // 에러 발생
  },
};

obj.getNumber();

💎 객체의 고급 내용

1. 데이터 속성 설명자

🔎 데이터 속성 설명자

객체의 속성에 대한 상세 정보를 정의하는 것으로, Object 객체의 defineProperty 메서드를 사용하여 정보 설정

• value : 객체에 들어갈 값
• writable : 수정 가능 여부
• enumerable : 순회 가능 여부
• configurable : 설정 변경 가능 여부

const userObj = {};

// 보통은 이렇게 속성 추가
userObj.name = "철수";

Object.defineProperty(userObj, "name", {
  value: "철수";
  writable: true, // 수정 가능
  enumerable: true, // 순회 가능
  configurable: true, // 설정 변경 가능
});

2. 접근자 속성 설명자

🔎 접근자 속성 설명자

객체 속성의 값을 직접 저장하지 않고, 접근과 설정을 위한 함수(getter, setter)를 사용해 간접적으로 값에 접근할 수 있도록 함수를 정의하는 것

• get : 속성에 접근할 때 호출되는 함수
• set : 속성에 값을 할당할 때 호출되는 함수

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

userObj.fullName = "Noah Wilson";
console.log(userObj.fullName);

• 객체에서는 보통 이렇게까지 사용할 일은 없으나, 사용 가능하다는 점이라도 알기
• 접근자 속성 설명자로 정의되면 함수가 아니기 때문에 함수처럼 접근하지 않고 속성처럼 접근
  • 덕분에..? 매개변수를 넘길 수 없음

3. 객체의 불변성을 유지하는 메서드

Object.seal()

• 객체의 속성을 추가하고 삭제하는 것을 막을 수 있는 메서드
• 수정은 가능하다.

const userObj = Object.seal({
  firstName: "Ava",
});

userObj.lastName = "Davis"  // 불가능
delete userObj.firstName;   // 불가능
userObj.firstName = "Noah"; // 가능

Object.preventExtensions()

• 객체의 속성을 추가하는 것을 막을 수 있는 메서드
• 삭제와 수정은 가능하다.

const userObj = Object.preventExtensions({
  firstName: "Ava",
});

userObj.lastName = "Davis"  // 불가능
delete userObj.firstName;   // 가능
userObj.firstName = "Noah"; // 가능

Object.freeze()

• 객체를 완벽하게 동결시키는 메서드
• 추가, 수정, 삭제 전부 불가능하다.
• 데이터가 외부 요인에 의해서 변경되지 않도록 보장할 때 사용

const userObj = Object.freeze({
  firstName: "Ava",
});

userObj.lastName = "Davis"  // 불가능
delete userObj.firstName;   // 불가능
userObj.firstName = "Noah"; // 불가능

4. 메서드 체이닝

🔎 메서드 체이닝이란?

객체의 여러 메서드를 연속으로 호출하는 방식

const calculate = {
  value: 0,
  add: function (num) {
    this.value += num;
    return this;
  },
  sub: function (num) {
    this.value -= num;
    return this;
  },
  getResult: function () {
    return this.value;
  },
};

const result = calculate.add(10).sub(5).getResult();
console.log(result);

✏️ 메모

this

• 어떤 함수든 this는 나를 호출한 객체를 가르킨다. (화살표 함수 제외)
• 객체 내의 함수는 객체명.함수명()으로 호출된다. 단, 전역 객체 내의 함수는 객체명 생략이 가능하다.
• 전역으로 선언된 함수나 변수는 모두 전역 객체 내에 추가되는 것이다.

function getNumber() {
  console.log(this);
}

getNumber();
// global.getNumber() 혹은 window.getNumber()

위의 예시에서 getNumber 함수는 전역 함수로 선언되었다.
따라서 getNumber 내부에서 호출하는 this는 전역 객체를 의미한다.

Node.js 환경에서의 전역 객체는 global
브라우저 환경에서의 전역 객체는 window

화살표 함수에서의 this

• 화살표 함수는 다른 함수들과의 this 바인딩이 다르다.
• 화살표 함수는 자신만의 this를 가지지 않으며, 외부에서 this를 상속받는다.
  • 외부에서 상속받을 때는 함수가 호출되는 위치가 아닌, 선언되는 위치를 기반으로 상속받는다.

const obj = {
  number: 1,
  getNumber: () => {
    console.log(this.number);
  },
};

obj.getNumber();

위의 예시에서 this는 obj가 아닌 window(혹은 global)를 의미하며, window 객체에 number라는 변수가 없다면 에러가 발생한다.

📌 출처

수코딩(https://www.sucoding.kr)