CoreJavaScript-study12 [발표5회차] 클래스 01 자바스크립트의 클래스 개념자바스크립트와 클래스자바스크립트는 프로토타입 기반 언어로 '상속' 개념이 원래 존재하지 않음.ES6에서 클래스 문법이 추가되어 클래스와 유사한 기능을 구현 가능.프로토타입을 활용해 클래스를 흉내내는 방식 이해 필요.02 클래스와 인스턴스클래스 (Class)클래스는 객체의 구조와 동작을 정의한 설계도 역할.클래스는 추상적 개념이며, 개체의 공통 속성을 정의함.인스턴스 (Instance)인스턴스는 클래스를 기반으로 생성된 구체적인 개체.클래스의 속성을 모두 만족하는 구체적인 예시가 인스턴스.예시: 음식 → 과일 → 귤류음식: 과일의 슈퍼클래스, 귤류의 슈퍼 슈퍼클래스과일: 음식의 서브클래스, 귤류의 슈퍼클래스귤류: 과일의 서브클래스, 음식의 서브 서브클래스인스턴스 예시: 귤류의.. 2024. 9. 3. [DIL] 07 클래스 01 클래스와 인스턴스의 개념 이해그림처럼 음식과 과일은 모두 집단, 즉 클래스이다. 음식은 과일보다 상위의 개념이고, 과일은 음식보다 하위의 개념이다. super-, sub-를 접목해서 상위클래스, 하위클래스라고 표현한다.그렇다면 과일 분류 하위에 또 다른 분류가 있을 경우 클래스 간의 관계는 어떻게 될까?음식은 과일의 superclass이다. 과일은 음식의 subclass이면서 귤류의 superclass이다. 귤류는 과일의 subclass이다. 한편 음식은 귤류의 super-superclass이다. 귤류는 음식의 sub-subclass이다. 하위 개념은 상위 개념을 포함하면서 더 구체적인 개념이 추가된다. 예를 들어, 최상위 분류인 음식 클래스는 '먹을 수 있다' 정도라면, 하위의 과일 클래스는 '먹.. 2024. 8. 26. [발표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. [DIL] 06 프로토타입 자바스크립트는 프로토타입 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 유명한 프로그래밍 언어의 상당수가 클래스 기반인 것에 비교하면 프로토타입은 꽤나 독특한 개념이라 할 수 있다. 01 프로토타입의 개념 이해 6-1-1 constructor, prototype, instance위 그래프를 코드로 작성하면 다음과 같다.var instance = new Constructor(); 더 구체적으로 바꾸면 다음과 같다.윗변(실선)의 왼쪽 꼭짓점에는 Conjstructor(생성자 함수)를, 오른쪽 꼭짓점에는 Constructor . prototype이라는 프로퍼티를 위치시켰다. 왼쪽 꼭짓점으.. 2024. 7. 22. [발표3회차] 클로저 개념정리클로저는 자바스크립트에서 중요한 개념 중 하나이다. 이 개념을 이해하려면 함수와 변수가 어떻게 동작하는 지 알아야 한다. 우선, 함수는 특별한 종류의 '작업'을 수행하는 코드 뭉치이다. 예를들어 우리가 만든 함수를 호출하면 그 안에 있는 코드들이 실행된다.클로저는 이 함수와 그 함수가 만들어진 환경(변수들의 집합)을 함께 기억하는 것이다. 이 말은 함수 안에서 정의된 함수가 외부 함수의 변수들에 접근할 수 있는 것이다.function outerFunction() { let outerVariable = '안녕'; // 바깥 함수에서 선언된 변수 function innerFunction() { console.log(outerVariable); // 바깥 함수의 변수를 사용 } return.. 2024. 7. 18. [DIL] 05 클로저 01 클로저의 의미 및 원리 이해MDN에서는 클로저에 대해 "클로저는 함수와 그 함수가 선언될 당시 lexical environment의 상호관계에 따른 현상"이라고 정의하고 있다. 선언될 당시 lexical environment는 2장에서 소개한 실행 컨텍스트의 구성 요소 중 하나는 outerEnvironmentReference에 해당한다. LexicalEnvironment의 environmentRecord와 outerEnvironmentReference에 의해 변수의 유효범위인 스코프가 결정되고 스코프체인이 가능해진다고 했다. 어떤 컨텍스트 A에서 선언한 내부함수 B의 실행 컨텍스트가 활성화된 시점에는 B의 outerEnvironmentReference가 참조하는 대상인 A의 LexicalEnviro.. 2024. 7. 15. [DIL] 04 콜백 함수 01 콜백 함수란콜백 함수는 다른 코드의 인자로 넘겨주는 함수이다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행한 것이다. callback은 '부르다', '호출(실행)하다'는 의미인 call과, '뒤돌아오다', '되돌다'는 의미인 back의 합성어로, '되돌아 호출해달라'는 명령이다. 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보낸다. 이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출한다.이처럼 콜백 함수는 다른 코드 (함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적.. 2024. 7. 13. [DIL] 03 this 01 상황에 따라 달라지는 this자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, 바꿔 말하면 this는 함수를 호출할 때 결정된다고 할 수 있다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것이다. 3-1-1 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있다. 브라우저 환경에서 전역객체는 window이고 Node.js 환경에서는 global이다. 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당한다. 변수이면서 객체의 프로퍼.. 2024. 7. 10. [발표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. [DIL] 02 실행 컨텍스트 01.실행 컨텍스트란?실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 우선 스택stack과 큐queue의 개념을 살펴보자. 스택은 출입구가 하나뿐인 깊은 우물 같은 데이터 구조로 최신 데이터가 제일 먼저 나가고, 큐는 양쪽 모두 열려있는 파이프와 같은 구조로 먼저 들어간 데이터가 제일 먼저 나온다.동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택call stack에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보. 선언 시점의 LexicalEnvironment의.. 2024. 7. 4. [DIL] 01 데이터타입 [출처/ 코어 자바스크립트]01. 데이터 타입의 종류02. 데이터 타입에 관한 배경지식1-2-1 메모리와 데이터컴퓨터는 모든 데이터를 0 또는 1로 바꿔 기억한다. 0 또는 1만 표현할 수 있는 하나의 메모리 조각을 비트bit라고 한다. 메모리는 매우 많은 비트들로 구성돼 있는데 각 비트는 고유한 식별자unique identifier를 통해 위치를 확인할 수 있다.그런데 비트 단위로 위치를 확인하는 것은 매우 비효율 적이므로 몇 개씩 묶어 하나의 단위로 여긴다면 표현할 수 있는 값도 늘어나면서 검색시간도 줄일 수 있다.하지만 이처럼 하면 동시에 낭비되는 비트가 생기기도 한다. 표현 가능한 개수에 어느 정도 제약이 따르더라도 크게 문제가 되지 않을 적정 공간을 묶는 편이 낫다는 생각으로 바이트byte 단위.. 2024. 7. 2. 이전 1 다음
