TIL

TIL - 20220725

오늘은 모던 JavaScript 튜토리얼에서 프로토타입 메서드와 __proto__가 없는 객체(https://ko.javascript.info/prototype-methods)에 대해서 공부했다. 작성한 질문은 다음과 같다. __proto__를 사용하면 안 되는 이유는 먼저, 구식이며 사용자가 __proto__를 직접 만들 수 있게 허용하면, 내장 __proto__의 getter, setter 때문에 의도하지 않은 결과가 나올 수 있다. 그 대신 사용할 수 있는 메서드는 다음과 같다. Object.create(proto, [descriptors]): [[Prototype]]이 proto인 객체를 만든다. 참조 값은 null일 수 있고, 프로퍼티 설명자를 넘기는 것도 가능하다. Object.getProto..

TIL - 20220724

오늘은 모던 JavaScript 튜토리얼에서 내장 객체의 프로토타입(https://ko.javascript.info/native-prototypes)에 대해 공부했다. 작성한 질문은 다음과 같다. 빈 객체를 만들어 alert(obj)로 출력하면 "[object Object]"가 나오는 이유는 우선, toString 메서드에서 이 문자열을 생성한다. 객체 생성자 new Object와 객체 리터럴 {}은 같은 뜻이며 생성자 함수의 prototype이 toString을 비롯한 다양한 메서드가 구현되어 있는 대형 객체를 참조하여 "[object Object]" 값을 출력하게 되는 것이다. 배열 [1, 2, 3]을 만든다고 가정하면 new Array()의 디폴트 생성자가 내부에서 동작하여 Array.prototy..

TIL - 20220723

오늘은 모던 JavaScript 튜토리얼에서 함수의 prototype 프로퍼티에 대해 공부했다. 작성한 질문은 다음과 같다. 생성자 함수로 객체를 만든 경우와 리터럴 방식으로 객체를 만든 경우의 차이점은 생성자 함수의 프로토타입이 객체인 경우에 new 연산자를 이용하며 만든 객체는 생성자 함수의 프로토타입 정보를 이용해 [[Prototype]]을 설정한다는 것이다. "constructor"를 이야기할 때, 가장 중요한 점은 자바스크립트는 알맞은 "constructor"값을 보장하지 않는다는 점이다. 이번 챕터는 평소 리터럴만을 사용하여 객체를 만들었는데, 생성자 함수를 이용하여 객체를 만들었을 때 생성되는 [[Prototype]]에 대하여 알 수 있는 챕터였다. 다만, 예를 들어 생성자 함수 F의 프로토..

TIL - 20220722

오늘은 모던 JavaScript 튜토리얼에서 프로토타입 상속(https://ko.javascript.info/prototype-inheritance)에 대해서 공부했다. 작성한 질문은 다음과 같다. 자바스크립트에서 객체가 갖는 숨김 프로퍼티를 [[Prototype]]이라고 한다. 이전 변수의 유효 범위와 클로저에서 함수가 갖고 있는 숨김 프로퍼티는 [[Environment]]였는데, 객체도 함수처럼 숨김 프로퍼티를 갖고 있었던 것이었다. 숨김 프로퍼티가 다른 객체를 참조하는 경우 참조 대상을 '프로토타입'이라고 부른다. 객체에서 프로퍼티를 읽으려고 할 때, 해당 프로퍼티가 없으면 자동으로 프로토타입에 프로퍼티가 존재하는지 찾는다. 상속 프로퍼티란 프로토타입으로부터 물려받은 프로퍼티를 상속 프로퍼티라고 부..

TIL - 20220721

오늘은 모던 JavaScript 튜토리얼에서 프로퍼티 getter와 setter에 대해서 공부했다. 작성한 질문은 다음과 같다. 객체 프로퍼티에는 데이터 프로퍼티와 접근자 프로퍼티가 존재한다. 데이터 프로퍼티는 말 그대로 우리가 평상시 사용하는 프로퍼티가 이에 해당하며 접근자 프로퍼티는 본질은 함수이고, 함수는 값을 획득하고 설정하는 역할을 하듯이 접근자 프로퍼티도 그러한 역할을 한다. 자세한 이야기는 다음 질문으로 이어진다. 접근자 프로퍼티는 getter와 setter 메서드로 표현하며 getter는 get으로, setter는 set으로 나타낸다. 여기서 getter 메서드는 프로퍼티를 읽으려 할 때 실행하고, setter 메서드는 프로퍼티에 값을 할당하려 할 때 실행하는 역할이다. 데이터 프로퍼티의 ..

TIL - 20220720

오늘은 모던 JavaScript 튜토리얼에서 프로퍼티 플래그와 설명자(https://ko.javascript.info/property-descriptors)에 대해서 공부했다. 작성한 질문은 다음과 같다. 객체 프로퍼티는 키-값 쌍으로 이루어져 있는데 여기서 플래그라는 보이지 않는 프로퍼티 추가 구성 옵션이 존재한다. 다음과 같은 속성이 존재한다. writable: boolean 형태이며, 값이 true일 경우 프로퍼티의 값을 수정할 수 있다. false일 경우 읽기만 가능하다. enumerable: boolean 형태이며, 값이 true일 경우 반복문을 사용해 나열할 수 있다. false일 경우 반복문을 사용해 나열할 수 없다. configurable: boolean 형태이며, 값이 true일 경우 프..

TIL - 20220719

오늘은 모던 JavaScript 튜토리얼에서 화살표 함수 다시 살펴보기(https://ko.javascript.info/arrow-functions)에 대해서 공부했다. 작성한 질문은 다음과 같다. 화살표 함수와 일반 함수의 차이점으로 여러 가지가 있다. 우선, 화살표 함수는 this를 가지지 않는다. 화살표 함수 본문에서 this를 사용해 접근하면, 외부에서 값을 가져오기 때문에 객체 메서드를 일반 함수로 만들어 다른 함수의 인수로 전달할 때, this가 사라져 bind를 하는 과정을 거치지 않아도 된다. 다음으로, 화살표 함수는 유사 배열 객체인 args를 가지지 않는다. 모든 인수에 접근할 수 있게 해주는 arguments인 args를 가지지 않으며, 이런 점은 현재 this 값과 arguments..

TIL - 20220718

오늘은 모던 JavaScript 튜토리얼에서 함수 바인딩에 대해 공부했다. 작성한 질문은 다음과 같다. 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라지는 이유는 객체에서 분리된 함수만 전달되기 때문이다. 브라우저 환경에서 setTimeout 메서드는 인수로 전달받은 함수를 호출할 때, this에 window 객체를 할당하기 때문에 원하는 this를 참조하기 어렵다. 메서드를 전달하며 컨텍스트도 제대로 유지하려면 래퍼 함수를 사용하는 방법과 bind를 사용하여 컨텍스트를 유지하는 방법이 있다. 부분 적용 함수를 만드는 이유는 좋은 가독성을 가진 이름의 함수를 만들 수 있기 때문이다. 예를 들어, 채팅 서비스를 만든다고 가정하며 메시지를 전달하는 함수 send를 만든다고 가정할..