책 읽다가 코딩하다 죽을래

🧾 이 강의는 시리즈 별로 되어있습니다. 이 강의를 읽은 후에 확인하세요! 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함수에서 -> 함수 내부에서와 동일 생성자 함수에서 -> 인..

Promise는 콜백함수 대신에 비동기적인 처리를 할 수 있는 것이다. 비동기가 무엇인지 모른다면 다음 글을 보자 자바스크립트 비동기 [클릭] Promise의 중요한 요소는 State와 Producer, Consumer가 있다. state는 자신의 일이 다 처리되었는지 아닌지의 현재 상태를 나타내 주는 것이고 Producer는 데이터를 제공하는 사람이며 Consumer는 데이터를 소비하는 사람을 일컫는데 개념만 보면 뭔 소리하는지 못 알아듣겠으니 코드를 보자 //1. Producer const promise = new Promise((resolve, reject) => { //여러가지 로직(네트워크 통신 및 파일 처리 등등) console.log('doing something...'); setTimeou..

callback 함수는 비동기 함수이다. 비동기 함수에 대해서 잘 모른다면 아래의 게시물부터 보고오자 자바스크립트 비동기[클릭] 콜백함수는 쉽게 말하자면 일을 다른 객체에게 시키고, 그 일이 끝날 때까지 기다리는 것이 아니라 그 객체가 나를 다시 부를 때까지 다른 할 일을 하고 있는 것이고, 정확히 말하자면 제어권을 객체에게 넘겨주는 것이다. 사용자가 계속 실행하기 귀찮으니 실행제어권을 객체에게 넘겨주는 것이다. 이 콜백함수는 비동기 처리를 하기 위한 패턴 중 하나이다. setInterval(() => { console.log('1초마다 실행될 겁니다.'); }, 1000); 콜백함수의 예시는 setInterval이 있다. setTimeout이 지정한 시간이 지나면 지정한 함수가 1회 실행된다면 setI..

자바스크립트는 동기적인 언어이다. 동기적인 것이 무엇이냐 하면은 동기 (Synchronous: 동시에 일어나는) 말 그대로 동시에 일어나는 뜻인데 프로그래밍적인 개념으로 말하자면 요청과 그에 대한 결과가 동시에 일어나는 것이다. function add(a,b){ return a + b; } let a = 3; let b = 6; let c = add(a,b);// add함수의 호출(요청)과 결괏값을 반환(결과)전까지 다음코드로 진행되지 않는다. console.log(c); 이러한 특성때문에 대부분의 프로그래밍 언어는 절차지향처럼 코드가 위에서 아래로 작동한다. 아래에 있는 코드는 위에 있는 코드보다 먼저 실행될 수 없다. 여기서 비동기라는 것은 무엇이냐하면 동기가 아닌 것들이다. 비동기(Asynchron..

자바스크립트의 함수도 다른 언어와 달리 신기한 특징을 갖는다. 자바스크립트 함수는 값(value)이 될 수 있다. const printFn = function(){ console.log('fn'); } printFn; // ƒ (){ // console.log('fn'); // } printFn(); // fn 그래서 이렇게 변수에 저장할 수 있으며, 변수에 () 을 붙이면 함수가 실행되고 변수만 적으면 함수 내용을 문자형으로 출력한다. 함수를 정의하는 데에는 함수선언문과 함수 표현식이 있다. // 함수 선언문 function printFn(){ console.log('fn'); } // 함수 표현식(anonymouns funciton) const printFn = function(){ console.l..

이번 시간에는 자바스크립트의 객체의 특징에 대해 설명해보겠다. 자바스크립트의 객체는 Object라 하며 선언은 다음과 같다. 객체의 선언 및 접근 더보기 const obj1 = {}; const obj2 = new Object(); const ablue = {name:'ablue', age: 26}; // 선언과 초기화를 동시에 하는 법 객체는 "key" : value로 이루어져 있다. c언어의 구조체와 자바의 해쉬 맵과 파이썬의 딕셔너리와 비슷하다. 그런데 여기서 key는 무조건 string형이며 value는 어떤 타입이든 상관없다. console.log(ablue['name']); //이렇게 배열형태로 데이터에 접근할 수 있다. 주의할 점은 배열의 인덱스는 String타입으로 줘야한다. name으로 ..

scope는 어떤 하나의 데이터가 어느 정도의 범위를 가져 영향을 주는지의 대한 개념이다. function fn(){ int a = 1; } fn(); system.out.println(a); 자바나 c++을 배웠다면 위의 코드가 이상하다고 생각할 것이다. 왜냐하면 함수 밖에서 함수 안에 있는 a를 접근하면 분명 오류가 일어나기 때문이다. 즉 함수 안에서 선언된 a는 밖에서 접근할 수 없는 것 a의 scope는 함수 fn 범위 안이라고 정의할 수 있다. 자바스크립트에서의 scope는 다양해서 헷갈릴 것이다. 이번 시간에 자세히 알고 가자. 자바스크립트 내에 데이터 타입은 크게 var, let, const로 나뉜다. 여기서 let과 const는 스코프가 같으니 var와 let, const 이렇게 설명하겠다..