y_flm's Blog

var, let, const는 크게 변수의 범위(스코프) / 중복 선언 / 호이스팅으로 구분하여 비교할 수 있다.

변수의 범위로 보는 차이점

1. var는 함수 스코프(function scope)를 가지는 변수이다. 즉, 변수를 선언한 함수 내에서만 유효하고, 함수 밖에서는 접근할 수 없다.

    함수 바깥에서 선언하면 전역 변수(global variable)로 취급된다.

     * 함수 스코프에서만 가지므로 if문이나 for문 등에서는 적용이 되지 않는다.

function sayHi () { 
  var say = 'Hi';
  console.log(say);  // Hi 출력
}
console.log(say);  // Error 발생

if(true) {
  var title = 'JavaScript';
  console.log(title);  // JavaScript 출력
}
console.log(title);  // JavaScript 출력

for(var i = 1; i < 4; i++;) {
  console.log(i);  // 1부터 3까지 출력
}
console.log(i); // 4 출력

2. let, const은 블록 스코프(block scope)를 가지므로, 변수를 선언한 {} 안에서만 유효하고, 그 밖에서는 접근할 수 없다.

function sayHi () { 
  let say = 'Hi';
  console.log(say);  // Hi 출력
}
console.log(say);  // Error 발생

if(true) {
  const title = 'JavaScript';
  console.log(title);  // JavaScript 출력
}
console.log(title);  // Error 발생

for(let i = 1; i < 4; i++;) {
  console.log(i);  // 1부터 3까지 출력
}
console.log(i); // Error 발생

중복 선언

1. var는 같은 이름으로 선언된 변수를 다시 선언할 수 있다.

    중복 선언 시에는 나중에 선언된 값으로 덮어씌워진다.

var title = 'JavaScript';
console.log(title);  // JavaScript 출력

var title = 'HTML';
console.log(title);  // HTML 출력

title = 'CSS';
console.log(title);  // CSS 출력

2. let는 같은 스코프 내에서 같은 이름의 변수는 다시 선언할 수 없다.

let title = 'JavaScript';
console.log(title);  // JavaScript 출력

let title = 'HTML';
console.log(title);  // Syntax Error

title = 'CSS';
console.log(title);  // CSS 출력

3. const도 같은 스코프 내에서 같은 이름의 변수는 다시 선언할 수 없다.

    또한, 선언 후 재할당이 불가능하고, 한번 값이 할당되면 그 값을 변경할 수 없다.

    하지만 객체나 배열 같은 참조형 데이터의 경우, 객체의 속성이나 배열의 요소를 변경할 수 있다.

const title = 'JavaScript';
console.log(title);  // JavaScript 출력

const title = 'CSS' // Syntax Error
title = 'HTML'; // Type Error

const obj = { name: 'Alice' };
obj.name = 'Bob'; // 가능

호이스팅(Hoisting)

[호이스팅이란? 🔍]

호이스팅은 자바스크립트의 변수 선언과 함수 선언이 코드 실행 전에 끌어올려지는 현상이다.

자바스크립트는 코드를 실행하기 전에 선언을 먼저 처리하고, 그 다음에 실제 코드 실행을 처리한다는 특징이 있다.

하지만 호이스팅이 어떻게 작동하는지에 따라 다르게 동작할 수 있다.

1. var로 선언된 변수는 선언만 호이스팅되고 초기화는 되지 않는다.

    즉, 변수가 함수의 제일 위로 끌어올려지지만 값은 할당되지 않은 상태로 올라간다.

console.log(title);  // undefined 출력

var title = 'This is title';

2. let, const으로 선언된 변수도 호이스팅이 일어나지만, 변수 선언 전에 접근하면 ReferenceError가 발생한다.

    초기화 전까지는 Temporal Dead Zone (TDZ)에 있기 때문에 값을 참조할 수 없다.

console.log(title);  // Reference Error
console.log(name);   // Reference Error

let title = 'This is title';
const name = 'My name is name';

요약 정리

.js 란?

    .js는 자바스크립트의 파일 확장자이며 일반적으로 사용하는 순수 자바스크립트 코드가 들어간다.

    브라우저가 이해할 수 있는 코드이고, 리액트를 쓰지 않아도 문제 없는 파일 형식이다.

[예시 코드]

function sayHello(name) {
  console.log("Hello, " + name);
}

sayHello("John");

.jsx 란?

    .jsx는 JavaScript XML의 약자이며 자바스크립트 코드 안에 HTML과 비슷한 문법을 쓸 수 있게 해주는 확장자이다.

    주로 React에서 사용되며, JSX 문법을 사용하면 마치 HTML처럼 UI를 구성할 수 있다.

    하지만 브라우저는 JSX를 이해하지 못하므로 컴파일 변환이 필요하다.

      * .js에서도 JSX 문법을 사용할 수는 있음!

[개념 알고가기 💡]
1. XML(eXtensible Markup Language)이란?
    확장 가능한 마크업 언어로, HTML처럼 태그로 데이터를 표현하지만 HTML보다 훨씬 더 유연하고 데이터 중심적이다.
    원래는 데이터 저장/전송용 포맷으로 만들어졌으며, 특징은 다음과 같다.
    1) 사용자가 직접 태그를 정의 가능
    2) 구조적 데이터 표현에 적합
    3) 사람도 읽기 쉽고, 기계도 파싱하기 쉬움
    * 단순히 데이터를 표현하는 방법이며, 실제 동작은 하지않고 데이터를 설명하는 "형식"이다.

    * 따라서 JSX는 JavaScript XML이란 이름이지만, 실제로는 XML이 아니고 XML처럼 생긴 문법을 자바스크립트에 끼워 넣은 것이다.

[예시 코드]

export default function Hello() {
  return <h1>Hello, world!</h1>;
}

.js 확장자에서도 JSX 문법을 사용할 수 있는데, 왜 굳이 .jsx로 사용하면서 컴파일 변환을 해줘야하는거지?

.js에서도 JSX를 사용할 수 있는 이유

    그 이유는 Babel이나 Webpack 같은 빌드 도구가 .js 파일 안에서도 JSX 문법을 인식하고 변환해줄 수 있게 설정되어 있기 때문이다.

    그렇기 때문에 .js 파일에서 JSX 문법을 사용한다해도, 브라우저는 애초에 JSX를 이해하지 못하기 때문에 컴파일 변환은 일어난다.

그렇다면 .jsx로 확장자를 지정해주는 이유는 뭘까?

     1) 가독성: JSX가 들어있다는 걸 파일 이름만 보고 바로 알 수 있다.

     2) 협업: 다른 개발자에게 "이 파일은 리액트 컴포넌트입니다"라는 신호를 준다.

     3) 에디터 지원: .jsx 파일은 대부분의 에디터가 JSX 문법 강조를 더 잘 지원한다.

     => 즉, 기술적으로 꼭 .jsx를 써야 하진 않지만, 명확한 의도를 전달하는 좋은 습관이 될 수 있다!

그렇다면 컴파일 변환은 어떻게 일어나는 걸까?

JSX의 컴파일 흐름

1) JSX 코드 작성

const element = <h1>Hello</h1>;

2) Babel이 JSX 코드를 자바스크립트로 변환

const element = React.createElement("h1", null, "Hello");

3) 변환된 코드는 브라우저에서 실행 가능!

무엇이 컴파일을 해주는 걸까?

[Babel (JS 변환기)]
  - JSX → JavaScript
  - ES6+ → ES5
  - TypeScript → JavaScript

[Webpack (번들러)]
  - 여러 JS 파일들을 하나로 묶고 Babel을 연동해서 변환 과정을 처리하게 함

그렇다면 실제 개발 흐름은 다음과 같다.

[개발 흐름 🔍]
1. 소스 코드 작성 (.jsx, .ts, 최신 문법)
2. Babel이 변환 (JSX → 일반 JS)
3. Webpack이 번들링 (여러 파일 → 하나의 main.js)
4. 브라우저는 변환된 JS만 실행

.js 와 .jsx 차이점 요약