Closure 이번 Concept은 Closure에 관한 내용을 다뤄보려 합니다 :) MDN 공식사이트에 의하면 Closure는 함수와 함수가 선언된 어휘적 환경의 조합이다. … 물음표 개구리 짤을 투척하고 싶다… 도대체 이게 무슨 말이냐? Closure를 이해하기 위해선 먼저 lexical scoping이라는 이상한 단어에 대해 미리 알아두어야 한다. 다음 예제를 보겠습니다. function init() { let name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. function displayName() { // displayName() 은 내부 함수이며, 클로저다. alert(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName(); ..

순수함수, 부수효과, 상태변이 이번 Concept은 순수함수 / 부수효과 / 상태변이에 대한 이야기 입니다. 20번 컨셉에서 다룰 이야기는 아무래도 자바스트립트의 유지보수에 대한 이야기 같다. 아무래도 자바스크립트는 다른 언어와 다르게 코드 한 줄이 어떨 땐 타입이 이거였다 갑자기 저거였다 식으로 바뀌기도 하기 때문에.. 자바스크립트 개발자는 항상 이 부분을 두려워 하는 듯함. 때문에 타입스크립트로 넘어가는 것이고..? 타입스크립트를 한번 써 본 사람들은 다시 자바스크립트로 돌아오지 않는다고 하던데 ㅠㅠ 이번 컨셉을 다뤄보면서 자바스크립트의 유동적인 부분에 대해 생각해보기로 한다. 순수함수 먼저 순수함수라는 것은 함수 밖에 있는 값들은 일절 변경하지 않는 것을 말하는 것 같다. 예를 들어 let valu..

map, reduce, filter 이번 Concept은 배열에서 사용되는 map & reduce & filter에 대해서 간략하게 설명하겠습니다. :) map map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] array1 배열에서 map메서드를 사용해 element(요소) 하나 하나마다 곱하기 2를 해주는 콜백함수를 파라미터로 가집니다. 결과는 새 element를 가지..

Object.create와 Object.assign 이번 Concept은 Object.create와 Object.assign에 대해서 간단하게 알아보겠습니다 :) Object.create Object.create 메서드는 기존 개체를 새로 만든 개체의 프로토 타입으로 사용하여 새 개체를 만듭니다. 위를 MDN사이트에서 정의한 것 입니다. 잘 이해가 가지 않을 것 같아 풀어서 설명해보겠습니다. const person = { isHuman: false, prin console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); } }; const me = Object.create(person); me.name = 'Matthew'; // "name" ..

프로토타입의 상속과 체인 이 Concept은 프로토타입에 관해서 다루고 있습니다 :) 이번 컨셉은 Prototype에 대해서 알아보겠습니다. 필자는 Prototype이 무엇인지 이 Concept을 다루면서 처음 알았습니다 ㅠㅠ 자바스크립트는 프로토타입 기반 언어라고 불릴 정도로 프로토타입의 개념이 중요하다고 합니다..(난 왜 처음 알았지?;;) 또한 자바스크립트는 다른 언어들과 마찬가지로 객체지향 프로그래밍 언어라고도 불리는데요. 중요한 것은 다른 언어(C, JAVA, Python)등은 클래스를 사용해 객체를 찍어내지만 자바스크립트에는 클래스라는 것이 없습니다. 따라서 자바스크립트는 프로토타입을 이용해 이와 비슷하게 객체를 생성합니다. 자바스크립트에 클래스가 왜 없냐? 라고도 하실 수 있는데 자바스크립트..

new, 생성자, instanceof, 인스턴스 이번 Concept에서는 생성자와 인스턴스에 대해서 다뤄보겠습니다. new 생성자 new 생성자는 객체를 만들어 낼 때 사용됩니다. 지난 컨셉을 다루면서 객체를 만드는 두 가지 방법이 있었습니다. Factory Function에서 틀을 만들거나 class를 통해 틀을 만들어 내는 것 입니다. 틀을 만들었으면 이제 찍어내는 일만 남았죠? 틀을 통해 객체를 실제로 생성하려면 어떻게 해야하는지 기억하시나요? new 생성자를 사용하는 것 입니다. // 틀 function Student(name, age) { this.name = name; this.age = age; } // 객체 생성 const student1 = new Student("홍길동", 20); 이것..