둘기노트 둘기노트

프로토타입? 그거 어려운거 아니야? 코어자바스크립트 스터디를 시작하며, 항상 어려워했던 "프로토타입"을 주제로 발표를 하게 되었다.. 하여 블로그에 프로토타입에 대해 내가 이해한바를 공유하고자 한다. (미래의 내가 이 글을 본다면.. 대체 왜 이렇게 이해했지? 라는 생각을 들수도 있을 것 같단 생각이 들지만 최선을 다해보고자 한다) 프로토타입이란? 먼저 코어자바스크립트의 저자는 아래의 그림을 이해하면 프로토타입의 모든것을 이해할 수 있다고 말한다. var instance = new Constructor(); 위의 코드를 형상화 한 것이 바로 위의 도식이다. 이에 대해 저자는 다음과 같이 설명하고 있다. 생성자 함수를 new 연산자와 함께 호출하면.. Constructor를 바탕으로 새로운 instance..

오늘은 ES6 함수의 추가 기능에 대해 알아보려한다. ES6 이전의 함수는 명확한 구분이 없었으나, ES6 이후 함수는 다음과 같은 구분을 가진다. 일반 함수 메서드 (ES6)이전에는 없었다!! 화살표 함수 (ES6)이전에는 없었다!! 여기서 일반 함수의 경우, 메서드와 화살표 함수와는 달리 constructor 와 prototype 을 가진다고 한다. 이는 ES6전과 동일하다! 메서드 객체안에 선언된 함수를 우리는 메서드라고 부른다! 이때 축약표현으로 정의된 함수만 메서드, 일반적으로 정의 된 함수는 일반함수이다. const jiyun = { x:1, // 메서드 apple() {return this.x;}, // 일반 함수 banana: function() {return this.x;} }; ES6에..

오늘은 클래스에 대해 알아보도록 한다. 원래 자바스크립트 언어는 우리를 힘들게 하는 프로토타입 기반의 언어이다. 하여 이전 ES5에서는 프로토타입을 통해 생성자 함수와 객체지향 언어를 구현할 수 있었다! 이후 등장한 클래스(aka. 붕어빵틀)는 생성자 함수와 매우 유사하게 동작한다. 하지만 우리가 알아야 할 몇가지 차이점이 있다! 클래스를 new 연산자 없이 호출하면 에러 발생! 클래스는 상속을 가능케하는 extends와 super키워드를 제공한다. (생성자 함수는 그렇지 못함) 클래스는 호이스팅이 발생하지 않는 것처럼 동작함! (하지만 사실 됨) 클래스 코드 내 암묵적으로 strict mode가 실행됨 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enu..

오늘은 함수와 일급 객체에 대해 알아보도록 한다. 일급 객체란? 무명의 리터럴로 생성할 수 있다 (런타임에 생성 가능) 변수, 객체, 배열 등에 저장할 수 있다 함수의 매개변수에 전달 가능하다. 함수의 반환값으로 사용할 수 있다. 위의 조건을 모두 충족하는 것이 일급 객체! (다할 수 있는 만능이란 뜻인 것 같다) 그렇다면 우리가 알고 있는 것들 중 일급 객체인 것들은? *함수는 일급 객체이다 * (first class object) // *딥다이브 예제로 나온 더하기, 빼기 함수 // 1. 무명으로 생성할 수 있다 // 2. 변수에 넣을 수 있다 const increase = function(num){ return ++num; }; const decrease = function(num){ return ..

오늘은 11장의 원시 그리고 객체 타입에 대해 알아보도록 한다. 자바스크립트의 다양한 데이터타입은 크게 원시 타입과 객체 타입으로 나뉜다. 먼저 원시 타입이란 변경이 불가능한 값이다. 이는 읽는 것만 가능한 값으로 변경할 수 없다. 변수가 주머니라면, 값은 메모리 공간을 차지하는 저장된 데이터 이다. 여기서 변경이 불가한 것은 변수가 가진 값을 의미한다. const a = {}; //const 의 값은 재할당이 불가능하다. var나 let과 같은 변수가 가진 값이 재할당 되면 값은 여전히 같은 메모리 공간을 차지하지만, var와 let이 가르키는 값과 주소가 바뀐다. 따라서 해당 변수들이 이전에 가지고 있던 값들은 여전히 존재하며, 변경이 불가하다. (메모리 효율에 안좋을 듯 하다) 문자열은 원시 타입이..

오늘은 모던자바스크립트 10장의 객체 리터럴에 대해 알아보려고 한다. 먼저 자바스크립트는 객체 기반의 프로그래밍 언어이며 변경이 가능한 값(mutable value)이다. 객체는 프로퍼티(property)로 구성되어 있으며, 속성은 키key와 값value로 구성되어있다. 따라서 이런 모습이다. let class { //프로퍼티 반 : 1, 번호: 2, 이름 : "하늘" }; 이때 프로퍼티 값이 함수일 경우, 함수와 구분하기 위해 메서드method라고 부른다. 프로퍼티의 역할은 객체의 상태를 나타내는 값이며, 메서드의 역할은 프로퍼티를 참조하고 조작할 수 있는 동작이다. 객체를 생성하는 방법 중 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다. // 1. 객체 리터럴은 중괄호 {...}안에 ..

6장에서는 자바스크립트의 다양한 데이터타입을 소개하고있다. 함께 알아보자! 데이터에는 다음과 같은 타입(종류)가 있다: 숫자타입 - number 문자열 - string 불리언 - true / false undefined null symbol 객체 - 객체, 함수, 배열 항상 헷갈리는 undefined는 var 키워드로 선언된 변수에 암묵적으로 할당되는 값이라고 하는데.. 변수가 정의되지 않았을 때 undefined가 할당되게 된다. null은 값이 없다는 것을 명시할 때 사용되는 값으로 empty object를 가르키는 타입니다. 각각의 타입에 대해 조금 더 깊이있게 알아보자. 숫자 타입 var integer = 10; //정수 var double = 10.11; // 실수 var negative = -..

이번장은 표현식과 문에 대한 개념을 정리해주었다. 크게 어렵지 않고 용어정리용으로 간단하다. 시작해보자! 값이란? 10 + 20 값이란 표현식 (10 + 20)이 평가(계산)되어 생성된 결과(30)이다. 리터럴? 리터럴은 사람이 이해할 수 있는 문자, 약속된 기호를 사용해 값을 생성하는 표기법이다. 4 자바스크립트에서 위의 '4'는 아라비아 숫자로 표기된 '숫자 리터럴'이다. 리터럴은 다양한 종류의 값을 생성할 수 있다. 정수 리터럴, 부동소수점 리터럴, 2진수, 8진수, 16진수, 문자열, 불리언, null, undefined, 객체, 배열, 함수, 정규표현식 등... 표현식? 값으로 평가될 수 있는 문statement이다. 값으로 평가될 수 있는 문은 모두 '표현식..