web api :
인터프리터 언어
프로그래밍 언의 소스코드를 바로 실행하는 컴퓨터 프로그램 또는 환경
ㄴ 한번에 한줄 / 컴파일 언어보다 상대적으로 조금 더 빠르게 실행
자바스트립트 this 바인딩
for~ in
for~ of
iterable
프로그래밍흐름
crud
인스턴스
인스턴스란 클래스에 의해 생성되어 메모리에 저장된 실체를 말한다. 객체지향 프로그래밍에서 객체는 클래스와 인스턴스를 포함한 개념이다. 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다. 인스턴스는 객체가 메모리에 저장되어 실제로 존재하는 것에 초점을 맞춘 용어이다.
객체지향 프로그래밍
전통적 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독림적인 단위, 즉 객체의 집합으로 프로그램을 표현하는 프로그래밍 패러다임
객체지향 프로그래밍은 실세계의 실체(사물이나 개념)를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다.
실체는 특징이나 성질을 나타내는 속성(attribute/property)를 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있다.
템플릿 리터럴 `` 백틱 -> 문자열 + 데이터
// 이름과 주소 속성을 갖는 객체
const person = {
name: 'Lee',
address: 'Seoul'
}
console.log(person) //{name: 'Lee', address: 'Seoul'}객체 : 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조
객체지향 프로그래밍 : 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임
원(circle) 개념을 객체로 만들어보자
원에는 반지름이라는 속성이 있다. 이 반지름을 가지고 원의 지름, 둘레, 넓이를 구할 수 있다.
이때 반지름은 원의 상태를 나타내는 데이터이며, 원의 지름, 둘레, 넓이를 구하는 것은 동작이다.
const circle = {
radius: 5, //반지름 : 상태를 나타내는 데이터
//원의 지름: 2r
getDiameter() {
return 2 * this.radius
},
//원의 둘레: 2𝝅
getPerimeter() {
return 2 * Math.PI * this.radius;
},
//원의 넓이: 𝝅rr
getArea() {
return Math.PI * this.radius ** 2
}
};
console.log(circle)
// {radius: 3, getDiameter: f, getPerimeter: f, getArea: f}
console.log(circle.getDiameter()); //10
console.log(circle.getPerimeter()); //31.415926...
console.log(circle.getArea()); //78.539816...이처럼 객체지향 프로그래밍은 객체의 상태(state)를 나타내는 데이터와 상태를 데이터를 조작할 수 있는 동작(be-havior)을 하나의 논리적인 단위로 묶어 생각한다.
따라서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조
상속과 프로토타입
상속 : 객체지향 프로그래밍 핵심 개념, 어떠한 객체의 프로퍼티 또는 메소드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.
자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거
중복제거 방법 : 기존 코드를 적극적으로 ⭐재사용⭐ -> 코드 재사용은 굉장히 중요 ⭐
//생성자 함수
function Circle(radius) {
this.radius = radius;
this.getArea = function() {
// Math.PI는 원주율을 나타내는 상수
return Math.PI * this.radius ** 2;
};
}
//반지름이 1인 인스턴스 생성
const circel1 = new Circle(1);
//반지름이 2인 인스턴스 생성
const circel2 = new Circle(2);Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
getArea 메소드를 중복 생성하고 모든 인스턴스가 중복 소유한다
getArea 메소드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다.
console.log(circle1.getArea === circle2.getArea); //false
console.log(circle1.getArea()); // 3.141592...
console.log(circle2.getArea()); // 12,5663...생성자 함수는 동일한 프로퍼티(메소드 포함) 구조를 갖는 객체를 여러개 생성할 때 유용하다.
하지만 위 예제의 생성자 함수는 문제가 있다.
Circle 생성자 함수가 생성하는 모든 객체(인스턴스)는 radius 프로퍼티와 getArea메소드를 갖는다. 일반적으로 다 다른 값을 가지는 프로퍼티인 radius와 달리 getArea 메소드는 모든 인스턴스가 동일하게 사용 -> 그러므로 단 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직
위 예제의 Circle 생성자 함수의 문제점
인스턴스를 생성할때마다 getArea 메소드를 중복생성하고, 모든 인스턴스가 중복 소유한다.
이를 상속을 통하여 중복을 제거해보자~! --> 자바스크립트는 프로토타입을 기반으로 상속을 구현한다.
프로토타입 기반 상속
//생성자 함수
function Circle(radius) {
this.radius = radius;
}Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메소드를 공유해서 사용할 수 있도록 프로토 타입에 추가하자~!
프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 *바인딩되어 있다,
바인딩 bind : 묶다, 결속시키다
즉 메서드와 객체를 묶어놓는 것을 바인딩이라 한다.
Circle.prototype.getArea = function () {
return Math.PI * this.radius ** 2;
};
//인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는 프로토타입 Circle.prototype으로 부터 getArea 메소드를 상속받는다.
즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메소드를 공유한다.
console.log(circle1.getArea === circle2.getArea); //true
console.log(circle1.getArea()); //3.141592...
console.log(circle2.getArea()); //12.5663...
Circle 생성자 함수가 생성한 모든 인스턴스는 자신의 프로토타입, 즉 상위(부모)객체의 역할을 하는 Circle.prototype의 모든 프로퍼티와 메소드를 상속받는다.
getArea 메소드는 단 하나만 생성되어 프로토타입인 Circle.prototype의 메소드로 할당되어 있다. 따라서 Circle 생성자 함수가 생성하는 모든 인스턴스는 getArea 메소드를 상속받아 사용할 수 있다.
상속은 코드의 재사용이란 관점에서 매우 유용하다.
생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메소드를 프로토타입에 미리 구현해 두면 생성자 함수가 생성할 모든 인스턴스는 별도의 구현없이 상위(부모) 객체인 프로토타입의 자산을 공유하여 사용할 수 있다.
프로토타입은 어떠한 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티 (메소드 포함)를 제공한다. 프로토 타입을 상속받은 하위 (자식) 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.
모든객체는 [[prototype]]이라는 내부 슬롯을 가진다
객체가 생성될 때 객체 생성 방식에 따라 프로토타입이 결정되고 [[prototype]]에 저장된다.
모든 객체는 하나의 프로토타입을 갖는다. 그리고 모든 프로토타입은 생성자 함수와 연결되어 있다.
즉, 객체와 프로토타입과 생성자함수는 서로 연결되어있다.
화살표 함수 특징
- new 생성자로 객체 생성 불가능함 : 생성자
- 내부에서 this라는 것을 기본적(객체자기자신)으로 활용 불가능
화살표 함수 관련 --> this
1. new 객체 생성되었다면 내부 this -> 객체 자기 자신
2. 일반 함수에서 this를 호출하게 되면 -> window
function Test() {
console.log(this) -> 2. 생성자 함수 내부에서 this사용가능, 일반함수에서 this는 window를 가리킨다.
}
let test = new Test() -> 1. new 키워드를 통해 객체를 생성해야만