개발용어 라이브러리(Library) 간략 설명: 프로그램 제작 시 필요한 기능 비교 설명: 자동차 바퀴, 자동차 헤드라이트, 자동차 에어백 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class 나 Function 으로 만들어졌다. 사용 여부는 개발자(코드 작성자)의 선택 사항이며 새로운 라이브러리 제작 시에도 엄격한 규칙이 존재하지 않다. 제작 의도에 맞게 작성하면 된다. 라이브러리 예시 재사용하기 쉽게 버튼, 테이블 같은 구성 요소를 호출해서 쓸수 있도록 분리해둔 그래픽 사용자 인터페이스(Graphical user interface , GUI) 객체지향 프로그래밍(object-oriented programming, OOP)은 기본적으로 ..
map arr.map(callback(currentValue[, index[, array]])[, thisArg])Copy currentValue : 처리할 현재 요소 index (Optional) : 처리할 현재 요소의 인덱스 array (Optional) : map()를 호출한 배열 thisArg (Optional) : callback을 실행할 때 this로 사용할 값 map()은 배열의 각 요소에 대해 지정된 함수를 호출하고, 반환된 값을 사용하여 새로운 배열을 생성한다. 따라서 map()을 사용하면 기존 배열과 길이가 같은 새로운 배열을 생성하며, 이 새로운 배열의 각 요소는 기존 배열의 각 요소를 변환한 값이 된다. const arr = [1, 2, 3, 4]; const mappedArr = ..
async & await 사용 이유 async & await 은 기존의 비동기처리 방식의 문제점들을 보완하면서도 사용법이 훨씬 간단하다. Promise 코드 function p() { return new Promise((resolve, reject) => { resolve('hello'); // or reject(new Error('error'); }); } p().then((n) => console.log(n)); async 코드 async function p2(){ // async을 지정해주면 Promise를 리턴하는 함수로 만들어준다. return 'hello'; } p2().then((n) => console.log(n)); 이처럼 async를 사용하면 promise 코드를 훨씬 직관적으로 나타낼..
Promise 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 콜백 패턴의 단점 콜백 헬 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 태스크는 대기하게 된다. 예를 들어 서버에서 데이..
클로저(closure) 개념 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나다. 클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language: 얼랭(Erlnag), 스칼라(Scala), 하스켈(Haskell), 리스프(Lisp)…)에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 명세에 클로저의 정의가 등장하지 않는다. 클로저에 대해 MDN은 아래와 같이 정의하고 있다. “A closure is the combination of a function and the lexical environment within which that function was d..
함수 호출 방식에 의해 결정되는 this 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체 와 this를 암묵적으로 전달 받는다. function square(number) { console.log(arguments); console.log(this); return number * number; } square(2); Java에서의 this 는 인스턴스 자신(self)을 가리키는 참조변수다. this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버 변수명이 같을 경우 이를 구분하기 위해서 사용된다. 아래 Java 코드의 생성자 함수 내의 this.name은 멤버변수를 의미하며 name은 생성자 함수가 전달받은 ..
실행 컨텍스트 실행 컨텍스트(Execution Context)는 scope hoisting this function closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해진다. ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념 이라고 정의한다. 좀 더 쉽게 말하자면 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있겠다. 여기서 말하는 실행 가능한 코드는 아래와 같다. 전역 코드 : 전역 영역에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 함수 코드 : 함수 내에 존재하는 코드 일반적으로 실행 가능한 코드는 전역 코드 와 함..
use strict "use strict" 혹은 'use strict' 는 단순한 문자열처럼 생겼다. 하지만 이 문구가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작하게된다. "use strict"; // 이 코드는 모던한 방식으로 실행된다. "use strict"는 평범한 JavaScript에 몇가지 변경이 일어나게 한다. 기존에는 조용히 무시되던 에러들을 throwing한다. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡는다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어진다. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지한다. "use strict" 는 대개 스크립트 전체에 적용하지만, 스크립..
TDZ TDZ(Temporal Dead Zone)를 해석하면 "일시적 사각지대"다. 첫 번째 코드 [인스턴스 생성 후 클래스 선언] const myCat = new cat('mimi') class cat { constructor(name) { this.name = name; } } 두 번째 코드 [함수 호출 후 함수 선언] hello('Shin') function hello (name) { return `Hello ${name} :)` } 위 두개의 코드를 실행해보면 두 번째 코드는 정상적으로 작동 하지만 첫 번째 코드를 작동시키면 ReferenceError: Cannot access 'cat' before initialization 에러가 발생한다. TDZ의 발생 const 변수를 선언하고, 초기화한 ..
동기(Synchronous)와 비동기(Asynchronous) 처리방식 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉, A작업이 모두 진행 될때까지 B작업은 대기해야한다. 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉, A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다. 동기(synchronous) 동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는것을 말한다. 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 요청한 순서대로 결과가 주어져야 한다. 데이터 요청에 따른 응답을 리턴해주기 전까지 다른 활동을 할 수 없으며 기다려야한다. 순서에 맞게 진행되는 장점이 있으나, ..
