Programming/javascript
-
try-catch와 비동기 작업에 대하여Programming/javascript 2022. 7. 24. 22:58
try catch문은 자바스크립트에서 예외처리에 사용된다. 이는 발생한 예외를 throw 했을 시 함수를 호출한 상위로 전파가 되는데 이 과정에서 예외처리를 하지 않는다면 컴파일러가 중단되며 만약 배포 서버에서 실행 중인 프로세스라면 중단될 수도 있기 때문에 반드시 이에 대비하여 예외 처리를 해둬야 한다. 하지만 이러한 예외처리 또한 아무때나, 아무 곳에서나 하면 곤란한 상황이 발생 할 수 있는데, 어떠한 Side Effect가 발생 할 수 있는 지 고려해 보자면 바로, 흔히 싱글 스레드인 자바스크립트에서 효율적인 작업 처리를 위하여 사용하는 비동기 시스템이다. 이는 동기 처리에서는 전혀 문제 없지만 비동기 처리는 앞서 말한 발생한 예외는 호출한 상위로 전파가 된다고 하였는데, 비동기 작업을 감싼 예외처..
-
Generator에 대하여Programming/javascript 2022. 4. 24. 22:06
제너레이터(Generator): 일반 함수는 하나의 값(혹은 0개의 값)만을 반환하지만, 제너레이터는 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있다. 제너레이터와 이터러블 객체를 함께 사용하면 데이터 스트림 생성 가능. 예)function* generateSequence(){ yield 1; yield 2; return 3; }; 일반 함수와 동작 방식이 다르다, 제너레이터 함수를 호출하면 코드가 실행되지 않고, 대신 실행을 처리하는 제너레이터 객체가 반환됨. 예)function* generateSequence(){ yield 1; yield 2; return 3; }; let generator = getnerateSequence(); alert(generator); --> 아직 함수 ..
-
Closure에 대하여Programming/javascript 2022. 2. 10. 21:13
앞서 작성한 Execution Context에 나온 개념을 이해하였다면 해당 개념의 예중 하나인 Closure(이하 클로저)에 대하여 알아보자. 클로저란, 함수와 함수가 선언된 어휘적인 환경(Lexical Environment)의 조합이라고 보면 된다. 여기서 필요한 개념은 JS가 변수의 Scope를 어떻게 지정하는지를 알아야하는데 Lexical Environment인 Lexical Scoping에 대하여 알아본다. 우선, 어휘적 범위 지정인 렉시컬 스코핑은 한 함수의 내부에 다시 선언된 함수의 케이스를 생각하면 쉽다. function human(){ // let elem = "test"; function name(){ // console.log(elem); }; name(); }; human(); 과 ..
-
Execution Context에 대하여Programming/javascript 2022. 2. 10. 21:10
실행 문맥(EC; Execution Context)는 JS에서 중요한 개념 원리 중 하나로, hoisting, this, scope, closure와 관련된 근본적인 개념이다. JS의 실행과 흐름 그리고 코드에 대한 정보가 EC를 통하여 관리되기 때문에 이를 이해하는 것이 몹시 중요하다고 할 수 있다. 우선, EC는 자바스크립트 엔진(인터프리터)이 로직으로 짜여진 코드의 함수와 변수, scope와 this 등 정보가 필요한데 이러한 것들이 실행되는 위치를 설명한다는 의미에서 Execution Context라고 한다. JS의 엔진은 EC를 객체로써 관리하며 코드를 EC 객체 내에서 실행 시킨다. •Call Stack이란, 실행 스택(execution stack), 제어 스택(control stack), 런..
-
일반 함수와 생성자 함수의 차이점Programming/javascript 2022. 2. 10. 14:51
생성자 함수와 일반 함수는 같은 함수이다. 이게 무슨 뜻 이냐면, 선언적 차이 일 뿐 별 다른 차이가 존재하지 않는다는 뜻이다. 첫째로, 생성자 함수의 코딩컨벤션(Coding Convention)은 객체와 같이 첫 글자가 대문자로 시작한다는 것이다. 이를 지키지 않을 경우 코드인스펙션(Code Inspection)을 통하여 정정하여야 하니 주의하자. 둘째로, 생성자 함수를 호출 및 초기화 할 땐 new 연산자를 사용한다. ex) function Pet(name){ // this.name = name; this.alive = true; }; let pet = new Pet("cozy"); console.log(pet.name);//cozy; console.log(pet.alive);//true; 위와 같이..
-
function과 arrow function의 차이점Programming/javascript 2022. 2. 10. 14:50
1. 일반 function은 this가 동적으로 바인딩 되지만, ex) function test () { // return{ // prop:10, func: function(){ // return this.prop; }; }; }; console.log(test.call({prop:100}).func()); 는 10이 출력된다.(매개변수 무시, 기존 값 출력) Arrow function의 this 키워드는 바로 상위의 함수에 정적 바인딩 된다. ex) function test(){ // return{ // prop:10, func: () => { // return this.prop; }; }; }; console.log(test.call({prop:100}).func()); 는 100이 출력된다.(기존 ..
-
var, let, const의 차이점Programming/javascript 2022. 2. 10. 14:43
매우 기초적인 것이고 이미 이전에도 여러번 본 것이지만, 그래도 정리를 해두는게 확실히 기억에 남으니 기록을 남긴다 •변수 선언 방식의 차이 var-변수재선언, 변수재할당 가능(mutable), 변수 선언과 초기화가 한번에 진행 let-변수재할당 가능(mutable), 변수 선언과 초기화가 따로 진행 const-모두 불가능, 초기 선언만 유효(immutable) •변수 호이스팅(1) 방식의 차이 호이스팅(hoisting): javascript에서 인터프리터가 변수와 함수의 선언 전에 미리 메모리(Memory) 공간을 할당 하는 것을 말한다.(출처:MDN 용어 사전, https://developer.mozilla.org/ko/docs/Glossary/Hoisting) var - 변수의 선언과 동시에 초기화..