[JS] 생성자 함수 인스턴스 생성 과정

00. 생성자 함수의 역할 - 구조가 동일한 인스턴스를 생성하기 위한 템플릿으로 생성하는 것 - 생성된 인스턴스를 초기화하는 것 function Square(side) { // 인스턴스 초기화 this.side = side; this.getArea = function () { return this.side * this.side; }; } // 인스턴스 생성 const square = new Square(3); // 객체 생성 this에 프로퍼티를 추가하고 필요에 따라 인스턴스를 초기화한다. 이때, 인스턴스를 생성하고 반환하는 코드는 보이지 않는다. 자바스크립트 엔진은 암묵적으로 인스턴스를 생성하고 반환하기 때문이다. 이러한 암묵적인 처리는 다음과 같다. 01. 인스턴스 생성과 this 바인딩 암묵적으로 ..
Oops, All Code!/📝 Study Notes 2023. 3. 7. 00:00
[JS] 생성자 함수와 객체 리터럴의 차이

1. 객체 리터럴의 문제 단 하나의 객체만 생성하므로 동일한 프로퍼티를 갖는 객체를 여러개 생성해야할 때 비효율적이다. const square1 = { side: 3, getArea() { return this.side*this.side; } }; console.log(square1.getArea()); // 9 const square2 = { side: 5, getArea() { return this.side*this.side; } }; console.log(squre2.getArea()); // 25 문제는, 객체마다 프로퍼티 값이 다를 수 있지만 메서드가 동일한 경우가 많다는 사실이다. 예시로 정사각형을 표현한 square1과 square2는 프로퍼티 구조가 동일하다. 이런 경우 객체 리터럴은 구조..
Oops, All Code!/📝 Study Notes 2023. 3. 6. 00:00
[JS] 생성자 함수

객체를 생성하는 또 다른 방법이다. 1. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성해 반환한다. 객체 생성 이후 프로퍼티 또는 메서드를 추가하여 객체 완성이 가능하다. // 빈 객체 생성 const minda = new Object(); // 프로퍼티 추가 minda.name = 'Hong'; minda.sayYeeeeh = function () { console.log('Yeeeeeeeh' + this.name); }; console.log(minda); minda.sayYeeeeh(); 생성자 함수는 new 연산자와 함께 호출해 인스턴스를 생성하는 함수다. 이때, 생성자 함수가 만든 객체를 인스턴스라 부른다. 2. 빌트인 함수 String, Nu..
Oops, All Code!/📝 Study Notes 2023. 3. 5. 17:10
[React] 한 학기 공부 계획

공부 계획 3개월+ 00. React 국내 실무체계에서 가장 주목받는 라이브러리인 React, 전반적인 컨셉 이해를 위해 하나의 프로젝트를 VanillaJS와 React로 각각 프로그래밍하여 React의 필요성을 좀 더 체화하기 위한 프로젝트 01. 공부기간 1학기동안 진행되는 자기주도학습 수업이므로 1학기 종강일까지 공부할 예정이다. 02. 목표 리액트 라이브러리를 사용함으로써 바닐라 JS의 한계를 확인하고 존재 이유를 알기 위함 중간고사를 기준으로 앞뒤를 나누어 이전에는 리액트 개념과 바닐라 JS 프로젝트를, 이후에는 리액트 토이 프로젝트를 진행할 예정이다. 03. 스케줄 1주차 3월 2일 ~ 3월 8일 • CSS Layout Project - 오전 클론코딩 - 오후 복습 및 적용 2주차 3월 9일 ..
Oops, All Code!/📝 Study Notes 2023. 3. 1. 00:00
1 ··· 12 13 14 15 16 17 18