자바스크립트

클로저란함수와 함수가 선언된 렉시컬 환경의 조합선언된 렉시컬 환경 : 변수가 코드 내부에서 어디서 선언됐는지를 의미 스코프전역 스코프전역 스코프에서 선언된 변수는 어디서든 호출 가능함window, global함수 스코프자바스크립트는 기본적으로 함수 레벨 스코프를 따름 ( {} 블록이 스코프 범위를 결정하지 않음) 클로저의 활용자바스크립트는 함수 레벨 스코프를 가지고 있고, 스코프는 동적으로 결정됨클로저를 활용하면 한 변수나 상태 값을 별도로 관리하는 클로저 내부에서만 접근 가능함function Counter() { var cnt = 0 return { increase : function () { return cnt++ }, decrease : f..

클래스란자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿클래스를 활용하면 객체를 만드는 데 필요한 데이터나 이를 조작하는 코드를 추상화해 객체 생성을 더욱 편리하게 할 수 있음class Car { // 생성자 constructor(name) { this.name = name; } // 메서드 hook() { console.log('경적을 울립니다'); } // 정적 메서드 static hello() { console.log('안녕, 자동차야!'); } // setter set age(value) { this.carAge = value } //getter get age()..

함수란작업을 수행하거나 값을 계산하는 등의 과정을 표현하고 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것리액트에서 컴포넌트를 만드는 함수도 자바스크립트 함수의 기초적인 형태를 따름자바스크립트에서 함수는 다른 함수의 매개변수가 될 수 있고, 반환값이 될 수 있으며, 할당도 가능하므로 일급 객체임   함수를 정의하는 방법함수 선언문가장 일반적으로 사용하는 방식표현식이 아닌 일반 문으로 분류됨function add(a,b) { return a + b;}함수 표현식함수를 변수에 할당해 표현하는 방식할당하려는 함수의 이름을 생략하는 것이 일방적const sum = function (a,b) { return a + b;}sum(10, 24) 함수 선언문함수 표현식호이스팅으로 인해 함수 선언문은 먼저 메모..

자바스크립트의 데이터 타입원시 타입 booleannullundefinednumberstringsymbolbigint객체 타입object  undefined선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값'선언됐지만 할당되지 않은 값' null아직 값이 없거나 비어 있는 값을 표현할 때 사용'명시적으로 비어 있음을 나타내는 값' string문자열은 원시 타입이며 변경 불가능함 Symbol중복되지 않는 어떠한 고유한 값을 나타내기 위해 사용Symbol() 함수를 이용해서만 만들 수 있음  객체 타입원시 타입 이외의 모든 것의 타입배열, 함수, 정규식, 클래스 등 포함참조를 전달한다고 해서 참조 타입이라고도 함  값을 저장하는 방식의 차이원시 타입불변 형태의 값으로 저장..

모듈애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각모듈은 기능을 기준으로 파일 단위로 분리함모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 캡슐화되어 다른 모듈에서 접근할 수 없음하지만 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있기 때문에 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능함 => export 라고 함공개된 모듈 자산은 다른 모듈에서 재사용할 수 있음모듈 사용자 : 공개된 모듈의 자산을 사용하는 모듈모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용 가능함 => import 라고 함모듈을 사용하면 코드의 단위를 명..

프로미스ES6부터 도입된 비동기 처리를 위한 패턴전통적인 콜백 패턴이 가진 단점을 보완하여 비동기 처리 시점을 명확하게 표현할 수 있다는 장점을 가짐  비동기 처리를 위한 콜백 패턴의 단점const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if(xhr.status == 200) { console.log(JSON.parse(xhr.response)); } else { console.error(`${xhr.status} ${xhr.statusText}`)}; } }}ge..

동기 처리와 비동기 처리함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문함수의 실행 순서는 실행 컨텍스트 스택으로 관리함자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖음 => 싱글 스레드 방식싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행할 경우 블로깅(작업 중단)이 발생함동기 처리현재 실행중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식실행 순서가 보장됨앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹되는 단점비동기 처리현재 실행 중인 태스크가 종료 되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식블로킹이 발생하지 않음태스크의 실행 순..

디스트럭처링 할당 (destructuring assignment), 구조 분해 할당구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것필요한 값만 추출해 변수에 할당할 때 유용함 배열 구조 분해 할당배열 구조 분해 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스임순서대로 할당됨변수의 개수와 이터러블의 요소의 개수가 반드시 일치할 필요는 없음배열 구조 분해 할당을 위한 변수에 Rest 요소 사용 가능const arr = [1,2,3];const [one, two, three] = arr;const [x, ...y] = arr;console(x,y); // 1 [2,3]   객체 구조 분해 할당각 프로퍼티를 객체로부터 추출해 1개 이상의 변수에 할당..