하늘기술 (106) 썸네일형 리스트형 [ES5] 호이스팅 함수 호이스팅 호이스터라는 기계는 밑에서 위로 어떤 물건들을 끌어 올리는 역할을 한다. JS에서 호이스팅이란 var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 끌어 올리고 동작하는 특성을 말한다. 자바스크립트는 모든 선언문(var, let, const, function, function*, class)이 선언되기 이전에 참조 가능하다. 아래의 코드를 보자. var res = square(5); function square(number) { return number * number; } 함수 선언문으로 함수 square가 정의되기 이전에 함수 호출이 가능하다. 함수 선언문의 경우, 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든지 호출이 가능한데 이것을 함수 호이스팅.. [ES6] 이터레이션 1. 이터레이션 프로토콜 프로토콜이란 규칙이다. 우리는 만들어진 규칙에 따라 프로그래밍을 한다. ES6에서는 이터레이션이라는 규칙을 정했다. 규칙은 아래와 같다. 컬렉션을 순환하기 위한 규칙을 이터레이션 프로토콜이라 한다. 이 이터레이션 프로토콜을 준수한 객체를 이터러블이라 한다. 이 객체는 for..of 문으로 순회할 수 있다. 이 객체는 Spread 문법의 대상이 된다. 이터레이션 프로토콜에는 크게 두가지 규칙으로 구분된다. 이터러블 프로토콜 이터레이터 프로토콜 1.1 이터러블 프로토콜 이터러블 프로토콜 간단하다. 객체가 Symbol.iterator 메서드를 소유하고 있으면 이터러블 아니면 아니다. 배열은 Symbol.iterator 메소드를 소유한다. 그러므로 이터러블이다. const array =.. [ES5] 불변성 # Immutability 불변성  영화 엑스맨에는 돌연변이들이 나온다. 이 돌연변이를 영어로는 `mutation`이라고 부른다. `mutation`은 변화라는 의미를 가지고있다. 'mutable'은 변할 수 있다는 의미를 가지고 있다. mutablility에 부정을 뜻하는 접미사'im' 가 붙었으니 변할 수 없다는 뜻이 된다. 따라서 'immutable object'은 변할 수 없는 객체를 뜻한다. ## immutable object 함수형 프로그래밍에서 중요한 개념이다. 객체가 참조를 통해서 여러 곳에서 공.. [ES6] 제너레이터 1. 제너레이터에 앞서 지난 포스팅(이터레이션)에서는 이터레이터이면서 이터러블인 객체에 대해서 살펴보았다. 이터레이터의 조건(next 메서드를 소유)과 이터러블의 조건([Symbol.iterator] 메서드 소유)을 만족 한다면 이는 이터레이터이면서 이터러블인 객체이다. 아래 코드에서 createInfinityByIteration 함수를 실행했을 때 반환되는 객체는 위의 조건을 모두 만족한다. // 이터레이션 프로토콜을 구현하여 무한 이터러블을 생성하는 함수 const createIteration = function() { let i = 0; // 자유 변수 return { [Symbol.iterator]() { return this; }, next() { return { value: ++i }; }, .. [ES6] Rest파라미터와 Spread연산자 Rest파라미터와 Spread연산자 Intro Spread 연산자 Spread의 의미 Spread는 펼치다라는 의미를 가지고 있다. 카지노에서 포카를 할 때 딜러가 카드를 펼치는 기술을 보았을 것이다. 카드곽에서 카드를 꺼내 펼치는 기술이 spread이고, 유사배열객체([1,2,3] 또는 {1:'a', 2:'b'} 등)에서 요소들을 꺼내 펼치는 기술을 Spread 연산자라고 한다. 소스코드를 읽을 때 배열이나 객체에서 [] 이거랑 {} 이것들 사이에 있는 리터럴 들을 의미한다고 보면 된다. const 카드곽 = ["카드1", "카드2", "카드3"]; //배열선언 const 카드곽2 = [...카드곽]; //펼치기 기술 console.log(카드곽2); //["카드1", "카드2", "카드3"] Rest.. [ES5] 실행컨텍스트 1. 실행 컨텍스트 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해 질 것이다. ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의한다. 좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있겠다. 여기서 말하는 실행 가능한 코드는 아래와 같다. 전역 코드 : 전역 영역에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 함수 코드 : 함수 내에 존재하는 코드 일반적으로 실.. 함수 함수 함수란 특정 작업을 수행하기 위해 필요한 문들을 모아놓은 코드 블록을 의미한다. // multiply 함수의 정의(함수 선언문) function multiply(num1, num2) { return num1 * num2; } // multiply 함수의 호출 multiply(2, 4); // 8 1. 함수 정의 함수를 정의하는 방식은 3가지가 있다. 함수 선언문 함수 표현식 Function 생성자 함수 1.1 함수 선언문 함수 선언문(Function declaration) 방식 // multiply 함수 선언문 function multiply(num1, num2) { return num1 * num2; } 함수명 함수 선언문의 경우, 함수명은 생략할 수 없다. 매개변수 목록 0개 이상의 목록으로 괄.. [ES5] 클로저 Closure 서문 클로저를 알기위해 많은 블로그와 자료들을 찾아봤는데 용어들이 생소하고 어려운 것들이 많았다. 모든 공부가 그러하듯 새로운 단어들이 주는 신선함(?) 때문에 이해를 어렵게 한다. 먼저 스코프, 렉시컬 스코프, 스코프 체인에 대한 개념을 익히는 것을 추천한다. 클로저를 이해하기 위해 먼저 알아야할 개념들 Scope(유효범위) Lexical scope (어휘적 유효 범위) Scope Chain (유효 범위 체인) ECMAScript에 정의된 클로저란? ECMAScript에서 공식적으로 정의한 것은 없다. 클로저란 자바스크립트가 채용하고 있는 기술적 기반 혹은 테크닉으로 보면 된다. 자바의 디자인 패턴처럼 클로저도 자바스크립트가 가지고 있는 특징들을 이용한 기술이다. 따라서 블로그들 마다 정.. 이전 1 ··· 10 11 12 13 14 다음
