[JS] Closure 1. Closure란? 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical environment)의 조합이다. 즉, 객체 간의 유효범위를 이용해 private한 환경을 만드는 것이다. 클로저를 이해하려면 JavaScript가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. JavaScript는 함수 안에 선언된 변수는 지역변수로 취급되어 외부에서 접근이 불가능하다. 코드로 보자 const a = 1; function f() { const b = 2; } console.log(a); console.log(f.b); console.log(b); /**************결과값************** 1 undefined console.log(b); ^ Ref.. 2023. 2. 6. [JS] module과 import / export 1. Module JavaScript를 기반으로 한 다양한 프레임워크와 인터페이스들이 등장하면서, JavaScript만으로 완전한 어플리케이션을 만드는 것이 가능해졌다. 이에 따라 자연스레 코드의 양은 늘어나고 파일들을 기능이나 역할 단위로 나누기 위해 module이 도입되었다. 이 포스팅에선 JavaScript를 모듈화하여 사용하기 위해 export / import 하는 과정, 이를 html에서 불러와 사용하는 법을 다룰 것이다. export > import > module 모듈로써 사용하고자 하는 함수나 변수의 선언부 앞에 export를 적어준다. ( export function a() {}, export const a = "example" ) export로 선언된 함수를 사용하고자 하는 .js 파일.. 2023. 2. 5. [JS] 비동기 처리 (1) - Promise 1. 비동기(Asynchronous)란? JavaScript는 싱글 쓰레드 프로그래밍 언어로 코드를 동기적으로 처리한다. 동기적(Synchronous)으로 처리하는 것과 비동기적(Asynchronous)으로 처리하는 것을 그림으로 살펴보자. 이러한 불필요한 대기 시간을 없애기 위해 개발자는 적절한 비동기 처리를 해주어야 할 때가 있는데, 그 때 사용할 수 있는 방법으로 콜백 함수, Promise, Async가 있다. 이번 포스팅에서는 Promise를 중점적으로 다룬다. 기본적으로 비동기를 지원하는 JavaScript 함수 중 setTimeout()을 통해 동기와 비동기를 코드로 보자. function printImmed(print) { print(); } function printDelay(print, .. 2023. 2. 4. [JS] Spread Syntax (전개 구문, 전개 연산자) 1. Spread Syntax란? 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 요소(배열의 경우) 또는 인수(함수의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다. 쉽게 말해, 선언되어 하나의 객체로 묶인 요소들을 다시 전개해주는 것을 말한다. 코드로 살펴보자. 2. Spread Syntax 예제 배열에서의 전개 연산자 let hobby1 = ["게임", "헬스", "독서"]; let hobby2 = ["코딩", "스노우보드", "댄스"]; const hobby = [hobby1, hobby2]; const hobbySpread = [...hobby1, ...hobby2]; console.log(hobby); console.log(hobbySpread); /***.. 2023. 2. 2. [JS] Prototype 1. Prototype이란? Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용한다. JavaScript는 흔히 '프로토타입 기반 언어(prototype-based language)'라 불린다. 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 '프로토타입 객체(prototype object)'를 가진다는 의미이다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있다.. 이를 '프로토타입 체인(prototype chain)'이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 해준다. 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다. 객체의 prot.. 2023. 2. 1. [JS] 일급 객체와 일급 함수 (First-class Object & Function) 1. 일급 객체(First-class Object)란? 다른 객체들에 대해 기본적인 연산이 모두 가능한 객체를 가리킨다. 자기 자신을 변수에 대입한다거나 다른 객체의 인자로 넘긴다거나 하는 연산이 가능할 때 일급 객체라고 한다. 기본적으로 일급 객체를 구성하는 요소는 다음과 같은 권리가 있다. 모든 요소는 함수의 실제 매개변수가 될 수 있다. 모든 요소는 함수의 반환 값이 될 수 있다. 모든 요소는 할당 명령문의 대상이 될 수 있다. 모든 요소는 동일 비교의 대상이 될 수 있다. 2. 일급 함수(First-class Function)란? 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현하는데, JavaScript는 그 대표적인 언어 중 하나이다. 위에서 언급한 일급 객체의 권리를 Ja.. 2023. 1. 30. [JS] JSON (JavaScript Object Notation) 1. JSON(JavaScript Object Notation)이란? 이름에서 알 수 있듯이 JavaScript의 표현으로 객체를 기록하는 데이터 포맷이다. JavaScript의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이므로, JSON을 생성하거나 파싱하는 것은 어느 언어로든 가능하다는 말이다. 객체 리터럴 표현({ key : value })과 배열 표현([value, value, ...])이 있다. 객체 리터럴 방식은 Key 값으로 Value를 구분하고 배열 선언 방식은 Index 값으로 Value를 구분한다. 리터럴 값을 불러올 때는 상위객체.key 로 접근하고, 배열 값을 불러올 때는 상위객체[index] 로 접근한다. JavaScript로 JSON.. 2023. 1. 29. 이전 1 다음 반응형
