⭐ 자바스크립트 정의
-
자바스크립트는 객체 기반의 스크립트 언어,
HTML은 웹 페이지의 내용을 작성 CSS는 디자인을 담당
자바스크립트는 웹페이지의 동작을 구현하는 역할을 함 -
웹페이지가 브라우저에서 동작할 때 HTML과 CSS는 이미 브라우저에 의해 해석되어 화면에 표시, 하지만 자바스크립트는 브라우저에서 실행될 때 웹 페이지의 동적인 요소들을 처리하고 사용자와의 상호작용을 위한 기능을 담당
-
자바스크립트는 브라우저에서 실행되거나 Node.js 같은 서버 측 프로그래밍 언어에서도 사용할 수 있음 브라우저에서 실행될 땐 HTML DOM (Document Object Model)과 CSS DOM을 조작하여 웹 페이지의 동적인 부분들을 변경함 반면, Node.js와 같은 서버측에서는 데이터 베이스 연결, 파일 처리 등을 담당
- 현재 컴퓨터나 스마트폰 등 웹 브라우저에는 자바스크립트 인터프리터가 내장 되어 있어서 별도의 설치 없이도 JS 코드를 실행할 수 있기 때문에 웹 개발에서 가장 필수적인 언어
⭐ 자바스크립트 특징
-
자바스크립트는 동적 타입 언어, 타입을 명시할 필요가 없는 인터프리터 언어 따라서 프로그램을 실행하던 중에 변수에 저장되는 데이터 타입이 동적으로 바뀔 수 있음
-
자바스크립트는 프로토타입 (prototype) 이라는 개념을 통해 객체 지향 언어들의 특징을 구현, 따라서 자바스크립트는 클래스 기반이 아닌 프로토타입 기반의 객체 지향 언어
-
자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 둘 다 사용 가능 (멀티 패러다임 프로그래밍 언어)
-
일반적인 객체 지향 언어들은 클래스를 통해 객체 지향 언어에서 나타나는 상속 등의 특징을 구현
⭐ 프로그래밍 언어에서 변수란?
-
변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 간단히 말하면, 프로그래밍 언어에서 값을 저장하고 참조하는 매커니즘으로 값의 위치를 가리키는 상징적인 이름
-
변수들은 프로그래밍 언어의 컴파일러 혹은 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행됨
-
변수에 값을 저장하는 것을 할당 (또는 대입, 저장)이라고 하고 저장된 값을 불러올 때는 참조(reference) 라고 함
-
식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해 낼 수 있어야 하기 때문에 어떤 값이 저장되어 있는 메모리 주소를 기억 (저장) 해야함
변수 선언
-
변수 선언을 조금 자세히 말하면 값을 저장하기 위한 메모리 공간을 확보 (allocate)하고 변수 이름과 확보된 메모리 공간의 주소를 연결 (name binding)해서 값을 저장할 수 있게 준비하는 것
-
변수 선언에 의해 확보된 메모리 공간은 해체 (release) 되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용 가능
-
자바스크립트 엔진은 변수선언을 2단계에 걸쳐 수행
-- 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에게 변수의 존재를 알림
-- 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 (일반적으로 초기화란 선언 이후 값을 할당하는 것을 말함) -
var 키워드를 사용한 변수는 선언 단계와 초기화 단계가 동시에 진행 (undefined를 할당)
-
변수 선언은 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 이전 단계에서 먼저 실행됨
-
변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있는 메모리 자리를 비우고 그 공간에 값을 할당하는 것이 아닌 새로운 메모리 공간을 확보하고 그 곳에 값을 저장
⭐ var, let, const
-
var는 함수 레벨 스코프 - 함수 내에서 선언된 변수는 함수 내에서만 유효하고 함수 외부에서는 참조할 수 없음 함수 내부에서 선언한 변수는 지역변수이고 함수 외부에서 선언한 변수는 모두 전역 변수
-
let과 const는 블록 레벨 스코프 - 블록 내에서 선언한 변수는 블록 내부에서만 유효하고 외부에서는 참조할 수 없음
-
var, let은 변수 선언시 초기값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야함
-
var, let은 재할당이 가능하지만 const는 재할당이 불가
⭐ 호이스팅
-
자바스크립트에서 호이스팅이란 자바스크립트 엔진이 변수와 함수의 공간을 선언 전에 미리 할당해놓는 것
-
현상적으로는, 코드가 실행되기 전 변수/함수선언이 해당 스코프의 최상단으로 끌어 올려지는 현상
-- 자바스크립트 엔진은 소스 코드를 한 줄씩 순차적으로 실행 (런타임) 하기에 앞서 먼저 소스 코드의 평가 과정을 거치면서 소스 코드를 실행하기 위한 준비 (실행 컨텍스트를 위한 과정)을 함
-- 자바스크립트 엔진은 위 과정에서 변수 선언을 포함한 모든 선언문 (변수, 함수 선언문)을 소스 코드에서 찾아내 먼저 실행
-- 소스 코드의 평가 과정이 끝나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 수행
-- 변수 선언은 런타임 이전에 먼저 실행 되지만 변수 값의 할당 (초기화)는 소스 코드가 순차적으로 실행되는 시점인 런타임에 실행 -
var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅이 됨 모든 선언문은 런타임 이전 단계에서 실행 되기 떄문
-
var로 선언한 변수의 경우 호이스팅시 undefined로 변수를 초기화, 반면, let과 const로 선언한 변수의 경우는 호이스팅시 변수를 초기화 하지 않음
-
let과 const는 블록 스코프의 최상단으로 호이스팅 되어 선언만 되고, 값이 할당되기 전까지는 어떤 값으로도 초기화 되지 않음, 따라서 var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만 let과 const는 TDZ에 의해 ReferenceError가 발생
출처 : https://water-orangutan-97f.notion.site/v1-2-0-2c4d4292c8574027b50150c5ef6e02b5
