JavaScript(62)
-
Javascript 이벤트루프 ( event loop )
이벤트 루프를 이해하기 넘나 좋은 사이트 링크 : http://latentflip.com/loupe/ http://latentflip.com/loupe/ latentflip.com 동기와 비동기의 차이 동기는 먼저 이전의 것이 끝나야 다음 것을 할 수 있다. 줄서는느낌 비동기는 여러가지를 할 수 있다. 운전하면서 노래를 듣고 네비게이션도 확인하며 대화도 가능 - 자바스크립트는 동기 언어이다. 비동기 코드가 있을뿐 console.log() 의 경우 동기이고 setTimeout() 은 비동기이다. - 힙 : 메모리 할당이 일어남 - 호출 스택 : 실행될 코드를 한 줄 단위로 할당해 동작된다. - Web APIs : 비동기 처리 - 콜백 큐 : 비동기 처리 후 실행되야할 콜백 함수가 순서대로 할당 - 이벤트 ..
2023.05.16 -
Javascript 클로져 ( Closure )
다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더이상 액세스 할 수 없는 경우에도 내부 함수는 외부 함수의 변수 및 범위에 액세스 할 수 있다. 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)..
2023.05.16 -
Javascript OOP 상속
부모 클래스를 자식클래스에 확장하는 것, 부모 클래스에 있던 기능들로 자식 클래스를 만들 수 있다. 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..
2023.05.16 -
Javascript ES6 Classes
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..
2023.05.16 -
Javascript 프로토타입 ( prototype )
객체를 만들면 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..
2023.05.16 -
Javascript OOP 객체지향 특징
객체지향 프로그래밍은 객체들의 모임이다. 객체는 알아보기 쉽고 재사용성이 높다. 특징 1) 자료 추상화 (Abstraction) 불필요한 정보는 숨기고 중요한 정보만을 표현해 프로그램을 간단하게 만든다. 객체 안에 자세한 내용을 몰라도 중요 정보를 이용해 해당 객체 사용 2) 상속 (Inheritance) 새로운 클래스의 자료와 연산을 이용할 수 있게하는 기능 이를 통해 기존의 클래스를 상속받은 하위 클래스를 이용해 프로그램 요구에 맞춰 클래스를 수정하고 클래스간 종속 관계를 형성할 수 있다. 3) 다형성 (Polymorphism) 다양한 형태를 가질 수 있다. 같은 메소드라도 각 인스턴스에 따라 다양한 형태를 가질 수 있다. 오버 라이딩(Overriding) 을 사용하여 자식 클래스의 메서드가 부모 클..
2023.05.16