codeStates front-end/Java Script
-
[JS] 실습 - BeesbeesbeescodeStates front-end/Java Script 2023. 1. 16. 19:42
📌 Beesbeesbees 📖 학습 목표 클래스와 인스턴스에 대해 이해하고 있다. 프로토타입이 무엇인지 알고 각자 비교할수 있다. 프로토타입 체인을 활용할수 있다. 👶 나의 실습 1) 코딩 전 최상위 클래스가 어딘지를 확인 2) 부모 - 자식관의 관계를 명확히 이해 3) 상속 명령어 사용 4) this, super의 이해 const Grub = require('./Grub'); class Bee extends Grub { // Grup의 속성을 상속 받는다 constructor() { super(); // 상위 클래스의 생성자를 호출 this.age = 5; // Bee.age의 속성 정의 this.job = 'Keep on growing'; // Bee.job의 속성 정의 this.color = 'ye..
-
[JS] chapter18. 포로토타입과 체인codeStates front-end/Java Script 2023. 1. 13. 11:49
📌 프로토타입과 체인 상속 -> 프로토타입 체인 실습 코드 학생과 사람이라는 클래스가 각각 존재한다고 가정 human 객체 구현 let kimcoding = new Human('김코딩', 30); // 속성 kimcoding.age; kimcoding.gender; // 메서드 kimcoding.eat(); kimcoding.sleep(); human의 기본적인 메서드를 상속 let parkhacker = new Student('박해커', 22); // 속성 parkhacker.grade; // 메서드 parkhacker.learn(); 코드설명 박해커 -> student student는 human의 특징을 그대로 물려받게 된다면 박해커의 나이 성별 확인 가능 부모 클래스 -> 자식 클래스로 가는 과정을..
-
[JS] chapter17. 프로토타입과 클래스codeStates front-end/Java Script 2023. 1. 13. 11:38
📌프로토 타입과 클래스 프로토타입 기반 언어 프로토 타입은 원형 객체를 의미 객체의 특성을 다른 객체로 상속하는 것을 가능하게 하는 매커니즘;] __proto__ 특정 객체의 프로토타입 객체에 접근할 수 있는 property es6부터 getPrototypeof 호출 __proto__ 와 .prototype 의 차이 __proto__ 모든 객체가 가지고 있다. 하나의 Link 라고 할 수 있다. prototype 함수 객체만 가지고 있다. 생성자를 가지는 원형으로 선언 할 수 있다. 실습코드 class Human { constructor(name, age) { this.name = name; this.age = age; } sleep() { console.log(`${this.name}은 잠에 들었습니다..
-
[JS] chapter16. 객체 지향 - 객체 지향 프로그래밍codeStates front-end/Java Script 2023. 1. 13. 11:18
📌 객체 지향 언어 초기 프로그래밍 언어 - 절차적 언어 클래스라고 부르는 데이터 모델의 청사진을 사용해 코드 작성 OOP 프로그램 설계 철학 모든 것은 객체로 그룹화 4가지 주요 개념을 통해 재사용성을 얻을 수 있음 oop Basic Concepts Encapsulation(캡슐화) - 단위로 묶는 것, 은닉, 느슨한 결합 -> 복잡을 줄이고 재사용성을 높임 Inheritance(상속) - (중요) 기본 클래스의 특징을 파생 클래스가 상속받는다는 표현 Abstraction(추상화) - 단순하게 만드는 개념 -> 코드 복잡 x Polymorphism(다형성) - 다향한 형태 클래스와 인스턴스 https://hwantech.tistory.com/159 [JS] chapter15. 객체 지향 - 클래스와 인..
-
[JS] chapter15. 객체 지향 - 클래스와 인스턴스codeStates front-end/Java Script 2023. 1. 13. 11:05
📌 클래스와 인스턴스 🧷 객체 지향 프로그래밍 하나의 모델이 되는 청사진을 만들고 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴 청사진 - class 객체 - instance class - 대문자로 시작하며 일반명사로 만든다 속성과 메소드를 정의 function Car(color) {} // 클래스는 함수 정의 가능 // ES6에서는 class 라는 키워드를 이용해 정의 가능 class Car { constructor(brand, name, color) // 인스턴스가 만들어질 때 실행되는 코드 } instance - 클레스에서 정의한 속성과 메소드를 이용 let avante = new Car('blue') // 각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메소드를 갖는다 let mini..
-
[JS] chapter14. 객체 지향 - 클로저 모듈 패턴codeStates front-end/Java Script 2023. 1. 13. 10:40
📌클로저 모듈 패턴 메서드 호출 객체.메서드() -> 객체 내에 메서드를 호출하는 방법 ⚠️ 화살표 함수 x 카운터 구현 예제 let counter1 = { value: 0, increase: function() { this.value++ // 메서드 호출을 할 경우, this는 counter1을 가리킵니다 }, decrease: function() { this.value-- }, getValue: function() { return this.value } } counter1.increase() counter1.increase() counter1.increase() counter1.decrease() counter1.getValue() // 2 클로저를 이용해 매번 새로운 객체 생성 클로저란? 함수를 리..
-
[JS] chapter14. 내장고차함수codeStates front-end/Java Script 2023. 1. 12. 13:59
📌 내장 고차 함수 JS에서는 기본적으로 내장된 고차 함수가 있다 배열 메서드들 중 일부가 대표적인 고차 함수 1. filter 배열 메서드이며, 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드 filter 과정 배열의 각 요소가 특정 논리(함수)에 따르면, 사실(true)일 때 따로 분류(filter). // 아래 코드에서 '짝수'와 '길이 5 이하'는 문법 오류(syntax error)에 해당합니다. // 의미만 이해해도 충분합니다. let arr = [1, 2, 3, 4]; let output = arr.filter(짝수); console.log(output); // ->> [2, 4] arr = ['hello', 'code', 'states', 'happy', 'hacking..
-
[JS] chapter13. 고차함수codeStates front-end/Java Script 2023. 1. 12. 09:35
📌고차함수 일급객체에는 함수가 있다 -함수 변수에 할당할 수 있다 다른 함수의 전달인자로 전달될 수 있다 다른 함수의 결과로서 리턴될 수 있다 -고차함수 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수 변수에 할당하지 않고 함수를 바로 이용 -콜백함수 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 함수의 전달인자로 전달되는 함수 콜백함수를 전달받은 고차함수는 함수 내부에서 이 콜백 함수를 호출 가능 functio func(callback) { callback(); } function callback() { console.log("callback이다"); } func(callback); 결과 : callback이다 1. 다른 함수를 인자로 받는 경우 function doubl..