script async와 defer 차이, 실행 시점과 선택 기준까지 한 번에 정리 빠른 답 async는 다운로드가 끝나는 즉시 실행되어 HTML 파싱을 끊을 수 있습니다. defer는 문서 파싱이 끝난 뒤 선언 순서대로 실행되어 앱 초기화 코드에 안전합니다. 의존성이 없고 독립적으로 동작하는 외부 스크립트는 async가 잘 맞습니다. 실행 순서와 DOM 준비 시점이 중요하면 defer를 먼저 검토하는 것이 실무적으로 안전합니다. 목차 한눈에 비교 왜 둘 다 비동기인데 체감은 다를까 흐름으로 보기 HTML 파싱과 렌더링 사이에서 스크립트가 끼어드는 지점 async가 맞는 경우와 defer가 맞는 경우 설정 예시로 보는 배치 전략 콘솔과 DevTools로 실행 순서 확인하기 자주 놓치는 예외: inline script와 module script 선택 기준을 한 줄로 정리하면 한눈에 비교 Point 1 다운로드: async 와 defer 모두 HTML 파싱과 병렬로 다운로드를 시작할 수 있습니다. Point 2 실행 시점: async 는 다운로드가 끝나는 즉시 실행되고, defer 는 문서 파싱이 끝난 뒤 실행됩니다. Point 3 실행 순서: 여러 async 스크립트는 먼저 받아진 순서대로 실행되고, 여러 defer 스크립트는 문서에 적은 순서대로 실행됩니다. Point 4 DOM 접근 안정성: async 실행 시점에는 DOM이 아직 덜 만들어졌을 수 있지만, defer 는 문서 파싱 후라 DOM 접근이 훨씬 예측 가능합니다. Point 5 DOMContentLoaded 관계: defer 와 기본 module 스크립트는 DOMContentLoaded 전에 실행되며, 이 이벤트는 그 실행을 기다립니다. async 는 보통 그 흐름 바깥에서 실행됩니다. 왜 둘 다 비동기인데 체감은 다를까 헷갈리는 이유는 둘 다 “비동기로 로드된다”는 문장만 기억하기 쉽기 때문입니다. 하지만 실제 성능과 렌더링에 더 큰 영향을 주는 것은 다운로드 자체보다 스크립트...
자바스크립트 함수, 선언부터 클로저와 this까지 한 번에 이해하기 빠른 답 자바스크립트에서 함수는 값처럼 다룰 수 있는 일급 객체라서 전달, 반환, 저장이 모두 가능합니다. 함수 선언식과 함수 표현식은 호이스팅 방식이 다르므로 호출 가능 시점이 달라집니다. 클로저는 함수가 자신이 만들어질 때의 스코프를 기억하는 동작이며, 상태 캡슐화의 핵심 도구입니다. 화살표 함수는 문법만 짧은 것이 아니라 this와 arguments를 자체적으로 만들지 않는다는 점이 중요합니다. 목차 한눈에 비교 실행 환경을 먼저 맞추기 함수는 값이면서 호출 가능한 객체다 선언식, 표현식, 화살표 함수의 차이 호이스팅과 TDZ를 오류 이름으로 읽기 클로저는 값을 복사하지 않고 환경을 붙잡는다 this와 arguments는 호출 방식과 선언 방식이 가른다 출력으로 읽는 디버깅 포인트 실무에서 어떤 형태를 고를까 한눈에 비교 Point 1 함수 선언식: 평가 단계에서 함수 객체까지 준비되므로 선언 전 호출이 가능하다. Point 2 함수 표현식: 변수 바인딩과 함수 값 할당이 분리된다. const 는 TDZ 때문에 ReferenceError , var 는 undefined 상태라 TypeError 가 난다. Point 3 화살표 함수: 함수 값이긴 하지만 자체 this , arguments , prototype 이 없고 생성자로 쓸 수 없다. Point 4 클로저: 외부 값을 “복사”해 두는 게 아니라, 선언 시점의 스코프 체인에 계속 연결된다. Point 5 undefined , ReferenceError , TypeError 는 모두 다른 신호다. 값이 없는지, 접근이 금지됐는지, 타입이 맞지 않는지 구분해서 읽어야 한다. 함수를 이해할 때는 문법 이름보다 먼저 네 가지를 보면 된다. 값처럼 전달되는가, 언제 호출 가능한가, 어떤 스코프를 기억하는가, this 를 스스로 가지는가. 이 기준이 잡히면 선언식, 표현식, 클로저, 화살표 함수가 따로 놀지 않는다. 실행 환경...