[16, 17장] 프로퍼티 어트리뷰트, 생성자 함수에 의한 객체 생성 #10
Comments
|
Q. 프로퍼티 어트리뷰트 , 생성자 함수
(1) 키와 값으로 구성된 일반적인 프로퍼티
(2) 자체적으로 값을 갖지는 않으나 프로퍼티의 값을 읽거나 저장할때 호출되는 함수로 구성된 프로퍼티
(3) [[Value]], [[Writable]], [[Enumerable]], [[Configurable]] 과 같은 의사 프로퍼티를 통칭하는 용어 (4글자)
(4) [[Get]], [[Set]] 과 같은 의사 메서드를 통칭하는 용어
(5) (3), (4)를 모두 포함하는 용어 (프로퍼티 디스크립터 객체가 제공한다.)
내부 메서드 [[Call]]을 갖는 함수 객체를 callable 라고 하며,
내부 메서드 (E)를 갖는 함수 객체를 (A), (E)를 갖지 않는 함수 객체를 (B)라고 부른다.
결론적으로 함수객체는 callable 이면서 (A)이거나 callable 이면서 (B)이다. 즉, 모든 함수 객체를 생성자 함수로서
호출할 수 있는 것은 아니다.
new 연산자와 함께 호출되는 함수는 (B)가 아닌 (A)이어야만 한다.
(A)는 함수 선언문, 함수 표현식, (C)와 같은 방식으로 정의된 함수를 말하며
(B)는 메서드(ES6 메서드 축약 표현) , (D)와 같은 방식으로 정의된 함수를 말한다.
퀴즈 정답 (미리 보진 말아주세요 ㅜ_ㅜ)
정답 설명
1. (1) 데이터 프로퍼티, (2) 접근자 프로퍼티, (3) 내부 슬롯, (4) 내부 메서드, (5) 프로퍼티 어트리뷰트 2. (A) constructor, (B) non-constructor, (C) 클래스, (D) 화살표 함수, (E) [[Construct]] 3. new.target 4. [[Enumerable]] |
|
Q. 아래 코드의 실행 결과를 예상해 보세요. const study = {};
Object.defineProperties(study, {
index: {
value: '16장'
},
title: {
value: '프로퍼티 어트리뷰트',
writable: true,
enumerable: true,
configurable: true,
},
chapter: {
get() {
return `${this.index}.${this.title}`;
},
set(string) {
[this.index, this.title] = string.split('.');
},
enumerable: true,
configurable: true,
}
});
study.chapter = '17장.생성자 함수에 의한 객체 생성';
console.log(study.chapter);
console.log(Object.keys(study));퀴즈 정답
16장.생성자 함수에 의한 객체 생성
['title', 'chapter'] Q. 프롱이가 생성자 함수의 인스턴스 생성 과정에 대해 주석을 달아 설명하려고 합니다. <보기>에서 알맞은 것을 골라 주석을 완성하세요. function Circle(radius) {
// (1)
// (2)
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
}
// (3)
return 100;
}
const circle = new Circle(1);
console.log(circle);<보기> 퀴즈 정답
(1) B
(2) D
(3) A
|
Q1. 다음 코드의 실행결과를 작성해주세요const person = { lastName: 'Hong' };
Object.seal(person);
person.age = 26;
console.log(person); // (1)
delete person.lastName;
console.log(person); // (2)
person.lastName= 'Park';
console.log(person); // (3)
Object.defineProperty(person, "lastName", {configurable: true}); // (4)(1) 퀴즈 정답
Object.seal메소드는 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지를 의미한다!! 밀봉된 객체는 읽기와 쓰기만 가능하다
(1) { lastName: 'Hong' } Q2. 다음 코드의 실행결과를 작성해주세요const func1 = function( ) {
console.log('프롱이들');
};
const func2 = ( ) => {
console.log('프롱이들');
};
new func1(); // (1) 실행시 나타나는 출력 결과는?
new func2(); // (2) 실행시 나타나는 출력 결과는?(1) 퀴즈 정답
(1) 프롱이들
설명 : 함수 표현식으로 정의된 함수는 constructor (2) TypeError : func2 is not a constructor 설명 : 화살표 함수로 정의된 함수는 non-constructor ※ constructor = 생성자 함수로서 호출할 수 있는 함수 ※ non-constructor = 객체를 생성자 함수로서 호출할 수 없는 함수 |
suehdn
changed the title
Q. 다음 코드의 실행 결과를 작성해 주세요.const person = { name: 'Frong' }
Object.freeze(person)
person.name = 'Hyori'
console.log(person)퀴즈 정답
그대로 Q. 다음 코드에 알맞은 답을 해주세요.const person = {}
Object.defineProperty(person, 'age', {
value: 25,
writable: true,
enumerable: true,
configurable: false
})
// 1. 해당 코드를 특정 메서드를 사용해 더 간결하게 작성할 수 있습니다. 어떻게 작성할 수 있을까요?
delete person.age
console.log(person.age)
// 2. delete를 이용해 age 프로퍼티를 삭제하면 무슨 결과가 나타날까요?퀴즈 정답1. 2. configurable 값이 false이기 때문에, age 프로퍼티는 삭제되지 않습니다. |
|
Q. [[Prototype]]내부 슬롯을 간접적으로 접근 할 수 있게 해주는 키워드는? 퀴즈 정답정답: __proto__const o = {};
// 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다.
o.[[Prototype]] // Uncaught SyntaxError: Unexpected token '['
// 일부 내부 슬롯과 내부 매서드에 한하여 간접적으로 접근할 수 있는 수단을 제공
o.__proto__ // Object.prototypeQ. Object.seal메서드와 Object.freeze메서드의 가장 큰 차이점은? 퀴즈 정답정답: seal 메서드는 프로퍼티 값의 갱신이 가능하지만 freeze메서드는 프로퍼티 값의 갱신이 불가능하다.const frong = { language: "JS" }
// 객체 frong을 seal 메서드를 이용하여 밀봉
Object.seal(frong);
// seal메서드를 이용해 객체를 밀봉했을때는
// 추가, 삭제, 재정의는 불가능하지만 프로퍼티 값의 갱신은 가능!
frong.language = "Javascript";
console.log(frong); // { language: "Javascript" }
const frong = { language: "JS" }
// 객체 frong을 freeze 메서드를 이용하여 동결
Object.freeze(frong);
// freeze메서드를 이용해 객체를 동결했을때는
// 추가, 삭제, 재정의 불가능, 프로퍼티 값의 갱신 역시 불가능!
frong.language = "Javascript" // 무시, strict mode에서는 에러발생
console.log(frong); // { language: "JS" }Q. 다음 코드의 실행결과를 작성해주세요. function DevCorse(position) {
this.position = position;
this.printPosition = () => {
return `we are ${this.position}!`
}
}
const devCorse = DevCorse('frong');
console.log(devCorse.printPosition());퀴즈 정답정답: 생성자 함수를 호출할때는 앞에 new연산자를 붙여서 실행하지않으면
new연산자를 사용하여 상수 devCorse에 생성자 함수 DevCorse가 할당되었고
TMI 생성자함수에 return문을 넣은 뒤 new를 붙이지않고 사용하면 어떻게 될까 궁금해서 한번 해봤는데 일반 함수처럼 return이 되네요!
|
|
Q1. 다음 코드를 실행했을 때 결과를 올바르게 나열한 것은? (객관식) const animal = { name: "nana" };
Object.freeze(animal);
console.log(Object.getOwnPropertyDescriptors(animal));
// {value: "nana", writable: ?, enumerable: ?, configurable: ?}(1). true, false, true Q2. 다음 코드의 출력 결과는? (객관식) function Cat(name, age) {
this.name = name;
this.age = age;
this.introduce = function () {
return `이름은 ${name}, 나이는 ${age} 입니다. `;
};
return [name];
}
function Dog(name, age) {
this.name = name;
this.age = age;
this.introduce = function () {
return `이름은 ${name}, 나이는 ${age} 입니다. `;
};
return age;
}
const cat = new Cat("coco", 3);
const dog = new Dog("choco", 5);
console.log(cat); // (가)
console.log(dog); // (나)(가) (나) (1). undefined 5 (2). ['coco'] undefined (3). Cat { name: 'coco', age: 3, introduce: f } Dog { name: 'choco', age: 5, introduce: f } (4). ['coco'] Dog { name: 'choco', age: 5, introduce: f } (5). Cat { name: 'coco', age: 3, introduce: f } 5 퀴즈 정답1번 문제 Object.freeze 메서드는 객체를 동결한다. 객체 동결이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지, 프로퍼티 값 갱신 금지를 의미한다. 따라서 값의 변경 가능 여부를 나타내는 Writable과 재정의 가능 여부를 나타내는 Configurable은 false가 되고, 열거 가능 여부를 나타내는 Enumerable은 동결과는 관계가 없기 때문에 true를 나타낸다. 정답: (2) 2번 문제 정답: (4) |
데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎
아래 템플릿을 복사해서 2개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!
The text was updated successfully, but these errors were encountered: