책 읽다가 코딩하다 죽을래

이 글은 자바스크립트 Deep Dive 이터러블 편을 읽고 개인적으로 정리한 글입니다.이터러블이란 이터러블 프로토콜을 준수한 객체를 말한다.말 그대로 프로토콜이니 원활한 통신을 위해 지키기로 약속한 규약이다. HTTP 프로토콜처럼 말이다.그럼 이터러블은 무엇이고, 이걸 왜 지켜야하는지 알아보도록 하자.📕 이터러블 프로토콜과 이터레이터 프로토콜이터러블은 두 가지의 프로토콜을 준수하고 있는데 그것은 바로이터러블 프로토콜과 이터레이터 프로토콜이다. 이터러블 프로토콜은 Well-Known Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환하는 것을..

우리는 흔히 this는 자기 참조, super는 부모 참조라는 간단한 공식으로 그 동작 원리를 쉽게 추론하고 있다. 본 글을 통해 this와 super의 동작 원리에 대해 배워보자 📕 this의 동작 원리 다음 코드 예시를 보자 class Person { age: number; name: string; constructor(age: number, name: string) { this.age = age; this.name = name; } getGoal(): string { return "끝까지 생존하며 자신과 똑같은 형질의 개체를 후손으로 남기는 것"; } introduce(): string { return `안녕하세요. 저는 ${this.name}입니다. ${ this.age }살이며 ${this.ge..

🤔 우린 한 번이라도 고민해본 적이 있지 않은가? 우리가 흔히 아는 배열은 다음과 같다 만약 c언어의 배열인 int sample[5] = [11,22,33,44,55]; 라는 배열이 있다고 생각해보자 그럼 첫번째부터 마지막까지 순서대로 나열되어 메모리에 할당된다는 것은 다 알고 있을 것이다. 여기서 중요한건 메모리에 들어가는 데이터 타입이 한 가지(정수를 나타내는 int는 4byte)로 통일되어있으니 모든 배열의 요소는 4바이트씩 할당되어 빈틈없이 연속적으로 나열된다. 즉 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열되는 자료구조이다. 우리는 이러한 배열을 밀집 배열(dense array)라 부른다. 하지만 자바스크립트의 배열은 다르다. const array = [ 's..

🤔 실행 환경을 배워야 하는 이유 코드는 정적이다. 여러분들이 코딩을 끝마치고 컴파일을 하여도 변함이 없고 실제 런타임 때나 서버가 돌아가는 와중에도 코드는 자기가 스스로 변하지 않는다. 하지만 이런 변함없는 코드일지라도 실제 내부적으로는 그 코드 속 변수, 함수들은 항상 똑같이 행동하지 않고, 똑같은 것을 참조하지 않는다. 그것은 대부분 자바스크립트 엔진 작동원리의 핵심 개념인 실행 환경을 알면은 굳이 컴파일을 하지 않아도 예상할 수 있게 된다. 또한 개발자는 당연히 예상이 가능해야지 정상적인 개발을 할 수 있을 것이다. 그러므로 이런 동적인 움직임을 갖고 있는 자바스크립트 코딩을 하려면 실행 환경을 배워야 한다. 또한 이 개념은 hosting, this와도 밀접한 연결이 있다. 📖 실행 환경의 사전적..

🧾 이 강의는 시리즈 별로 되어있습니다. 이 강의를 읽기 전에 확인하세요! 자바스크립트 프로토타입에 대해 지금 같이 알아볼까?[클릭] 이 강의를 읽은 후에 확인하세요! prototpe chaining에 대해 알아봅시다[클릭] prototype에 대해 전혀 모르신다면 위에 있는 링크를 타서 prototype의 개념부터 정리하셔야 이 글을 이해하실 수 있습니다. 이번 시간에는 prototype 개념을 사용해 자바스크립트의 메소드 상속에 대해 다뤄보겠습니다. 📚 메소드 상속 및 동작원리 function Person(n, a){ this.name = n; this.age = a; } const rose = new Person('로제',30); const gisu = new Person('지수',25); rose..

🧾 이 강의는 시리즈 별로 되어있습니다. 이 강의를 읽은 후에 확인하세요! prototype으로 배워보는 메소드 상속 및 동작 원리[클릭] prototype chaining에 대해 알아봅시다 이 글은 인프런 정재남 강사님의 JS Flow 강의를 기반으로 하여 작성하였습니다. 인프런 JS Flow 강의 보러 가기[클릭] 견우(Object.prototype)와 직녀(Object 인스턴스)를 잇는 연결고리는 오작교(인스턴스.[[prototype]])이다. 📚 프로토타입(Prototype)이란? JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가..

📚 this(자기 참조)란? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있습니다. 에서 이웅모 저 즉 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 그래서 this를 소환했을 때의 어떤 실행 컨텍스트에서 불러내었는지를 알면 이해하기 쉬워집니다. 📋 실행 컨텍스트에 따라 달라지는 this this는 다음 실행 컨텍스트에 따라 달라집니다. 전역 공간에서 -> window/global 함수 내부에서 -> window/global 메소드 호출 시 -> 메소드 호출 주체 callback함수에서 -> 함수 내부에서와 동일 생성자 함수에서 -> 인..