hoisting, 동기vs비동기, GETvsPOST

Javascript의 호이스팅

호이스팅(Hoisting)?

hoist : 들어(끌어)올리다

• 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상 (출처_MDN문서)
• javascript에서 변수 선언과 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상

=> 한마디로 물리적으로 코드가 상단으로 옮겨지는 것은 아니지만 끌어올려지는 것처럼 보이는 현상!

특징

• 선언에서만 호이스팅이 일어나기 때문에 값을 할당해도 할당된 값은 호이스팅이 일어나지 않음
• 자바스크립트 엔진은 코드를 실행하기 전에 실행 컨텍스트에 등록된 변수 객체에 접근할 수있음
• 호이스팅으로 인해 변수나 함수를 선언하기 전에도 해당 요소에 접근할 수 있지만 오류를 발생시킬 수 있기때문에 권장하지 않음!
• let, const는 호이스팅 되지만, TDZ(Temporal Dead Zone)에 의해 선언되기 전에는 참조할 수 없음

발생하는 이유

• 자바스크립트 엔진에서 변수는 선언 → 초기화 → 할당을 거쳐 생성됨

단계	설명
선언 단계	변수를 실행 컨텍스트의 변수 객체에 등록
초기화 단계	변수 객체에 등록된 변수를 위한 메모리 공간을 확보(이때 undefined로 초기화됨) / 메모리가 할당되면 메모리 참조를 통해 변수에 접근할 수 있음
할당 단계	사용자가 정의한 값을 변수에 할당해줌

var

• 변수선언 & 초기화가 함께 진행됨 → 변수 객체 등록과 동시에 메모리 공간도 할당받음
• 메모리를 할당받은 상태이므로 호이스팅시 메모리 참조를 통해 변수 접근이 가능

console.log(a) // 변수 접근 가능
var a; // 실행 컨텍스트에 등록 & 메모리 할당받음

let

• 선언과 초기화를 각각 진행
• 선언 단계에서 실행 컨텍스트에 등록은 했지만 메모리를 할당받지 못해 접근이 불가능한 상태
• 따라서 메모리를 할당받지 못해 참조할 메모리가 없으므로 ReferenceError가 발생

console.log(a); // 변수 접근 불가능
let a; // 실행 컨텍스트에 등록 & 메모리 할당 못 받음

참고
블로그
MDN

---

동기 vs 비동기

동기(Synchronous)

• 먼저 시작한 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다림
• 앞선 작업이 다 끝나면 새로운 작업을 시작하는 방식
• 작업이 직렬로 배치되어 실행되며 작업 실행의 순서가 확실히 정해져 있는 것

장점

• 코드의 흐름을 이해하기 쉬움

단점

• 긴 작업이 진행되는 동안 다른작업이 대기상태에 머무르기 때문에 효율성이 떨어짐
  
  

비동기(Asynchronous)

• 먼저 시작된 작업의 완료 여부와 상관없이 새로운 작업을 시작하는 방식
• 작업이 병렬로 배치되어 실행되며 작업의 순서가 확실하지 않아 나중에 시작된 작업이 먼저 끝나는 경우도 발생
• 백그라운드에서 실행되며, 완료되면 콜백함수나 프로미스를 통해 결과를 처리

필요성

• 오래걸리는 작업을 백그라운드에서 처리하는 동안 사용자는 다른 작업을 계속 진행할 수 있음
• 네트워크 요청이나 파일 시스템 작업을 수행할 때 유용함
• 따라서 전체 작업의 처리 시간을 단축할 수 있으며 사용자 경험을 향상시킬 수 있고, 성능과 반응성을 개선할 수 있음

---

GET vs POST

GET 메소드?

• Idempotent : 동일한 GET 요청을 여러 번 보내도 서버의 상태나 데이터에 영향을 주지 않고, 동일한 응답을 반환함
• HTTP 메소드 중 하나로 주로 서버에 데이터를 조회할 때 사용(ex. 웹 페이지 열기, 게시글 읽기 등)
• 요청하는 데이터가 URL의 쿼리 스트링을 통해 전송됨
• 데이터가 URL에 노출되기 때문에 보안상 GET방식은 중요한 정보를 다루기에 적합하지 않음
• 캐싱이 가능함
• 브라우저 기록이 생성되고 북마크로 추가가 가능함

POST 메소드?

• Non-idempotent : 동일한 POST 요청을 여러 번 보내면 각기 다른 결과를 가져올 수 있음
• 서버의 상태나 데이터를 변경할 때 사용함(ex. 게시글 작성, 수정, 삭제 등)
• 요청하는 데이터가 HTTP메시지의 body부분에 포함되어 전송됨
• 데이터가 URL에 노출되지 않아 GET보다 보안성이 높음
• 캐싱이 불가능함
• 브라우저 기록이 생성되지 않으며 북마크 추가도 불가능함