안녕하세요!~ 오늘 프론트엔드 개발자로써 면접 준비 과정을 정리해 기록해봤습니다.
1. JS를 body 맨 밑에 둬야 하는 이유는 무엇인가요?
간단한 자바스크립트 코드는 별 문제가 생기지 않고 매우 무거운 자바스크립트 코드들이 포함될 경우
자바스크립트 코드를 body 태그 맨 뒤에 선언하게 되면, 무거운 코드가 있다고 하더라도 html태그와 CSS가 모두 동작한 다음 불러오기 때문에 미완성된 화면이 오랫동안 지속되지 않을 것입니다.
또한 문서의 DOM(Document Object Model)구조가 완료된 시점에서 실행되기 때문에 따로 추가 설정을 할 필요가 없어지고 그렇기 때문에 특별한 사유가 있는게 아니라면 <script> 위치는 <body> 태그 맨 마지막에 선언하는 것 올바릅니다.
2. 호이스팅, 스코프 , 변수
변수 : 자바스크립트에서 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다. 변수의 선언은 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었습니다.
자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행됩니다.
선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알립니다. ( var kim )
초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화됩니다.
자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문(ex. 변수 선언문, 함수 선언문 등)을 찾아내 먼저 실행합니다. 즉, 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라 한다. 변수 선언 뿐만 아니라, var, let, const, function, function*, class 키워드를 사용해 선언한 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 됩니다.
스코프 (scope) 는 식별자(변수명, 함수명, 클래스명 등)의 유효범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라진다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖습니다.
전역 변수는 어디에서든지 참조가 가능한 값이고 반면, 지역 변수는 함수 몸체 내부를 말합니다. 따라서 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효합니다.
한 가지 주의해야 할 점은, 자바스크립트에서 모든 코드 블록 (if, for, while, try/catch 등) 이 지역 스코프를 만들며, 이러한 특성을 블록 레벨 스코프라 합니다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 이를 함수 레벨 스코프라 합니다. var 대신, 블록 레벨 스코프를 지원하는 const와 let을 사용하는 것이 좋습니다.
3. var, let, const의 차이
우성, var 키워드의 문제점은 크게 세 가지가 존재합니다
- 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있음
- 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 됨.
- 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환함
let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능합니다.
let name = 'kmj'
console.log(name) // output: kmj
let name = 'howdy' // output: Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'howdy'
console.log(name) // output: howdy
const가 let과 다른 점이 있다면, 반드시 선언과 초기화를 동시에 진행되어야 합니다. const도 let과 마찬가지로 재선언이 불가하며, 더 나아가 재할당도 불가능합니다. 재할당의 경우, 원시 값은 불가능하지만, 객체는 가능하며 const 키워드는 재할당을 금지할 뿐, '불변'을 의미하지 않습니다.
// 원시값의 재할당
const name = 'kmj'
name = 'howdy' // output: Uncaught TypeError: Assignment to constant variable.
// 객체의 재할당
const name = {
eng: 'kmj',
}
name.eng = 'howdy'
console.log(name) // output: { eng: "howdy" }
'면접준비' 카테고리의 다른 글
| [프론트엔드 면접] HTTP와 HTTPS의 개념 및 차이점 (6) | 2024.02.12 |
|---|---|
| [ 프론트엔드 면접 ] Vue.js 면접 질문 정리 (1) | 2023.04.07 |
| [ 리액트 면접준비 ] 프론트엔드 면접 준비, React.js (3) | 2023.02.21 |
| [ 면접 준비 ] 프론트엔드 개발자 면접 준비 , HTML + CSS (0) | 2023.02.20 |
| [ 면접 준비 ] 프론트엔드 면접 준비, 기술 면접 (0) | 2023.02.18 |
