다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더이상 액세스 할 수 없는 경우에도 내부 함수는 외부 함수의 변수 및 범위에 액세스 할 수 있다. let num1 = 1; const A = () => { let num2 = 2; console.log(num1, num2, num3); }; const B = () => { let num3 = 3; console.log(num1, num3); A(); }; B(); let num1 = 1; const B = () => { const A = () => { let num2 = 2; console.log(num1, num2, num3); }; let num3 = 3; console.log(num1, num3)..

부모 클래스를 자식클래스에 확장하는 것, 부모 클래스에 있던 기능들로 자식 클래스를 만들 수 있다. extends 키워드를 사용하고, super() 를 사용해 부모 클래스의 속성을 물려받을 수 있다. class Person { constructor(name, age, job) { this.name = name; this.age = age; this.job = job; } sayHello() { return `안녕 나는 ${this.name}야 정말 반가워`; } static sumAllNumbers(min, max) { let result = 0; for (let i = min; i < max + 1; i++) { result += i; } return result; } } class Student ex..

ES6 에서 나온 Class 를 이용해서 쉽게 OOP 를 구현할 수 있다. 문법은 OOP 방식을 이용하지만 내부에서는 prototype 을 사용하며 작동한다. class Person { constructor(name, age, job) { this.name = name; this.age = age; this.job = job; } sayHello() { return `안녕 나는 ${this.name}야 정말 반가워`; } } const yeon = new Person("yeon", 29, "false"); console.log(yeon); console.log(yeon.sayHello()); - constructor 는 인스턴스의 생성과 동시에 클래스 필드의 생성과 초기화를 실행, 또 constructo..

객체를 만들면 prototype 이라는게 생긴다. 모든 객체는 global Object prototype 을 가진다. prototype 이란? 자바스크립트 객체가 다른 객체로 부터 메서드와 속성을 상속받는 메커니즘이다. ( prototype chain ) prototype 을 사용 함으로서 더 적은 메모리를 사용할 수가 있고 코드를 재사용 할 수 있다. 예시 출처 : mdn javascript 속성상속 // o라는 객체가 있고, 속성 'a' 와 'b'를 갖고 있다고 하자. let f = function () { this.a = 1; this.b = 2; } let o = new f(); // {a: 1, b: 2} // f 함수의 prototype 속성 값들을 추가 하자. f.prototype.b = 3..

객체지향 프로그래밍은 객체들의 모임이다. 객체는 알아보기 쉽고 재사용성이 높다. 특징 1) 자료 추상화 (Abstraction) 불필요한 정보는 숨기고 중요한 정보만을 표현해 프로그램을 간단하게 만든다. 객체 안에 자세한 내용을 몰라도 중요 정보를 이용해 해당 객체 사용 2) 상속 (Inheritance) 새로운 클래스의 자료와 연산을 이용할 수 있게하는 기능 이를 통해 기존의 클래스를 상속받은 하위 클래스를 이용해 프로그램 요구에 맞춰 클래스를 수정하고 클래스간 종속 관계를 형성할 수 있다. 3) 다형성 (Polymorphism) 다양한 형태를 가질 수 있다. 같은 메소드라도 각 인스턴스에 따라 다양한 형태를 가질 수 있다. 오버 라이딩(Overriding) 을 사용하여 자식 클래스의 메서드가 부모 클..

DOM (Document Object Model) DOM (문서 객체 모델) 은 메모리에 웹 페이지 문서구조를 트리구조로 표현해 브라우저가 페이지를 인식하게 해준다. JS 를 이용해 요소들을 제어할 수 있다. 조작 DOM API 를 이용해 조작할 수 있다. 응애 나 애기버튼 /* document는 브라우저에서 제공하는 window 객체의 이다. */ const button = document.querySelector('.button'); button.onclick = function(){ this.style.backgroundColor = 'blue'; } 웹 페이지 빌드 과정 (Critical Rendering Path CRP) 1. 렌더 엔진이 문서를 읽어 파싱, DOM tree 생성 2. DOM C..