Study

[JavaScript_study] 자바스크립트의 작동 원리

* 자바스크립트의 실행 순서 (콜스택) 자바스크립트 런타임 환경이라면 항상 자바스크립트 엔진이 탑제되어 있다. 그래서 소스코드를 자바스크립트 엔진이 이해하고 번역해서 실행하는것이다. 소스코드에서 동적으로 객체를 생성하는 경우에는 Memory Heap에 생성이 된다. 대부분 구조화되지 않는 '더미'같은 메모리 영역을 'heap'라고 표현한다. Call Stack는 우리의 함수 실행순서를 기억한다. Call Stack을 이용해서 어디에서 실행되었는지 어디로 돌아가야되는지를 확인한다. Call Stack는 하나의 싱글 컨텍스트 스택을 가지고 있다(한번에 하나의 일만 처리 가능) 이를 싱글 쓰레드(Single Thread)라고 한다. 단 하나의 스트림으로만 한가지의 일을 한번에 처리 가능 자바스크립트는 기본적으..

[JavaScript_study] 모듈 (module)

* 모듈(module)이란? JS파일별로 캡슐화를 하는것 모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다. 모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. script 태그의 attribute에 type="module"를 추가해주어서 모듈화를 해준다. export default는 모듈에서 딱 하나만 지정해줄 수 있으면 import를 해줄때 작명을 마음대로 해도된다. 여러가지를 내보낼때는 export를 이용해야한다. import { export명 동일하게 } as를 통해서 원하는 이름으로 변경도 가능하다. // import { export명 동일하게 as 내가원하는이름 } get, s..

[JavaScript_study] error-bubbling

* error-bubbling 예시 코드 // Bubbling up, Propagating 🧼 function a() { throw new Error('error!'); } function b() { try { a(); } catch (error) { console.log('생각해보니깐 이 에러는 내가 핸들링 할 수 없을 것 같군!'); throw error; } } function c() { b(); } try { c(); } catch (error) { console.log('Catched!'); } console.log('done!');

[JavaScript_study] 에러 핸들링(error-handling)

* try catch finally try : 실행될 선언들 catch : 블록에서 예외가 발생했을 때 실행될 선언들 finally : 선언이 완료된 이후에 실행된 선언들. 이 선언들은 예외 발생 여부와 상관없이 실행된다. // try catch finally // throw error를 하게되면 밑의 코드는 실행되지않고 app crashed가 발생한다. function readFile(path) { // throw new Error('파일 경로를 찾을 수 없음'); return '파일의내용'; } function processFile(path) { let content; try { content = readFile(path); } catch (error) { console.log(error); cont..

[JavaScript_study] 주석 (Comments)

* 주석 (Comments) 주석은 코드 자체를 설명하는 것이 아니라, 왜(WHY) 이런 아키텍쳐를 선택했는지 그리고 어떻게(HOW)이 모듈을 사용해야 하는지를 설명하는것이 좋음 (단, 정말 필요한 경우에만) 외부에서 많이 쓰이는 함수 API인 경우 JSDoc를 사용하면 좋음 /** */ 형식의 주석 // 한줄 짜리 주석을 작성할 때 사용 ex) // TODO(latte) : 해야할 일 작성 ex) // TODO(latte) : xx기능 구현하기 * 주석 사용 예시 // 외부에서 많이 쓰이는 함수 API인 경우 JSDoc을 사용하면 좋음 // 첫줄에는 함수에 대한 설명 작성 /** * 주어진 두 인자를 더한 값을 반환함 * @param {*} a 숫자 1 * @param {*} b 숫자 2 * @retu..

[JavaScript_study] 널 병합 연산자(Nullish Coalescing Operator)

* Nullish Coalescing Operator ES11 (ECMAScript 2020) ?? null, undefined || falsy한 경우 설정(할당) ex) 0, -0, '' * 활용 예시 or연산자는 falsy한 경우에 설정된다. 그런데 default parameter은 null과 undefined인 경우 설정 그런데 일반 코드에서 or연산자를 쓰면 null과 undefined뿐만 아니라 텅텅 빈 문자열 및 0인경우에도 설정된다. null과 undefined일 경우에만 뒤의 코드를 수행하고 싶을때 해당 연산자를 이용하면 된다. * Nullish Coalescing Operator 활용 예시 코드 // or을 잘못쓰면 아래의 코드처럼 오출력이 생길 수 있다. let num = 0; cons..