CoreJavaScript-study/presentation5 [발표5회차] 클래스 01 자바스크립트의 클래스 개념자바스크립트와 클래스자바스크립트는 프로토타입 기반 언어로 '상속' 개념이 원래 존재하지 않음.ES6에서 클래스 문법이 추가되어 클래스와 유사한 기능을 구현 가능.프로토타입을 활용해 클래스를 흉내내는 방식 이해 필요.02 클래스와 인스턴스클래스 (Class)클래스는 객체의 구조와 동작을 정의한 설계도 역할.클래스는 추상적 개념이며, 개체의 공통 속성을 정의함.인스턴스 (Instance)인스턴스는 클래스를 기반으로 생성된 구체적인 개체.클래스의 속성을 모두 만족하는 구체적인 예시가 인스턴스.예시: 음식 → 과일 → 귤류음식: 과일의 슈퍼클래스, 귤류의 슈퍼 슈퍼클래스과일: 음식의 서브클래스, 귤류의 슈퍼클래스귤류: 과일의 서브클래스, 음식의 서브 서브클래스인스턴스 예시: 귤류의.. 2024. 9. 3. [발표4회차] 프로토타입 객체와 생성자 함수자바스크립트에서 객체를 많이 쓰이는데 객체는 이름과 값을 가지는 속성들의 모음이다. let person = { name: 'John', age: 30, greet: function() { console.log('Hello, my name is ' + this.name); }}; 여기서 person 객체는 name, agem, greet을 가지고 있다. 이러한 형태로 여러 개를 만들고 싶다면 아래처럼 생성자 함수를 사용할 수 있다. function Person(name, age) { this.name = name; this.age = age; this.greet = function() { console.log('Hello, m.. 2024. 7. 24. [발표3회차] 클로저 개념정리클로저는 자바스크립트에서 중요한 개념 중 하나이다. 이 개념을 이해하려면 함수와 변수가 어떻게 동작하는 지 알아야 한다. 우선, 함수는 특별한 종류의 '작업'을 수행하는 코드 뭉치이다. 예를들어 우리가 만든 함수를 호출하면 그 안에 있는 코드들이 실행된다.클로저는 이 함수와 그 함수가 만들어진 환경(변수들의 집합)을 함께 기억하는 것이다. 이 말은 함수 안에서 정의된 함수가 외부 함수의 변수들에 접근할 수 있는 것이다.function outerFunction() { let outerVariable = '안녕'; // 바깥 함수에서 선언된 변수 function innerFunction() { console.log(outerVariable); // 바깥 함수의 변수를 사용 } return.. 2024. 7. 18. [발표2회차] this와 콜백함수 this란this는 자기가 속한 객체를 가리킨다. 객체를 속상과 메서드(함수)를 가질 수 있는 일종의 상자라고 생각해보면 this는 그 상자 안에서 "내가 지금 속한 상자가 무엇인지"를 알려주는 역할을 한다. 아래 설명을 통해 각 상황에 따른 this를 살펴보자. 객체 내부에서 const 사람 = { 이름: '철수', 자기소개() { console.log(this.이름); // this는 '사람' 객체를 가리킴 }};사람.자기소개(); // "철수" 출력 this는 '사람'이라는 객체를 가리키고 있다. 그래서 'this.이름'은 '사람.이름'과 같다. 전역에서는 this는 윈도우를 가리킨다.전역에서 this는 브라우저 환경에서는 window라는 큰 상자를 가리킨다. 이 상.. 2024. 7. 8. [발표1회차] 실행 컨텍스트(Execution Context)와 스코프 실행 컨텍스트란?실행 컨텍스트란 프로그래밍에서 코드를 실행할 때 그 코드를 이해하고 관리하는 일종의 환경이다. 예를 들면 수학문제를 푼다고 했을 때 책상에 앉아 연필, 종이 등이 사용하여 문제를 풀 것이다. 문제를 풀기 위해 준비환경 역할을 하는 책상처럼 코드가 실행될 때 필요한 정보나 상태를 담는 것을 실행 컨텍스트라고 한다. 실행 컨텍스트의 역할변수관리 : 코드를 실행하는 동안 사용할 변수들을 저장하고 관리한다.코드 실행 위치 관리 : 지금 코드의 어느 부분을 실행하고 있는지 추적한다.함수 호출 관리 : 코드에서 호출할 때 함수의 실행 환경을 만들어준다. 예시function sayHello() { var name = "철수"; console.log("안녕, " + name);}sayHel.. 2024. 7. 5. 이전 1 다음
