soowanlog
Javascript 본문
- Javascript란?
Javascript(JS)란 웹 페이지를 만들기 위해 사용되는 스크립트 언어(인터프리터 언어)입니다.
웹 페이지의 화면에서 단순한 정적 페이지를 보여주는 것뿐만 아니라 동적인 상호작용이 가능하도록 합니다.
기존의 JS는 브라우저 상에서만 사용할 수 있었지만 현재는 서버, 앱 등 다양한 분야에 사용이 가능하여 아주 인기 있는 언어로 자리 잡고 있습니다.
※ Java 와 Javascript
Javascript가 웹 브라우저에 처음으로 탑재되었을 때 이름은 'Mocha(모카)' 였음.이 후 'Livescript(라이브스크립트)' 로 이름이 변경되었고 최종적으로 당시 인기 있던 프로그래밍 언어였던 Java의 이름을 따와 'Javascript(자바스크립트)'로 이름이 변경됨.즉, Java와 Javascript는 전혀 관련 없는 언어임.
- Javascript 특징
- 스크립트 언어(인터프리터 언어) :
소스코드를 전부 object 파일로 변환한 뒤 실행시키는 컴파일러 언어와 달리 소스코드를 한 줄씩 읽어 처리하는 언어입니다.
실행 파일을 별도로 생성하지 않고 실행할 때마다 인터프리트 과정이 필요하기 때문에 컴파일러 언어보다 느리다는 단점이 있지만 코드 수정 시 따로 빌드 과정이 필요하지 않다는 장점이 있습니다.
- 객체 기반의 언어 :
JS는 프로토타입을 통해 객체를 만들고 상속을 하는 객체 기반의 스크립트 언어입니다.
- 객체 지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있는 언어 :
객체 중심의 설계 또는 함수 중심의 설계가 모두 가능한 언어입니다.
- Javascript의 역할
- 브라우저 제어 :
브라우저의 여러 가지 이벤트를 제어할 수 있습니다.
- 웹 요소 제어 :
CSS와 HTML의 요소를 동적으로 제어할 수 있습니다.
- 사용자와 상호작용 :
마우스와 키보드 입력에 대한 처리를 할 수 있습니다.
- 웹 애플리케이션 제작 :
브라우저 저장소, 위치 정보 서비스, 웹 서버 통신 등 웹 애플리케이션을 제작하는데 다양한 기능을 제공합니다.
- 폭 넓은 확장성 :
React 등의 라이브러리, Vue.js 같은 프레임워크 등으로 프론트엔드를 개발할 수 있고, Node.js를 사용하여 서버 개발도 가능합니다.
- 변수 선언
- var :
함수 스코프를 갖기 때문에 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서 접근할 수 없습니다.
Hoisting(호이스팅)이라는 특징이 있어 선언 전에 변수를 참조할 수 있습니다.
블록 스코프는 지원하지 않습니다.
function example() {
var x = 1;
if (true) {
var x = 2;
console.log(x); // 2
}
console.log(x); //2
}
- let :
블록 스코프를 갖는 변수를 선언 하는 키워드입니다.
블록 스코프는 중괄호 '{}' 내에서만 유효한 범위를 의미합니다.
호이스팅은 일어나지만 변수가 선언된 위치에서 초기화되기 전까지는 참조할 수 없습니다.
function example() {
let x = 1;
if (true) {
let x = 2;
console.log(x); // 2
}
console.log(x); // 1
}
- const :
블록 스코프를 갖고 상수를 선언하는 키워드입니다.
한 번 값이 할당되면 재할당이 불가능합니다.
const로 선언한 변수는 선언과 동시에 초기화되어야 합니다.
const pi = 3.14;
pi = 4; // 오류 : 상수에 값을 재할당 할 수 없음
const c; // 오류 : 선언과 동시에 초기화되어야 함
Java는 변수의 선언을 엄격하게 지켜야하지만 Javascript는 자유롭게 선언할 수 있습니다.
- Hoisting이란?
Hoisting(호이스팅)이란 프로그램 중간에서 변수나 함수를 선언하더라도 프로그램 처음에 선언된 것처럼 다른 문장 앞에 생성되는 것을 의미합니다.
console.log(x); // undefined
var x;
위 코드에서 첫번째 줄은 아직 변수 x가 선언되지 않았기 때문에 오류가 발생할 것 같지만 undefined가 출력됩니다.
이것이 변수 선언의 끌어올림(호이스팅)입니다.
console.log(x); // undefined
var x = 5;
console.log(x); // 5
위 코드처럼 선언과 동시에 대입하는 코드는 호이스팅 하지 않습니다.
변수 선언부 var x;는 호이스팅 하지만 대입부 x = 5;는 호이스팅하지 않습니다.
let과 const변수 선언에서는 호이스팅이 발생하지 않습니다.
console.log(x); // Uncaught ReferenceError
let x = 1;
console.log(x); // 1
호이스팅이 발생하는 이유는 var x = 5; 는 하나의 구문처럼 보이지만 JS 엔진은 그렇게 보지 않기 때문입니다.
var x; 와 x = 5;라는 구문으로 보고 첫 번째 구문은 컴파일러 단계에서 처리하고 두 번째 구문은 실행 단계에서 처리합니다.
즉, 스코프의 모든 선언문은 실행 전에 먼저 처리된다는 것입니다.
그러나 var와 달리 let, const는 호이스팅이 발생하지 않는 것처럼 보이는데 이는 TDZ에 들어가기 때문입니다.
- TDZ란?
TDZ(Temporal Dead Zone)란 일시적인 사각지대로 변수를 사용하는 것을 비허용하는 개념상의 공간입니다.
TDZ에 있는 값에 접근하게 되면 ReferenceError가 발생합니다.
V8 엔진의 코드를 보면 var는 변수 객체를 생성한 후 AllocateTo 메서드를 통해 바로 메모리에 공간을 할당합니다.
※ V8 Engine
Google Chrome과 Node.js에서 사용되고 있는 구글에서 제작된 JS 엔진.
다른 엔진과 달리 JIT(Just-In-Time) 컴파일러로 런타임에 모든 JS를 기계어로 컴파일하고 중간에 코드를 생성하지 않아 속도가 빠름.
let과 const는 set_initailize_position 메서드를 통해 해당 코드의 위치를 의미하는 position 값만 정해줍니다.
선언은 되어 있지만 변수에 값을 담기 위한 메모리에 공간이 확보되지 않은 상태가 되는 것입니다.
이 시점에서 TDZ에 들어가게 됩니다.
즉, TDZ에 있는 변수 객체란 선언은 되었지만 아직 초기화되지 않아서 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태입니다.
- Hoisting 되는 / 되지 않는
- 되는
Function Declaration(함수 선언문)
say(); // Hello
function say() {
console.log("Hello");
}
say(); // Hello
import module
say(); // 동작함
import { say } from "./myModule";
- 되지 않는
Function Expression(함수 표현식)
say(); // Uncaught TypError
var say = function() {
console.log("Hello");
}
say(); // Hello
Class
console.log(Say); // ReferenceError
class Say {}
참 고 자 료
- 웹을 움직이는 근육, JavaScript란 무엇인가? | surim's develog
'프론트엔드 > Javascript' 카테고리의 다른 글
| 동기, 비동기 (4) | 2024.03.11 |
|---|---|
| Ajax (0) | 2024.03.11 |
