concept
-
prototype vs __proto__ vs constructorconcept/javascript 2020. 5. 9. 00:29
출처 : 생활코딩 먼저 함수란 무엇인가 부터 알아보자 function Person(){} 자바스크립트에서 함수는 독특한 녀석이다. 함수에서 {} 안에는 statements 가 들어간다. 그런데 이건 동시에 객체(object)이기도 하다 ?!?! 그러니까 var Person = new Function(); 이랑 똑같음 function 은 window에 기본으로 정의된 Function의 instance이다. 여기서 중요한 포인트는 자바스크립트에서 함수는 객체이기 때문에 property를 가질 수 있다!! function Person(name, first, second){ this.name = name; this.first = first; this.second = second; } 만약, 이런 코드가 있다면?..
-
Instantiation Patterns (인스턴스화 패턴)concept/javascript 2020. 5. 8. 19:38
ES6 에서는 Class 라는 생성자 함수가 생겨서 instance를 쉽게 만들 수 있다. 하지만 ES6가 나오기 전 까지는 어떻게 instance를 만들었을까? 그런거 알 필요 없고 그냥 Class 쓰면 되지 않아? 라고 생각할지도 모르겠지만 이 과정에 대해서 더 자세히 공부하면 응용이 더 쉬워지겠지? 그런데 Class가 무엇이냐. Class의 개념을 먼저 짚고 가려고 한다. Class는 하나의 정형화된 모델을 만들어 두고 그 모델을 기반으로 복제품을 만들기 위해 사용하는 것이다. 즉, 옛날에는 책을 하나 만들기 위해 일일히 다 손으로 썼어야 했다면 금속활자가 만들어진 후 다량의 책을 빠른 시간에 찍어낸 세기의 발명과도 같은 것! 여기서 Class는 금속활자인 것이다. 자세한 포스팅은 2020/04/0..
-
OOP (Object Oriented Programming) - 객체 지향 프로그래밍concept/javascript 2020. 5. 8. 18:00
본 포스팅에서는 컴퓨터 세상에서 전반적으로 프로그래밍이 어떤 것인지 먼저 알아 보고 그 중에서도 자바스크립트의 특징인 객체 지향 프로그래밍에 대해서 알아볼 것이다. 먼저 객체 지향 프로그래밍에 대해서 알아보기 전에 컴퓨터 프로그래밍이 무엇인지 알아보자. 그래서 지금까지 코드 짜는 것을 열심히 배우긴 배웠는데.. (내가 프로그래밍을 하고 있는게 맞나 모르겠네) 그럼 컴퓨터 프로그래밍이 뭐지? 컴퓨터 프로그래밍이란? : 알고리즘의 모음 : step by step 프로세스의 모음이다. 그럼 그 프로그래밍을 어떻게 하지? 프로그래밍 언어를 통해서 해야한다! 프로그래밍 언어는 프로그래머가 프로그램을 개발할 수 있도록 도와주는 tool 이다. 언어에는 3가지 타입이 있다. 1. Machine Languages (기..
-
Data structure : 자료구조 (stack, queue)concept/data structure 2020. 5. 2. 18:48
stack Last in First out (후입선출) 구조예시 책상 위에 쌓아둔 책 주방에 쌓아둔 접시 하노이의 탑 활용 예 웹브라우저 방문기록(뒤로가기) 실행취소 자바스크립트에서 지원하는 다양한 stack method들이 있다. pop — Pulls (removes) the element out of the stack. ... push — Pushes (inserts) the element in the stack. ... peek — returns the item on the top of the stack, without removing it. empty — returns true if the stack is empty, false otherwise. swap — the two top most ele..
-
++, -- 를 앞에 쓴 것과 뒤에 쓴 것은 무슨 차이가 있는 것일까?concept/javascript 2020. 5. 2. 03:45
for 반복문을 쓰면서 항상 i++ 혹은 i-- 만 사용했었는데 어쩌다가 ++i 를 써야할 상황을 발견했다. 연산자를 앞에 쓰고 뒤에 쓰고의 차이가 무슨 차이인가 싶어서 찾아보게 되었다. ++/-- 연산자는 prefix, postfix 형태로 사용할 수 있다. let counter = 1; let a = ++counter; console.log(a) // 2 let counter2 = 1; let b = counter2++; console.log(b) // 1 prefix형태로 앞에 있을 경우엔 이미 증가를 하고 난 뒤의 값을 a에 넣어주지만 postfix형태로 뒤에 있을 경우엔 b에 1이란 값을 넣어준 뒤 값이 증가한다. 만약 값을 증가시키고 그 즉시 사용을 하고 싶다면 ++counter를, 값을 증가..
-
ES6 - for ... of loopsconcept/javascript - ES6 2020. 5. 2. 03:22
iterable = 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복해서 작동한다. array의 경우 const array1 = ['a', 'b', 'c']; for (const element of array1) { console.log(element); } // expected output: "a" // expected output: "b" // expected output: "c" string의 경우 let str = 'CodeStates'; for(let char of str) { console.log(char); } // C // o // d // e // S // t // a // t // e // s objec..
-
ES6 - Arrow Functions (화살표 함수)concept/javascript - ES6 2020. 5. 2. 03:12
함수를 간단하게 쓸 수 있는 방법이다. arrow function은 block scope가 생성된다. (function scope와 비교되는 말) 화살표 함수에 없는 3가지는 1. 함수이름 2. this (실행 컨텍스트) 3. arguments 이다. 먼저 arrow function을 어떻게 쓰는지 보자. :: 쓰는 방법 :: let adder = function(x){ return function(y){ return x + y; } } 이 함수를 let adder = x => { return y => { return x + y; } } 이렇게 쓸 수 있다. 여기서 끝이 아니라 return 을 생략할 수도 있다. let adder = x => y => x + y; 즉, arrow function을 통해 ..
-
ES 6 - Template literalsconcept/javascript - ES6 2020. 5. 2. 00:46
이건 아주 간단한 개념! 예제로 바로 보는게 이해하기 더 빠를 것 같다. ES5에서는 아래와 같이 구현했어야 했던 코드를 var myAge = 28; console.log("저는 " + myAge + "세 입니다."); // "저는 28세 입니다." ES6에서는 이렇게 구현할 수 있다는 것! var myAge = 28; console.log(`저는 ${myAge}세 입니다.`); // "저는 28세 입니다." 여기서 백틱 ( ` )과 ${} 이 기호를 활용한다는 것이 포인트다. 백틱은 키보드의 ~ 키에 함께 있다. 이걸 사용할 때 백틱이 나오지 않아 고생한 적이 있는데 내 노트북에서만 그런 것인지는 모르겠지만 한글로 쓰다가 이 키를 누르면 ₩ 이렇게 나온다는 것.. 영어로 전환한 후 이 키를 눌러줘야 `..