JS 전체 돌아보기

Jhey·2024년 11월 10일

JavsScript

목록 보기

17/18

작성위치, 변수, 자료형

<script> 태그 위치: <body> 태그 끝에 두는 이유는 HTML 요소가 로드된 후 스크립트가 실행되므로, 요소에 접근할 때 문제가 발생하지 않기 때문입니다.
let, const, var의 차이점:
- var는 함수 스코프, let과 const는 블록 스코프
- const는 재할당 불가
- var는 중복 선언 가능, let과 const는 불가능
기본형 vs 참조형: 기본형은 값을 복사, 참조형은 주소를 복사하여 원본과 복사본이 영향을 미침.
얕은 복사 vs 깊은 복사: 얕은 복사는 1차원 데이터만 복사하고, 깊은 복사는 모든 계층을 새로 복사하여 독립적인 객체를 만듦.
async와 defer 차이:
- async는 스크립트를 다운로드 후 바로 실행 (순서 보장 안 됨)
- defer는 모든 스크립트를 다운로드 후, HTML 파싱이 끝난 뒤 순차적으로 실행.

연산자 와 조건문

알겠습니다! 이번에는 조금 더 상세하게 정리해드릴게요:

== vs ===: ==은 타입 변환 후 비교하고, ===은 타입과 값을 모두 비교
단락회로 평가: &&는 조건이 모두 참일 때 true, ||는 하나라도 참이면 true를 반환

&& 는 첫 조건이 false 면 오른쪽 조건은 볼 필요가 없다
|| 는 첫 조건이 true 면 오른쪽 조건은 볼 필요가 없다

반복문: for는 조건을 설정해 반복, for...of는 배열 순회, for...in은 객체 순회에 사용
switch

      switch (값) {
        case 10: 
          alert('10');
          break;
        case 9: 
          alert('9');
          break;
        case 8: 
          alert('8');
          break;
        default: 
          alert('etc');
      }

0, NaN(Not a Number), “”, null, undefined, false를 제외한 모든 값은 참

함수

중요한 차이점은 함수 선언문은 호이스팅(hoisting) 되기 때문에 어디서든 호출할 수 있지만, 함수 표현식은 변수에 할당된 이후에만 호출 가능
가변인자 : arguments 매개변수가 몇 개가 왔는지 알려줌 , 매개변수 수에 수애받지 않을 수 있다.
this
- 일반함수 : this가 호출된 문맥에따라 가르키는 객체가 다르다
- 화살표함수 : 자신의 상위 스코프를 가르킨다

스코프, 호이스팅, 컨텍스트

자바스크립트에서 실행 컨텍스트는 코드가 실행되는 환경을 의미
호이스팅은 선언을 코드의 최상위로 끌어올리는 현상
TDZ (Temporal Dead Zone)은 let과 const가 선언되기 전에 접근할 수 없게 만드는 구간
스코프 체인은 변수에 접근할 수 있는 범위를 관리

클로저

1.1.1 가비지 컬렉터
메모리에서 더 이상 사용되지 않는 객체를 자동으로 감지하고, 해당 메모리를 회수하여 메모리에서 삭제해주는 시스템입니다.

1.1.2 가비지 컬렉션
메모리가 회수되는 과정
가비지 컬렉션을 자동으로 수행합니다.

1.1.3 콜스택과 가비지 컬렉터
콜스택에서 실행 컨텍스트가 제거되는 순간 자동으로 가비지 컬렉터의 대상이 되어 제거됩니다.
하지만 자동으로 수행되지 않는 경우가 있습니다. → 컨텍스트의 레코드 값이 참조 중일 때

객체, 인스턴스, 프로토타입

함수와 객체: 함수는 객체를 생성할 수 있으며, 자바스크립트는 함수도 객체로 다룬다. 함수는 다양한 속성(예: name, length)을 가질 수 있다.
this: this는 함수 호출 시의 실행 컨텍스트에 따라 달라진다. 일반 함수는 전역 객체를 가리키고, 메서드는 객체를 가리킨다.
생성자 함수와 인스턴스: new 키워드를 사용하여 생성자 함수로 객체를 생성하며, 이 객체는 생성자의 프로토타입을 상속받는다.
프로토타입 체인: 객체는 프로토타입을 통해 상속을 받으며, 메서드와 속성을 공유한다.
임시 객체(Wrapper Object): 원시 값(문자열, 숫자 등)은 임시로 객체처럼 다뤄지며, 이는 자바스크립트 엔진의 내부 동작 방식이다.

class

클래스 vs 생성자 함수: 클래스는 생성자 함수보다 더 간결하고 직관적인 문법을 제공하며, 메서드는 자동으로 프로토타입에 추가된다.
상속: extends와 super를 사용하여 부모 클래스의 속성과 메서드를 자식 클래스가 상속받을 수 있다.
정적 메서드: 인스턴스를 생성하지 않고 클래스 자체에서 호출할 수 있는 메서드로, 주로 인스턴스와 관련 없는 기능에 사용된다.
접근 제어자: get과 set을 사용하여 클래스 속성에 대한 접근을 제어할 수 있다.
프라이빗 필드: 외부에서 접근할 수 없는 필드를 정의하는 방법.
오버라이딩: 부모 클래스의 메서드를 자식 클래스에서 재정의할 수 있다.

동기, 비동기

동기적 (차단): 작업이 순차적으로 실행됩니다.
비동기적 (비차단): 긴 작업을 기다리는 동안 다른 작업을 실행할 수 있습니다.
콜백 함수: 비동기 작업을 처리하지만, '콜백 지옥' 문제를 일으킬 수 있습니다.
Promise: 비동기 작업을 더 쉽게 처리하고, .then()과 .catch()로 연결할 수 있습니다.
블로그 포스트 내용은 자바스크립트에서의 비동기 처리에 대해 다루고 있습니다. 핵심 포인트는:
Promise와 마이크로태스크 큐: Promise는 마이크로태스크 큐에 들어가므로 setTimeout()보다 먼저 실행됩니다.
async/await: async 함수는 Promise를 반환하고, await는 Promise가 해결될 때까지 기다립니다.
비동기 작업 처리: Promise.all()을 사용해 여러 비동기 작업을 병렬로 처리할 수 있습니다.
API 호출: fetch()를 사용하여 API 요청을 하고, 에러는 .catch()로 처리합니다.