LeeHyojin Blog LeeHyojin Blog

mdn에서의 Object.create()의 정의 Object.create() 메서드는 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만듭니다. 먼저 Object.create()는 새 객체를 만들어 준다고 정의되어 있습니다. 그렇다면 이 Object.create() 메서드가 어떻게 새 객체를 만들어주는지와 constructor의 사용 법에 대해서 자세히 알아보겠습니다. Object.create()로 새 객체 만들어 보기 // Human 상위 class 생성 function Human(name) { this.name = name } //Human.prototype에 method 추가 Human.prototype.sleep = function() {console.log(`${this.na..

ES6부터 추가된 클래스 구문은 이 전까지 사용되어 왔던 객체지향 프로그래밍의 생성자 정의문의 문법 설탕 입니다. 클래스 구문을 사용하면 다양한 종류의 생성자 정의문과 생성자 상속 방법을 통일된 문법으로 간결하게 표현할 수 있습니다. 클래스 구문 종류에는 클래스 선언문과 클래스 표현식이 있습니다. 먼저 클래스를 적용하지 않은 다음과 같은 생성자 함수를 살펴보겠습니다. function Person(name, first, second){ this.name = name; this.first = first; this.second = second; } Person.prototype.sum = function(){ return this.first + this.second; } 앞의 코드를 클래스 선언문과 클래스 표..

일반 함수는 앞서 블로깅 된 4가지의 규칙을 준수합니다. 즉, 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정되는 것이었습니다. 하지만 ES6부터는 이 규칙들을 따르지 않는 특별한 함수인 화살표 함수가 추가 되었습니다. 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정됩니다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리키는 것입니다. 이를 Lexical this라 합니다. 다음 예제는 화살표 함수의 렉시컬 스코프를 나타낸 예제입니다. function foo(){ // 화살표 함수 return re..

ES6부터 추가된 화살표 함수( Arrow Function ) 표현식은 함수 리터럴의 단축 표현이고 익명 함수입니다. ( 그렇다고 함수 리터럴과 완전히 같은 건 아니므로 주의해야 합니다. ) 화살표 함수는 다음과 같이 화살표 함수 표현식으로 사용할 수 있습니다. // 기존의 함수 리터럴로 함수를 정의한 코드 let func = function (x){ return x + x; }; // 화살표 함수 표현식으로 작성한 코드 let func = (x) => { return x + x; }; // 하지만 인수가 없으면 인수를 묶는 괄호를 생략할 수 없습니다. let func = () => { return x + x; }; // 인수가 하나만 있다면 인수를 묶는 괄호를 생략할 수 있습니다. let func = ..

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 입니다. Node.js는 이벤트 기반, 논블로킹 I/O 모델을 사용해 가볍고 효율적입니다. 자바스크립트 런타임 노드는 자바스크립트 런타임이라고 했습니다. 런타임은 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻합니다. 즉, 노드는 자바스크립트로 작성한 프로그램을 컴퓨터에서 실행할 수 있게 해줍니다. 기존에 자바스크립트로 작성한 프로그램은 웹 브라우저에서만 실행할 수 있었습니다. ( 브라우저도 자바스크립트 런타임입니다. ) 하지만 브라우저 외의 환경에서 자바스크립트를 실행하게 되면 자바스크립트의 실행 속도 문제 때문에 큰 호응을 얻지 못했습니다. 2008년 구글이 V8 엔진을 사용하게 되어 크롬을 출시하였고, 당시 V8 엔..

이 전에 작성한 컨텐츠인 객체의 메서드를 호출할 때, 함수를 호출할 때, 생성자 함수를 호출할 때의 this 바인딩으로 각각의 상황에 따라 this가 정해진 객체에 자동으로 바인딩 된다는 것을 알아보았는데 자바스크립트는 이러한 내부적인 this 바인딩 이외에도 this를 특정 객체에 명시적으로 바인딩 시키는 방법도 제공합니다. 이를 가능하게 하는 것으로는 apply()와 call(), bind() 메서드 입니다. 이 메서드들은 모두 함수의 부모 객체인 Function.prototype 객체의 메서드이므로 다음과 같은 형식으로 호출하는 것이 가능합니다. func.apply( thisArg, argArr ) 여기서 기억해야 할 것은 apply() 메서드를 호출하는 주체가 함수고, apply() 메서드도 th..

자바스크립트에서 객체를 생성하는 방법에는 생성자 함수를 이용하는 방법이 있습니다. 생성자 함수는 말 그대로 자바스크립트의 객체를 생성하는 역할을 하는데 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작합니다. 먼저 생성자 함수가 동작하는 방식에 대해서 알아보겠습니다. 1. 빈 객체 생성 및 this 바인딩 생성자 함수 코드가 실행되기 전 빈 객체가 생성됩니다. 바로 이 객체가 생성자 함수가 새로 생성하는 객체이고 이 객체는 this로 바인딩 됩니다. 즉, 이후 생성자 함수의 코드 내부에서 사용된 this는 이 빈 객체를 가리킵니다. 하지만 엄밀히 말하면 여기서 생성된 객체가 빈 객체는 아닙니다. 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체와 연결되어 있으며, 이를 ..

함수를 호출하면, 해당 함수 내부에서 사용된 this는 전역 객체인 window 객체에 바인딩 됩니다. 자바스크립트의 모든 전역 변수는 실제로 전역 객체의 프로퍼티들 입니다. 전역 변수 foo 를 정의하고 출력하는 예제를 통해 정말 전역 객체의 프로퍼티인지 확인해 보겠습니다. !!! 아래의 예시와 다음에 나온 예시에서 let을 쓰지 않고 var를 사용했는데 만약 foo 변수에 let 키워드를 사용했다면 window.foo 는 undefined가 나올 것입니다. 왜냐하면 let 키워드로 선언된 변수를 전역 변수로 사용하는 경우 let 전역 변수는 전역 객체의 프로퍼티가 아니기 때문입니다. 즉, let 전역 변수는 보이지 않는 개념적인 블록 내에 존재하기 때문에 window.foo와 같이 접근할 수 없습니다..