16장

[zziglet]

16장 프로퍼티 어트리뷰트입니다~ 🍥

[Turtle-Hwan]

고생하셨습니다! 내용이 상당히 어렵네요

[Turtle-Hwan]

일종의 class에서 private 필드 속성들을 정의해 놓고, getter로 접근하는 방식과 비슷하네요!

[Turtle-Hwan]

JS도 getter, setter를 따로 제공해주고 있었군요?

그런데 굳이 get, set 접근자 프로퍼티를 이용해서 선언하는 것과, 일반적인 getfullName()과 setfullName으로 선언하는 것과의 차이가 궁금합니다.

[junepil]

굉장히 자바스러운 코드를 짤 수 있게 도와줄 것 같아요...

@Turtle-Hwan 동적으로 객체의 프로퍼티를 호출할 때, 예를 들어

const prop = "fullName";

console.log(persion[prop]);

과 같이 사용할 때는 유의미한 차이가 있겠네요

[Turtle-Hwan]

방금 해봤더니 "프로퍼티" 라고 부르는 이유가 있었네요!

const person = {
	//데이터 프로퍼티
	firstName:'Ungmo',
	lastName: 'Lee',

	//접근자 프로퍼티 -> 접근자 함수 fullName으로 정의
	get fullName(){ //getter
		return `${this.firstName} ${this.lastName}`;
	},

	set fullName(name){ //setter
		[this.firstName, this.lastName] = name.split(' ');
		//배열 디스트럭처링 할당 -> 배열의 각 요소를 변수에 할당(31장에서 자세히 살펴보자)
	}
};

const person2 = {
    firstName: 'ungmo',
    lastName: 'lee',

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    },

    setFullName(name) {
        [this.firstName, this.lastName] = name.split(' ');
    }
}

이렇게 했을 때,
person의 get, set은 접근자 "프로퍼티" 라서
person.fullName으로 접근해야 합니다.

그런데 person2의 경우, person2.getFullName() 으로 괄호를 붙여서 "함수" 를 실행시켜야 원하는 결과를 얻을 수 있습니다

아주 신기하네요!! 왜 프로퍼티로 getter, setter를 만들어 두었을까요??

[Turtle-Hwan]

const person = {
  firstName: 'kim'
}

이렇게만 선언하고 get, set을 지정하지 않으면 undefined가 되고, person.firstName으로 바로 접근 가능합니다.

그런데 es19 이전엔 '#' 처럼 class의 private field가 없었는데 굳이 get, set을 지정해야 할 당위성도 부족한 것 같고,

js의 장점이 객체의 다양한 선언법과 getter, setter 없이 JSON 내의 프로퍼티에 자유롭게 접근하고 값을 수정할 수 있는 것이라 생각하는데,

굳이 get, set property attribute가 존재하는 이유를 정말 모르겠어요!
여러분의 생각이 궁금합니다!!!

[whddltjdwhd]

JS는 객체지향 프로그래밍인가요? 함수형 프로그래밍인가요?

지환님이 말씀해주신 것처럼 JS는 Class를 사용하는 대신 객체로 이를 대신하도록 만들어졌습니다.

그러나 당시 Class없이 프로그래밍 하는 것이 말도 안된다고 생각한 흐름 탓에 JS도 Class에 관한 문법들을 지원하게 된 것 같습니다!

위 글에서 JS가 객체지향인지 함수형인지에 대한 설명을 깔끔하게 정리해 놓았다고 생각합니다. 다들 시간 나실 때 한번씩 읽어보시는 것도 좋을 것 같아요! 😸

[junepil]

저도 Object.freeze()같은 메소드는 함수형 프로그래밍을 지원하기 위해 필요성이 있을 수도 있다고 생각하는데 get, set 등과 같은 프로퍼티 속성은 명시적 접근 제어자가 없는 JS에서 필요한지 의문스럽습니다.

[MinboyKim]

테오님의 글이네요 너무 좋은 글입니다!!

저도 마찬가지로 객체를 클래스처럼 사용하기 위해 지원하는 기능이라고 생각해요. 많은 사람들이 익숙해하는 방식이니 지원하지 않을 수 없었던 것 아닐까요? ES6에 클래스가 도입된 것 처럼요,,

여담이지만 자바스크립트 개발에 참여하시고 JSON을 만드신 더글라스 크록포드는 ES6 출시 당시 새로운 기능들을 소개하며 Class 문법이 ES6의 가장 나쁜점이라고 하셨습니다. 자바스크립트의 철학이 훼손되는게 싫으셨나봐요,, 자바 개발자들이 공부하기 싫어서 계속 Class 기능을 요구한다며 자신들이 얼마나 비참한지 모르고 죽을거라고 신랄하게 까시더군요 😇

영상 - 우리가 지금까지 공부한 스프레드 연산자, 모듈, let, 구조분해 할당 등 ES6의 내용도 소개하고 계시니 한 번 살펴보세용 10년전 영상이지만 재밌습니다

[Turtle-Hwan]

잘 쓰면 유지보수에 아주 좋지만 깊은 복사와 같이 중첩 객체를 조심해야 할 거 같아요

[Turtle-Hwan]

• 연산량이 상당할 것 같은데 처음에만 작동하니 괜찮은 걸지 궁금하네요

• strict mode가 아니면 에러를 띄우지 않고 무시해서 오히려 대형 프로젝트에선 유지보수가 어려워질 수 있다는 생각이 드는데, 차라리 typescript로 object들 type을 열심히 관리하는게 좋지 않을까라는 의문도 드네요?

[whddltjdwhd]

아무래도 타입스크립트가 . . . 좋은 것 같아요 . . . 😢

[junepil]

지환님이랑 성종님이 말씀해주신 대로 TS의 readonly를 사용하는 게 더 좋을 수도 있을 것 같아요. 그런데 찾아보니 TS에서 중첩 객체에 readonly를 이용하려면 결국 타입을 재귀적으로 선언해야 하네요.

[MinboyKim]

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};

TS에서도 이런식으로 사용하쥬,,

[whddltjdwhd]

프로퍼티에 대해서 깊게 생각해볼 수 있었던 것 같아요! 정리하시느라 고생하셨습니다~~ 👍 👍 👍

[whddltjdwhd]

접근자 프로퍼티는 실제로 fullName이라는 프로퍼티를 가지고 있지 않지만
getter와 setter 함수를 통해 fullName이라는 가상의 프로퍼티에 접근할 수 있게 해주는군요!

[whddltjdwhd]

JS는 어쨰서? 왜? 프로토타입을 선택했나?
동민님이 처음 스터디 할 때 알려주신 글이 떠오르네요 👀

[whddltjdwhd]

enumerable이 true일 때

defineProperty를 이용하여 enumerable을 false로 바꿨을 때

정말로 name이라는 프로퍼티에 대해 열거할 수 없게 되었습니다 ㅜㅜㅜㅜ 😢

[junepil]

오브젝트의 값만 뽑아주는 Object.values 키와 값을 모두 뽑아주는 Object.entries 그리고 for ... in 등 enumerable 속성을 사용하는 것들이 많더라구요!

[whddltjdwhd]

JS는 객체지향 프로그래밍인가요? 함수형 프로그래밍인가요?

지환님이 말씀해주신 것처럼 JS는 Class를 사용하는 대신 객체로 이를 대신하도록 만들어졌습니다.

그러나 당시 Class없이 프로그래밍 하는 것이 말도 안된다고 생각한 흐름 탓에 JS도 Class에 관한 문법들을 지원하게 된 것 같습니다!

위 글에서 JS가 객체지향인지 함수형인지에 대한 설명을 깔끔하게 정리해 놓았다고 생각합니다. 다들 시간 나실 때 한번씩 읽어보시는 것도 좋을 것 같아요! 😸

[whddltjdwhd]

지난번 스터디때 준필님이 말씀해주신 그 메소드군요!

[whddltjdwhd]

아무래도 타입스크립트가 . . . 좋은 것 같아요 . . . 😢

[junepil]

늘 공부할 때마다 "음 이런 게 있구나"하고 신기해 하면서도 언제 쓸지 잘 모르겠는 챕터입니다 🤔. 계속 개발을 하다보면 언젠가 쓸 날이 올까요? 정리하느라 수고하셨어요!

[junepil]

굉장히 자바스러운 코드를 짤 수 있게 도와줄 것 같아요...

@Turtle-Hwan 동적으로 객체의 프로퍼티를 호출할 때, 예를 들어

const prop = "fullName";

console.log(persion[prop]);

과 같이 사용할 때는 유의미한 차이가 있겠네요

[junepil]

이 사람의 이름은 '웅'모일까요 '응'모일까요?

[whddltjdwhd]

웅! 일것 같아요

[MinboyKim]

이책 저자분 성함이 이웅모 님이시더군요 하하

[clicelee]

이름 귀엽다

[junepil]

오브젝트의 값만 뽑아주는 Object.values 키와 값을 모두 뽑아주는 Object.entries 그리고 for ... in 등 enumerable 속성을 사용하는 것들이 많더라구요!

[junepil]

저도 Object.freeze()같은 메소드는 함수형 프로그래밍을 지원하기 위해 필요성이 있을 수도 있다고 생각하는데 get, set 등과 같은 프로퍼티 속성은 명시적 접근 제어자가 없는 JS에서 필요한지 의문스럽습니다.

[junepil]

strict mode를 안 사용하면 개발자 입장에서는 나는 값을 수정했다고 생각할 수도 있으니 반드시 사용하는 게 좋을 것 같아요

[junepil]

strict mode를 기본적으로 적용할 수 있는지 찾다가 이상한 js 예약어를 발견했습니다. ES module로 선언된 파일들은 전부 기본적으로 strict mode가 적용된다고 하네요!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#strict_mode_for_modules

[junepil]

지환님이랑 성종님이 말씀해주신 대로 TS의 readonly를 사용하는 게 더 좋을 수도 있을 것 같아요. 그런데 찾아보니 TS에서 중첩 객체에 readonly를 이용하려면 결국 타입을 재귀적으로 선언해야 하네요.

[MinboyKim]

고생하셨습니다~~ 객체의 특성에 대해 좀 더 깊이 공부할 수 있는 단원이었던 것 같아요. 나중에 배열, 함수를 공부할 때 또 다시 들를 수 있는 부분일 듯 하네요 🐧

[MinboyKim]

이책 저자분 성함이 이웅모 님이시더군요 하하

[MinboyKim]

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};

TS에서도 이런식으로 사용하쥬,,

[MinboyKim]

테오님의 글이네요 너무 좋은 글입니다!!

저도 마찬가지로 객체를 클래스처럼 사용하기 위해 지원하는 기능이라고 생각해요. 많은 사람들이 익숙해하는 방식이니 지원하지 않을 수 없었던 것 아닐까요? ES6에 클래스가 도입된 것 처럼요,,

여담이지만 자바스크립트 개발에 참여하시고 JSON을 만드신 더글라스 크록포드는 ES6 출시 당시 새로운 기능들을 소개하며 Class 문법이 ES6의 가장 나쁜점이라고 하셨습니다. 자바스크립트의 철학이 훼손되는게 싫으셨나봐요,, 자바 개발자들이 공부하기 싫어서 계속 Class 기능을 요구한다며 자신들이 얼마나 비참한지 모르고 죽을거라고 신랄하게 까시더군요 😇

영상 - 우리가 지금까지 공부한 스프레드 연산자, 모듈, let, 구조분해 할당 등 ES6의 내용도 소개하고 계시니 한 번 살펴보세용 10년전 영상이지만 재밌습니다

[clicelee]

깊고 어려운 내용이네요
정리하느라 고생하셨어요!

[clicelee]

const와 object.freeze를 활용해 객체를 동결하는 예시가 있어서 가져와봤습니다

[clicelee]

상태 관리를 할 때, Object.freeze를 활용해 불변성을 유지하는 경우가 흔한가요? 불변 객체를 만들어 사용하는 대신 immer.js 같은 라이브러리를 사용하는 경우도 있는데 장단점을 비교해보면 좋을것 같아요
(immer.js는 객체를 직접 수정하는 것처럼 보이지만, 실제로는 새로운 불변 객체를 반환한다고 하네요)

[Turtle-Hwan]

방금 해봤더니 "프로퍼티" 라고 부르는 이유가 있었네요!

const person = {
	//데이터 프로퍼티
	firstName:'Ungmo',
	lastName: 'Lee',

	//접근자 프로퍼티 -> 접근자 함수 fullName으로 정의
	get fullName(){ //getter
		return `${this.firstName} ${this.lastName}`;
	},

	set fullName(name){ //setter
		[this.firstName, this.lastName] = name.split(' ');
		//배열 디스트럭처링 할당 -> 배열의 각 요소를 변수에 할당(31장에서 자세히 살펴보자)
	}
};

const person2 = {
    firstName: 'ungmo',
    lastName: 'lee',

    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    },

    setFullName(name) {
        [this.firstName, this.lastName] = name.split(' ');
    }
}

이렇게 했을 때,
person의 get, set은 접근자 "프로퍼티" 라서
person.fullName으로 접근해야 합니다.

그런데 person2의 경우, person2.getFullName() 으로 괄호를 붙여서 "함수" 를 실행시켜야 원하는 결과를 얻을 수 있습니다

아주 신기하네요!! 왜 프로퍼티로 getter, setter를 만들어 두었을까요??

[Turtle-Hwan]

//일반 객체의 __proto__ => 접근자 프로퍼티
Object.getOwnPropertyDescriptor(Object.prototype, '__proto__');
// {get: f, set:f, enumerable: false, configurable: true}

//함수 객체의 prototype => 데이터 프로퍼티
Object.getOwnPropertyDescriptor(Object, 'prototype');
// {value: { ... }, writable: true, enumerable: false, configurable: false}

[Turtle-Hwan]

한 번 configurable을 false로 했을 때 configurable을 다시 true로 바꿀 수 없다!!

writable 도 마찬가지!

[clicelee]

이름 귀엽다

[clicelee]

@whddltjdwhd 의 질문
Q. Object.getOwnPropertyDescriptor(Object.prototype, 'prototype');
Object.getOwnPropertyDescriptor(function() {}, '__proto__');
이렇게 바꿔서 입력하면 어떻게 되나요?
A. 둘 다undifined 가 나온다.

[clicelee]

으악 번거롭네요

[joeuns]

수고하셨습니다아 ㅠ0ㅠ