본문 바로가기

JavaScript

(33)
[JavaScript] OOP(Object-Oriented Programming) 자바스크립트는 다음의 3가지 특성을 모두 갖는 multi-paradigm 프로그래밍 언어이다. -Procedual programming -Object oriented programming -Functional programming 1. 객체지향프로그래밍 -등장배경: 실제 세계의 사물의 성질과 특성을 시스템에 적용하려는 목적으로 도입되었다. 객체란 현실 세계의 사물이나 개념을 시스템에서 이용하기 위해 현실 세계를 자연스럽게 표현하여 쉽게 이용할 수 있도록 만든 소프트웨어 모델이다. -OOP Basic concepts: 현실의 문제를 시스템으로 모델링하는 과정에는 다음 4가지 특성을 이용한다. (https://sanxang.tistory.com/45) 1. Encapsulation 2. Inheritanc..
[JavaScript] Functional programming 1. First-class function -프로그래밍 언어가 갖는 일반적인 특징이다. -자바스크립트는 함수를 일급 객체(first-class citizen)로 취급 한다. *이 말은 즉, 함수는 그 자체로 value이며 객체의 일종이다. -일급 객체 함수는 다음과 같은 성질을 갖는다. 1. 변수에 할당할 수 있다. const func1 = function() {...} ; *이때 func1은 함수 value이고, func1()은 함수 호출임 2. 객체 프로퍼티에 할당할 수 있다. (메소드) 3. 다른 함수의 arguments로써 input data로 사용할 수 있다. *이때 함수를 인자로 받는 어떤 함수를 고차함수(high-level, higher-order function)라 함 (내가 직접 호출함)..
[JavaScript] DOM 개요 -자바스크립트 런타임에는 웹브라우저, 웹서버(node.js) 등이 있다. 커피 머신 또한 자바스크립트 런타임이 될 수도 있다. -각 런타임마다 특정 기능(API)이 지원되는데 이들을 한데 묶어 host environment라 부른다. -웹브라우저 런타임 환경에는 language core인 자바스크립트를 기본적으로 지원하며 추가적으로 웹 페이지 내 모든 컨텐츠를 제어할 수 있는 문서객체모델(DOM)과 그 외의 모든 것을 제어할 수 있게 해주는 브라우저객체모델(BOM)가 제공된다. * DOM의 node 객체를 통해 페이지 내 문서 영역에, BOM의 window 객체를 통해 브라우저 창, 탭, 스토리지 등에 접근할 수 있다. -그 밖에 AJAX(fetch API), Timer, Geolocation, C..
[JavaScript] Destructuring Assignment 1. 구조 분해 할당(Destructuring assignment) -ES6 문법이다 -배열과 객체를 분해하여 각 값을 변수로 연결한다 -함수에서 많은 매개변수를 처리하거나, 매개변수에 default 값을 설정할 때 사용되기도 한다 -모든 iterable(반복 가능한 것)에 적용 가능하다 -할당 연산자(=) 좌측에는 상응하는 변수 이름이 오고, 우측에는 분해하고자 하는 데이터가 자리한다 -배열 활용 예) 1) const [a, b, c] = [1, 2, 3, 4]; // a->1, b->2, c->3 *[1, 2, 3, 4]이 파괴(destructive)되는 것은 아니다. 복사 후 변수에 분해(destructurize) 하는 것임 2) const [a, , c] = [1, 2, 3, 4]; // a->1..
[JavaScript] Closure 1. 중첩 함수(Nested Function) -함수 내부에서 새로 선언한 함수를 중첩 함수라 부른다. -특히 함수를 반환하는 고차함수는 프로그래밍에서 매우 중요한 역할을 한다. -고차함수는 주로 함수 자체나 객체 메소드로 반환 값을 갖는다 -중첩 함수 가운데에 자신이 선언된 부모 함수의 변수 환경에 항상 접근할 수 있는 함수를 클로저 함수라고 부른다 2. 렉시컬 환경(Lexical Environment) -이전 Scoping 파트에서 렉시컬 환경에 대해 이미 한 번 짚고 넘어갔었다.(https://sanxang.tistory.com/29) -함수를 호출하면 고유의 렉시컬 환경이 자동으로 만들어진다. (변수와 달리 호출할 때마다 초기화 된다는 점에 유의) -렉시컬 환경에는 parameter(& 함수 호..
Execution Context & Scoping 1. EC(Execution Context) -코드 독해와 디버깅의 이해에 매우 중요한 자바스크립트 엔진의 동작 원리이다. -Javascript code의 실행 환경에 관한 모든 정보를 저장한다. -모든 실행(함수 등)은 항상 EC를 통해 작동하며 실행 1단위 당 고유의 EC를 갖는다. -EC내에 포함되는 기본 정보: 1.) Variable Environment -variable & function declaration -parameter & arguments object 2) Scope chain 3) 'this' keyword -EC는 execution phase 직전인 creation phase에서 발생한다. -소스코드의 컴파일이 끝나면 top-level code들에 대해서 global EC가 생성..
-JavaScript- 자바스크립트는 1. High-level 2. Garbage-collected 3. Interprted or just-in-time compiled 4. Multi-paradigm 5. Object-orient (prototype-based) 6. First-class fuctions 7. Dynamic 8. Single-threaded 9. Non-blocking IO by Event loop language 이다. *Compilation vs Interpretation * 짧게 보는 자바스크립트의 역사 -자바스크립트는 웹 페이지와 상호작용하도록 디자인된 스크립트 언어이다. 처음 자바스크립트 언어를 설계할 당시에는 비동기 작업을 비롯한 프로그래밍 언어와 관련한 많은 내용은 당연히 포함되지 않았다. 초창기..
[JavaScript] Data type2 -Javascript code를 실행하는 JS Engine은 JS Runtime(Browser, Node.js)에 내장되어 있다. -JS Engine은 heap과 call stack이라는 두 메모리를 사용한다. *heap : 큰 용량의 데이터를 저장하는 공간 *call stack : 실행되는 코드를 tracking하며 실제 작업 수행이 일어나는 공간 1. Primitive type vs Reference type -Primitive types(원시 자료형) : string, number, boolean, undefined, null ... 등 크기가 고정된 단일 데이터를 말한다. -Reference types(참조 자료형) : Object, Array, Function, Date, RegExp ... 등..