JavaScript 25

[JS Deep Dive] 24장 클로저

클로저(closure)란? 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(하스켈Haskell, 리스프Lisp, 얼랭Erlag, 스칼라Scala등)에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 사양에 등장하지 않는다. 클로저를 이해하려면 먼저 렉시컬 환경, 즉 렉시컬 스코프를 이해해야 한다. 1. 렉시컬 스코프 const x = 1; function outerFunc() { const x = 10; innerFunc(); } function innerFunc() { console.log(x); // 1 } outerFunc(); 함수의 스코프는 호출하는 위..

[JS] 함수 선언 방식 : 함수 표현식 & 함수 선언식

1. 함수 선언식과 함수표현식이란? function sum(a,b) { // 함수 선언식 return a + b; } const sum = function(a,b) { // 함수 표현식 return a + b; } JavaScript에서 함수를 정의하는 방법에는 함수 선언식과 함수 표현식이 있습니다. - 함수 선언식 (function declartion) : 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것 - 함수 표현식 (function Expression) : 정의한 function을 별도의 변수에 할당하는 것 2. 함수 선언식과 표현식의 차이 sum(50, 50); // 100 minus(100, 50) // Uncaught TypeError: minus is not a function fun..

[JS Deep Dive] 13장 스코프

1. 스코프란 ? 스코프란 ? 식별자가 유효한 범위 즉, 식별자 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는 유효 범위 var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수 if (true) { var var2 = 2; // 코드 블록 내에서 선언한 변수 if (true) { var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수 } } function foo() { var var4 = 4; // 함수 내에서 선언한 변수 function bar() { var var5 = 5; // 중첩된 함수 내에서 선언한 변수 } } console.log(var1); // 1 console.log(var2); // 2 console.log(var3); // 3 consol..

[JS Deep Dive] 22장 this

1.this 키워드 객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)를 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티나 메소드를 참조하고 변경할 수 있어야 한다. 이때 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 하는데, 이때 this를 사용한다. function Circle(radius) { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. ????.radius = radius; } Circle.prototype.getDiameter = function () { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다. r..

[JS Deep Dive] 19장 프로토타입

1. 객체지향 프로그래밍 자바스크립트는 명령형imperative, 함수형functional, 프로토타입 기반prototype-based 객체지향 프로그래밍OOP Obejct Oriented Programming을 지원하는 멀티 패러다임 프로그래밍 언어다. C++과 Java와 같은 클래스 기반 객체지향 프로그래밍 언어의 특징인 클래스, 상속, 캡슐화를 위한 키워드인 public / private / protected 등이 없어서 자바스크립트는 객체지향 언어가 아니라고 오해하는 경우가 있다. 하지만 자바스크립트는 클래스 기반 객체지향 프로그래밍보다 효율적이며 더 강력한 객체지향 능력을 가지고 있는 프로토타입 기반의 객체지향 프로그래밍 언어이다. ⭐️ 클래스(Class) : ES6에서 클래스가 도입되었지만 사..

[JS Deep Dive] 16장 프로퍼티 어트리뷰트

1) 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)다. const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '[' // 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. o.__proto__ // -> Object.prototype ECAMScript 사양에 등장하는 이중 대괄호 [[...]]로 감싼 이름들이 내부 슬롯과 내부..

[JS Deep Dive] 7장 연산자

연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 또한 피연산자는(operand) 값으로 평가될 수 있는 표현식 이어야 한다. // 산술 연산자 5 * 4 // -> 20 // 문자열 연결 연산자 'My name is ' + 'Lee' // -> 'My name is Lee' // 할당 연산자 color = 'red' // -> 'red' // 비교 연산자 3 > 5 // -> false // 논리 연산자 true && false // -> false // 타입 연산자 typeof 'Hi' // -> string 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다. 7.1 산술..

[JS Deep Dive] 6장 데이터타입

0) 데이터 타입(Data Type) 데이터 타입은 '값의 종류'를 말한다. 자바스크립트의 모든 값은 데이터 타입을 가진다.(ES6는 총 7개의 데이터 타입을 제공) 데이터 타입은 크게 원시 타입(Primitive Type)과 객체 타입(Object/Reference Type)으로 분류할 수 있다. 1) 숫자 타입 // 모두 숫자 타입이다. var integer = 10; // 정수 var double = 10.12; // 실수 var negative = -20; // 음의 정수 C나 java의 경우 숫자도 int, long, float, double 등 과 같은 다양한 숫자 타입을 제공한다. 하지만 자바스크립트는 독특하게 하나의 숫자 타입만 존재한다. var binary = 0b01000001; // ..

[JS Deep Dive] 5장 표현식과 문

5.1 값(Value) 값이란 식(표현식)이 평가되어 생성된 결과를 말한다. // 10 + 20은 평가되어 숫자 값 30을 생성한다. 10 + 20; // 30 여기서 평가란 식을 해석해서 값을 '생성'하거나 '참조'하는 것을 의미한다. 모든 값은 데이터 타입(Data Type)을 가지며 메모리에 2진수, 즉 비트의 나열로 저장된다. // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다. var sum = 10 + 20; 값을 생성하는 방법은 다양하게 있는데, 값을 생성하는 가장 기본적인 방법은 리터럴을 사용하는 것이다. 5.2 리터럴(Literal) 리터럴이란 값을 생성하기 위해 미리 약속한 표기법이다. 따라서, 컴퓨터가 아닌 사람이 이해할 수 있는 값을 의미한다. 자바스크립트 엔진은..