모래블로그

클로저 (Closure) 클로저는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 말한다. 내부함수와 외부함수 function outer() { var title = 'closure'; function inner() { alert(title); // closure } inner(); } outer(); 위의 예제를 보면 outer 이라는 함수 안에 inner 함수가 정의되어 있다. 여기서 outer 함수를 외부함수, inner 함수를 내부함수라고 한다. 내부 함수는 외부함수 안에서만 유효하기 때문에 외부함수 밖에서 내부함수에 접근할 수 없다는 것이 기본 맥락이다. 위에서 더 살펴봐야할 부분은 변수 title 이 선언된 위치이다. 현재 내부함수는 inner 에서 title 변수를 사용하고..

자바스크립트는 프로토타입 기반 언어라고 불린다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 하는데 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 부른다. Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. Prototype vs Class 자바스크립트에는 클래스라는 개념이 없지만, 프로토타입(prototype) 이라는 것이 존재한다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유이다. 클래스가 없기 때문에 기본적으로 상속 기능도 없다. 그래서 ..

ECMA International 정보와 통신 시스템을 위한 국제적 표준화 기구이다. - 위키백과 - ECMA-262 ECMA-262는 Ecma International에 의해 제정된 하나의 기술 규격의 이름으로, 범용 목적의 스크립트 언어에 대한 명세를 담고 있다. 스크립트 언어에 대한 표준을 정의한 규칙이라고 생각할 수 있다. ECMAScript ECMAScript는 Ecma International에 의해 ECMA-262 라는 기술 규격에 의해 정의 된 범용 스크립트 언어이다. ECMAScript specification 이라고도 불리며, 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다. 비유해보자면, Ecma Internation은 국립국어원, ECMA-262 는 표준어 ECM..

1. Generator(제너레이터) Generator는 일반적인 함수가 끝까지 실행되고 return 되는 것과는 달리, 중간에 실행을 멈췄다가 다시 접근할 수 있는 특이한 형태의 함수이다. Generator 함수는 나중에 다시 접근하기 위해 context(즉 변수값)를 저장된 상태로 남겨둔다. Generator는 주로 Promise 와 결합하여 사용되며, 콜백 지옥 같은 비동기 프로그래밍의 문제점들을 많이 완화시켜준다. 2. Generator 함수 사용 Generator 함수는 function* 키워드를 사용한다. function* generator1() { ... } const generator2 = function* () { ... } Generator함수는 화살표 함수를 사용할 수 없다. 별표 * ..

1. 자바스크립트의 동기(Synchronous) 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 즉, 이전 작업이 완료되어야 다음 작업을 수행하는 순차적인 방식으로 진행이 되는데, 이러한 방식을 동기(Synchronous) 라고 부른다. 예를 들어, 이렇게 입력했을 때 결과가 "one", "two", "three" 가 차례대로 출력되는 것을 확인할 수 있다. 그렇다면 왜 이렇게 나올까 ? 2. 자바스크립트 엔진의 동작 원리 자바스크립트는 콜 스택(Call Stack)과 메모리 힙(Memory Heap)이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다. 💡엔진의 주요 구성 요소 1) Memory Heap : 메모리 할당이 일어나는 곳 객체, 배열, 함수 등 참조..

구조 분해 할당(Destructuring Assignment) 구조 분해 할당 문법은 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 즉, 객체나 배열을 변수로 '분해'할 수 있게 해준다. 1. 기본 문법 // 이름과 성을 요소로 가진 배열 let arr = ["Soojin", "Park"] // 구조 분해 할당을 이용해 // firstName엔 arr[0]을 // lastName arr[1]을 할당 let [firstName, lastName] = arr; alert(firstName); // Soojin alert(lastName); // Park 위와 같이 인덱스를 이용해 배열에 접근하지 않아도 변수로 이름과 성을 사용할 수 있다. 1. 배열(arr..

Spread Operator(스프레드 연산자) ES6에는 Spread Operator 라는 새로운 기능이 추가되었다. 이 스프레드 연산자는 배열, 문자열 등 반복 가능한(iterable) 객체의 요소를 전개하거나 펼친다. 기본 문법 const arr1 = [1, 2, 3, 4, 5]; console.log(...arr1); // [ 1, 2, 3, 4, 5 ] 위 코드처럼 arr1 배열 앞 (...) 처럼 3개의 점을 이용한 문법이며, 이런 스프레드 연산자를 쓰면 arr1 배열의 원소를 풀어쓸 수 있다. 1. Spread Operator의 배열 복사 자바스크립트에서 배열을 새로운 변수에 할당하는 경우, 새로운 배열은 기존 배열을 참조한다. 따라서 새로운 배열을 변경하는 경우 원본 배열 역시 변경된다. /..

화살표 함수 (Arrow Function) ES6 문법인 화살표 함수(Arrow Function)는 function 키워드 대신 화살표(=>)를 사용하여 간단하게 함수를 표현할 수 있다. 그렇다고 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 1. 화살표 함수 기본 문법 // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 a => { ... } // 매개변수가 한 개인 경우, 소괄호 생략 가능 (a,b) => { ... } // 매개변수가 여러 개인 경우, 소괄호 생략 x // 객체 반환 시 () => ({ a : 1, b : 2 }) // 객체를 반환할 때는 소괄호를 사용 2. 화살표 함수의 호출 화살표함수는 익명함수로만 사용할 수 있다. 따라서 함수를 호출하기 위해서..

일급 객체(First Class Object) 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. (위키백과) 여기서 일급 은 사용할 때 다른 요소들과 아무런 차별이 없다는 것을 뜻한다. 일급 객체 조건 1. 변수나 데이터에 담을 수 있어야 한다. 2. 함수의 파라미터로 전달할 수 있어야 한다. 3. 함수의 리턴값으로 사용할 수 있어야 한다. 일급 객체는 어떤 특정 언어에만 국한되는 문법 단어가 아니고, 프로그래밍 언어론의 개념으로서 자바나 자바스크립트 외 다양한 언어가 일급 객체 개념을 가지고 있다. Javascript, Python이 일급객체 언어이고, c, pascal,..

💡호이스팅 호이스팅(hoist)의 사전적 정의 : 끌어올리기 자바스크립트에서 호이스팅이란 ? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 함수 내 변수 및 함수 선언을 각 해당 스코프의 최상단으로 끌어올려주는 것이다. (물리적으로 코드가 옮겨지는 것은 X) 컴파일 단계에서 코드 실행 전 함수와 변수 선언을 스캔하고, 모든 함수와 변수 선언들은 렉시컬 환경이라고 불리는 자바스크립트 데이터 구조 내의 메모리에 추가된다. 자바스크립트의 모든 선언에서는 호이스팅이 일어난다. 하지만 let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작한다. var와 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceErr..