유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 이 포스팅에선 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록할 생각이다.
1. switch문이 if문보다 더 유용한 경우
1) 많은 조건을 처리해야 하는 경우: switch문은 많은 조건을 처리할 때 코드가 더 깔끔해지고 가독성이 향상된다.
2) 값의 범위가 아닌 특정 값에 따라 처리해야 하는 경우
3) 값에 따라 동일한 작업을 수행하는 경우: switch문에는 fall-through라는 기능이 있어, 여러 케이스를 연결하여 동일한 작업을 수행할 수 있다.
switch (x) {
case 'value1':
case 'value2':
case 'value3':
// perform some action
break;
default:
// default action
}2. Try-Catch로 오류 처리
function getMaxLifeValues (){
const enteredValue = prompt('Maximum Life for you and the monster', '100');
const parsedValue = parseInt(enteredValue);
if (isNaN(parsedValue) || parsedValue <= 0) {
// 사용자 정의 오류 발생시키기 -> 스크립트 중단
// 관례상 대부분의 오류는 메세지가 담긴 객체의 형태
throw {message : 'Invalid user input, not a number'}
}
return parsedValue;
}
let chosenMaxLife ;
try {
chosenMaxLife = getMaxLifeValues();
} catch (error){
// 현재 코드에서 error는 자체 생성한 에러 메시지 객체
// 네트워크 요청 같은 시스템 오류인 경우 자바스크립트가 생성한 에러 객체
console.log(error);
// 폴백 로직 : 코드가 예상대로 실행되지 않을 때, 즉 예외가 발생할 때 적절한 대응을 할 수 있도록 하는 대체 코드
chosenMaxLife = 100;
} 3. 자바스크립트 동작
- 코드 로딩: 브라우저는 웹 페이지에서 자바스크립트 코드를 다운로드.
- 파싱(Parsing): 자바스크립트 엔진은 코드를 읽고, 추상 구문 트리(Abstract Syntax Tree, AST)라는 중간 데이터 구조로 변환한다.
- 인터프리팅(Interpreting): 변환된 AST를 기반으로, 인터프리터가 바이트 코드로 변환한다.
- JIT 컴파일(Just-In-Time Compilation): 자바스크립트 엔진은 실행 시간 동안 높은 성능을 위해 바이트 코드를 기계 코드로 컴파일한다. 이 과정은 코드를 최적화하고, 최적화된 코드를 실행하는 데 필요한 캐시를 생성한다.
- 실행(Execution): 최적화된 기계 코드가 실행된다.
따라서, 자바스크립트는 인터프리터가 코드를 분석하고 바이트 코드로 변환한 후, JIT 컴파일러가 바이트 코드를 기계 코드로 컴파일하여 최적화된 코드를 실행하는 과정을 거친다.
4. 힙과 스택
힙(Heap): 장기 메모리, 힙은 동적 메모리 할당을 위한 영역으로, 프로그램이 실행되는 동안 생성되는 객체와 데이터를 저장.
스택(Stack): 단기 메모리, 스택은 프로그램의 실행 흐름을 관리하는 구조. 함수 호출과 이에 따른 변수 할당 등이 이곳에서 이루어진다.
5. 브라우저 API
브라우저 API는 JavaScript가 브라우저 환경에서 특정 작업을 수행할 수 있도록 돕는 인터페이스 집합
- DOM API: 웹 페이지의 HTML과 CSS를 동적으로 조작할 수 있게 해주는 API(querySelector)
- Fetch API, XMLHttpRequest: 서버로 HTTP 요청을 보내고 응답을 받는 데 사용하는 API.
- Canvas API, WebGL API: 2D와 3D 그래픽을 그리는 데 사용하는 API.
- Web Storage API, IndexedDB API: 브라우저에서 데이터를 지속적으로 저장하는 데 사용하는 API.
6. 원시, 참조값
원시값
- Strings, Numbers, Booleans, null, undefined, Symbol.
- 원시값이 변수에 할당되면 해당 변수가 메모리의 특정 위치(일반적으로 스택)에 그 값을 직접 가지고 있다.
- 변수를 다른 변수에 할당하면 원시 값은 해당 값이 복사되어 새 변수에 저장된다.
참조값
- 원시값을 제외한 모든 것.
- 참조 값(객체)는 힙 메모리에 저장되며, 변수는 그 객체에 대한 참조(주소)를 가지고 있다.
- 변수를 다른 변수에 할당하면 메모리 주소만 복사되어 새 변수에 저장된다.
7. 가비지 컬렉션
가비지 컬렉션은 힙 메모리에서 사용되지 않는(참조되지 않는) 객체를 주기적으로 확인하고 제거한다.
