home강의 홈으로
Section 8. 객체 깊게 다루기
Lesson 1. Object

I. Object 클래스

👉 MDN 문서 보기

이제까지 배운 자바스크립트 객체들의 원형

console.log( new String('ABC') instanceof Object, new Number(123) instanceof Object, [] instanceof Object, (function () {}) instanceof Object, globalThis instanceof Object );
  • 각각 따로 출력해서 [[Prototype]]을 펼쳐 볼 것

생성자 함수

// 빈 객체 생성 console.log( new Object(), new Object(null), new Object(undefined), ); // 각 값에 적합한 래핑함수로 작용 console.log( new Object(1), new Object('ABC'), new Object(true), new Object([1, 2, 3]) );



II. 주요 정적 메서드

1. assign - 인자로 주어진 객체(들)의 프로퍼티들을 대상 객체에 붙여넣음

  • ⭐️ 대상 객체를 변경
  • 결과 객체를 반환
  • ⚠️ 얕은 복사

인자들:

  • 대상 객체
  • 원본 객체(들)
const intro1 = { name: '홍길동' }; const intro2 = { ...intro1 }; console.log(intro1, intro2); const personal = { age: 25, married: false }; const career = { job: '개발자', position: '팀장' } Object.assign(intro1, personal); console.log(intro1); // 둘 이상의 원본에서 가져올 수도 있음 Object.assign(intro2, personal, career); console.log(intro2);


const obj1 = new Object(); const obj2 = { x: 1, y: 2 }; const obj3 = { y: 3 }; const obj4 = { z: { a: 1 }} Object.assign(obj1, obj2, obj3, obj4); console.log(obj1);
  • 프로퍼티의 키가 같을 경우 뒤에 오는 인자의 것이 덮어씀
obj2.x = 0; obj4.z.a = 2; console.log(obj1);
  • 얕은 복사


2. keys, values, entries - 객체의 키 / 값 / [키, 값]을 배열로 반환

const obj = { x: 1, y: 2, z: 3 }; console.log( Object.keys(obj), ); console.log( Object.values(obj), ); console.log( Object.entries(obj), );


console.log( Object .keys(globalThis) .sort() );


// 배열에 사용할 경우 const arr = [1, 2, 3, 4, 5]; console.log( Object.keys(arr), Object.values(arr), Object.entries(arr) ); // 객체가 아닐 경우 객체로 변환 const str = 'ABCDEFG'; console.log( Object.keys(str), Object.values(str), Object.entries(str) );

3. preventExtensions - 프로퍼티 추가 금지

  • isExtensible - 해당 여부 확인
const obj = { x: 1, y: 2 }; console.log(Object.isExtensible(obj)); Object.preventExtensions(obj); console.log(Object.isExtensible(obj)); obj.x++; // 프로퍼티 수정 가능 delete obj.y // 프로퍼티 삭제 가능 obj.z = 3; // 💡 프로퍼티 추가 금지 console.log(obj);


// 배열에 적용시 const arr = [1, 2]; Object.preventExtensions(arr); arr[2] = 3; // 동작하지 않음 console.log(arr); arr.push(3); // ⚠️ 오류 발생 console.log(arr);

4. seal - 프로퍼티 추가와 삭제 금지

  • isSealed - 해당 여부 확인
const obj = { x: 1, y: 2 }; console.log(Object.isSealed(obj)); Object.seal(obj); console.log(Object.isSealed(obj)); obj.x++; // 프로퍼티 수정 가능 delete obj.y // 💡 프로퍼티 삭제 금지 obj.z = 3; // 💡 프로퍼티 추가 금지 console.log(obj);

5. freeze - 객체 동결 - 읽기만 가능

  • isFrozen - 해당 여부 확인
// 객체에 사용 const obj = { x: 1, y: 2 }; console.log(Object.isFrozen(obj)); Object.freeze(obj); console.log(Object.isFrozen(obj)); obj.x++; // 💡 프로퍼티 수정 불가 delete obj.y // 💡 프로퍼티 삭제 금지 obj.z = 3; // 💡 프로퍼티 추가 금지 console.log(obj);


// 배열에 사용 const arr = [1]; Object.freeze(arr); arr[0]++; // 💡 요소 수정, 추가, 삭제 불가 console.log(arr);

⚠️ 얕게만 적용

const obj = { x: 1, y: { a: 1 } }; Object.freeze(obj); obj.x++; obj.y.a++; console.log(obj);

🤔얄코에게 질문하기질문은 반.드.시 이리로 보내주세요! ( 강의사이트 질문기능 ✖ )

강의에서 이해가 안 되거나 실습상 문제가 있는 부분,
설명이 잘못되었거나 미흡한 부분을 메일로 알려주세요!

답변드린 뒤 필요할 경우 본 페이지에
관련 내용을 추가/수정하도록 하겠습니다.

이메일 주소
yalco@yalco.kr
메일 제목 (반드시 아래 제목을 붙여넣어주세요!)
[질문] 제대로 파는 자바스크립트 (유료 파트) 8-1

🛑질문 전 필독!!

  • 구글링을 먼저 해 주세요. 들어오는 질문의 절반 이상은 구글에 검색해 보면 1분 이내로 답을 찾을 수 있는 내용들입니다.
  • 오류 메시지가 있을 경우 이를 구글에 복붙해서 검색해보면 대부분 짧은 시간 내 해결방법을 찾을 수 있습니다.
  • 강의 페이지에 추가사항 등 놓친 부분이 없는지 확인해주세요. 자주 들어오는 질문은 페이지에 추가사항으로 업데이트됩니다.
  • "유료파트의 강의페이지는 어디 있나요?" - 각 영상의 시작부분 검은 화면마다 해당 챕터의 강의페이지 링크가 있습니다.
  • 질문을 보내주실 때는 문제가 어떻게 발생했고 어떤 상황인지 등을 구체적으로 적어주세요. 스크린샷을 첨부해주시면 더욱 좋습니다.
🌏 Why not change the world?