👨‍💻
프론트엔드 기술 블로그
  • 프론트엔드 기술 저장소
  • React
    • React Hook
      • useRef
      • useReducer
      • useCallback
      • useMemo
      • useState
      • useEffect
      • useContext
      • Custom Hook
  • Javascript
    • 자바스크립트 기본
      • 데이터타입
      • 배열메소드
      • 타입 및 객체 체크
      • this
        • bind, call, apply
      • 프로토타입
      • 클로저
      • 스코프
      • 함수
      • 호이스팅
    • ECMAScript 6
      • let, const
      • 화살표 함수
      • 구조분해할당
      • Promise
      • 템플릿 문자열 표현식
      • 이터레이션
      • 클래스 (Class)
      • 심볼 (Symbol)
      • 제너레이터
  • 객체지향설계
    • 객체 지향 설계 원칙
      • 단일 책임 원칙
      • 개방 폐쇄 원칙
      • 리스코프 치환 원칙
      • 인터페이스 분리 원칙
      • 의존 역전 원칙
  • 브라우저와 자바스크립트
    • Document Object Model
      • DOM API
      • 이벤트 (Event)
  • Node.js
    • 번들러
      • webpack 설정
    • node.js 버전 관리
  • HTTP
    • HTTP 기본
      • 1. 웹과 네트워크 기본
        • 1.1 웹은 HTTP로 나타낸다.
        • 1.2 HTTP 탄생과 성장
        • 1.3 네트워크 기본 TCP/IP
        • 1.4 HTTP와 관계가 깊은 프로토콜 IP/TCP/DNS
        • 1.5 이름 해결 담당 DNS
        • 1.6 각각과 HTTP와의 관계
        • 1.7 URI와 URL
      • 2. 프로토콜 HTTP
        • 2.1 HTTP는 클라이언트와 서버간에 통신을 한다.
        • 2.2 리퀘스트와 리스폰스를 교환하여 성립
        • 2.3 상태를 유지하지 않는 프로토콜 HTTP
        • 2.4 리퀘스트 URI로 리소스 식별
        • 2.5 HTTP 메소드
        • 2.6 메소드 사용
        • 2.7 지속연결로 접속량 절약
        • 2.8 쿠키를 사용한 상태관리
      • 3. HTTP 정보는 HTTP 메시지에 있다.
        • 3.1 HTTP 메시지
        • 3.2 리퀘스트 메시지와 리스폰스 메시지 구조
        • 3.3 인코딩으로 전송 효율을 높이다.
        • 3.4 여러 데이터를 보내는 멀티파트
        • 3.5 일부분만 받는 레인지 리퀘스트
        • 3.6 최적의 콘텐츠를 돌려주는 콘텐츠 네고시에이션
      • 4. 결과를 전달하는 HTTP 상태코드
        • 4.1 상태코드는 서버로부터 리퀘스트 결과를 전달한다.
        • 4.2 2xx 성공
        • 4.3. 3xx 리다이렉트
        • 4.4 4xx 클라이언트 에러
        • 4.5 5xx 서버 에러
      • 5. HTTP와 연계하는 웹 서버
        • 5.1 1대로 멀티 도메인을 가능하게 하는 가상 호스트
        • 5.2 통신을 중계하는 프로그램 : 프록시, 게이트웨이, 터널
      • 7. 웹을 안전하게 HTTPS
        • 7.1 HTTP의 약점
        • 7.2 HTTP+암호화+인증+완전성보호 = HTTPS
  • IDE
    • Webstorm
      • 웹스톰 단축키
      • 웹스톰 소스코드 특정폴더 검색 제외
  • GIT
    • Git 기초 명령어
Powered by GitBook
On this page

Was this helpful?

  1. Javascript
  2. 자바스크립트 기본

호이스팅

자바스크립트 호이스팅

호이스팅은 변수와 함수 호이스팅이 있다. 말 그대로 변수나 함수가 상단으로 끌어 올려진다는 의미이다.

변수와 함수는 여러 선언 방법이 있는데 각각 차이점이 존재하여 그 차이점을 알아본다.

var 호이스팅

console.log(js); //undefined
var js = 'javascript';

var js 선언 이전에 변수 참조가 가능하다. 실제 할당문이 도달전에 이미 js 변수가 선언되고 undefined로 초기화가 되어있다. 문맥 구조상 선언되지 않은 변수를 쓰는것도 가독성면에서 좋지도 않고 이전에 참조할 수 있게 시스템에서 초기화 해준것도 좋지 않은것같다. 이제는 쓰지말자..

let, const 호이스팅

console.log(js); //ReferenceError
console.log(java); 
let js = 'javascript';
const java = 'java';

var 의 단점을 모두 보완하며 선언전에 참조하면 참조에러가 발생한다. 그렇다고 호이스팅이 되지 않은것이 아니라 초기화가 진행되지 않아서 참조에러가 발생한 것이다.

let js = 'javascript';

if (1) {
  console.log(js); //1. ReferenceError
  let js = 'js';
}

하위 스코프에서 상위스코프 변수는 당연히 참조 가능하고 if블록 1번에서 js 접근하면 'javascript'가 나와야 될거 같지만 블록내에 js 선언이 끌어 올려지면서 referenceError가 발생한다.

함수선언식 호이스팅

console.log(func()); //javascript

function func() {
  return 'javascript';
}

함수선언식도 var 변수 선언과 같이 선언 및 초기화가 이뤄지고, 다른점은 함수 몸체까지 할당되어 선언 이전과 이후 차이없이 사용할 수 있다.

함수표현식 호이스팅

console.log(func()); //ReferenceError
const func = function() {
  return 'javascript';
}

함수 표현식은 변수 호이스팅 법칙을 따르며, var로 선언시에는 func가 undefined이라서 호출이 안되고 const, let 선언시에는 ReferenceError 라 호출이 불가능하다.

Previous함수NextECMAScript 6

Last updated 2 years ago

Was this helpful?