프로그래밍 잡동사니

클로저 클로저(Closures)는 둘러싸여진 상태의 참조와 함께 다발로 묶여진 함수의 콤비네이션으로, 함수가 생성되는 시점에 내부 함수로부터 외부 함수에의 접근 권한을 준다 const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } // innerFunc와 outerFunc 사이의 closure (oER) innerFunc(); } // outerFunc와 전역컨텍스트 사이의 closure (oER) outerFunc(); 함수 내부의 중첩 함수에서 상위 스코프의 변수에 접근할 수 있다! * 만약 innerFunc가 outerFunc 외부에서 정의되었다면 outerFunc의 변수에 접근 불가..

strict mode function foo() { x = 10; } foo(); console.log(x); // 10 위 코드는 실행이 안될 것 같지만 x가 암묵적 전역으로 들어가며 문제없이 실행된다 'use strict'; function foo() { x = 10; // ReferenceError: x is not defined } foo(); ES5부터 strict mode를 위와 같이 활성화해 의도적으로 에러를 발생시킬 수 있다 * 암묵적 전역 / delete 연산자 사용 / 매개변수 이름 중복 / with 문의 사용 등 컨벤션을 커스텀해 적용할 수 있는 ESLint 등의 린트 도구를 사용하는 것이 더 적절하다 빌트인 객체 표준 빌트인 객체는 object, String, Number, Bool..

프로토타입 JS는 명령형 / 함수형 / 프로토타입 기반 / 객체 지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 간혹 객체지향 언어가 아니라는 오해를 받지만 JS는 클래스 기반 객체지향 프로그램 언어보다 더 강력한 프로토타입 기반의 객체지향 프로그래밍 언어이며 원시 타입의 값을 제외한 모든 값들(함수, 배열, 정규 표현식 등)은 객체다 객체지향 프로그래밍(OOP) = 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 const circle = { radius: 5, // 반지름 // 원의 지름: 2r getDiameter() { return 2 * this.radius; }, // 원의 둘레: 2πr getPerimeter() { return 2 * Math.PI * this.radi..

함수와 일급 객체 다음 조건을 만족하는 객체를 일급 객체라고 한다 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다 변수나 자료구조(객체, 배열 등)에 저장할 수 있다 함수의 매개변수에 전달할 수 있다 함수의 반환 값으로 사용할 수 있다 // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { increase, dec..

프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드란 JS 엔진의 구현 알고리즘을 설명하기 위해 사용되는 의사(pseudo) 프로퍼티와 의사(pseudo) 메서드이다. ES 사양에서 이중 대괄호([[…]])로 감싼 이름들이 그것이다 const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '[' // 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. o.__proto__ // -> Object.prototype 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이는 __proto__를 통해 간접적으로..

전역변수의 문제점 var x = 'global'; function foo() { console.log(x); // ① var x = 'local'; } foo(); console.log(x); // global 전역변수의 생명주기는 전역객체의 생명주기와 일치한다 전역변수는 다음과 같은 문제점들이 있다 암묵적 결합: 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합(implicit coupling)을 허용하며, 유효 범위가 클수록 가독성이 나빠지고 의도치 않은 상태 변경의 위험도 커진다 긴 생명 주기: 긴 생명 주기동안 메모리 리소스를 오래 소비하며 그동안 의도치 않은 재할당이 이루어질 수 있다 스코프 체인 상에서 종점에 존재: 변수를 검색할 때, 전역 변수가 가장 마지막에 위치해 검색 속도가..

실행 컨텍스트 실행 컨텍스트는 식별자(변수, 함수, 클래스..)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트(Execution Context)를 통해 실행되고 관리된다 실행 컨텍스트는 코드 실행 순서를 스택(Stack) 자료구조로 관리한다 const x = 1; function foo () { const y = 2; function bar () { const z = 3; console.log(x + y + z); } bar(); } foo(); // 6 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조는 렉시컬(Lexical) 환경으로 관리한다 렉시컬 환경은 함수를 어디서 호출했는지가 아닌, 어디에 정의했는지에 따라 상위 스코프를 결정한..

함수 // 함수 선언문 function add(x, y) { return x + y; } 함수 선언문은 생성된 함수 이름과 동일한 식별자를 암묵적으로 생성하고 함수 객체를 할당한다 // 함수 표현식 (함수 리터럴을 변수에 할당) var sub = function (x, y) { return x - y; }; 자바스크립트 함수는 객체 타입의 값으로, 함수 리터럴로 생성해 변수에 할당할 수도 있다 * 함수 선언문은 표현식이 아닌 문으로 변수에 할당할 수 없다! // 함수 선언문은 함수 이름을 생략할 수 없다. function (x, y) { return x + y; } // SyntaxError: Function statements require a function name 함수 선언문은 이름을 생략할 수 ..

객체 리터럴 자바스크립트는 객체 기반의 프로그래밍 언어이며, 원시 값을 제외한 나머지 값 (함수, 배열, 정규 표현식 등)은 모두 객체이다. 또한 원시 값은 변경 불가능(immutable)한 값이지만 객체는 변경 가능(mutable)한 값이다 프로퍼티: 객체의 상태를 나타내는 값(data) 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior) var person = { name: 'Lee' }; // 마침표 표기법에 의한 프로퍼티 접근 console.log(person.name); // Lee // 대괄호 표기법에 의한 프로퍼티 접근 console.log(person['name']); // Lee 프로퍼티는 두 가지 방법으로 접근할 수 있다 * 대괄호 표기법의 경우 키는 반드..

제어문 // 블록문 { var foo = 10; } // 제어문 var x = 1; if (x 0 ? '양수' : '음수') : '영'; console.log(kind); // 양수 삼항 연산자를 중첩해서 사용할 수 있다 // 무한루프 for (;;) { ... } while (true) { ... } for 문에 어떠한 식도 선언하지 않으면 ..