JavaScript: 시작

Source: Dev.to

JavaScript

1995년, 브렌던 아이크(Brendan Eich)라는 프로그래머가 넷스케이프(Netscape)에서 일하고 있었습니다. 그 당시 웹사이트는 대부분 정적이었으며—정보를 표시할 수는 있었지만 사용자와 실제로 상호작용하지는 못했습니다.

넷스케이프는 웹 페이지를 더 동적이고 매력적으로 만들고 싶어 했습니다. 브렌던 아이크에게 부여된 과제는 브라우저 안에서 실행되는 스크립트 언어를 만드는 것이었습니다. 놀랍게도 그는 단 10일 만에 JavaScript의 첫 번째 버전을 만들었습니다.

JavaScript란?

JavaScript는 웹사이트를 인터랙티브하고 동적으로 만들기 위해 사용되는 프로그래밍 언어입니다. 웹 페이지에서 일어나는 일을 제어합니다. 예를 들어, JavaScript를 사용하면 다음과 같은 작업이 가능합니다:

• 사용자가 버튼을 클릭했을 때 반응하기
• 폼이 올바르게 작성됐는지 확인하기(폼 검증)
• 애니메이션과 슬라이더 표시하기
• 페이지를 새로 고치지 않고 내용 업데이트하기

JavaScript가 없으면 웹사이트는 정적이고 반응이 느린 느낌을 줄 것입니다.

흐름도: 브라우저에서 JavaScript가 실행되는 과정

Browser loads HTML
        ↓
Browser sees <script> tag
        ↓
Browser sends code to JavaScript Engine
        ↓
Engine executes the code
        ↓
Result appears on screen

JavaScript 변수

JavaScript에서 변수는 데이터를 저장하기 위해 이름이 붙은 컨테이너입니다. 정보를 나중에 프로그램에서 사용할 수 있도록 보관하는 라벨이 붙은 상자라고 생각하면 됩니다.

값을 코드에 여러 번 반복해서 쓰는 대신, 변수를 만들어 그 안에 값을 저장하고 이름으로 참조합니다. 이렇게 하면 코드가 더 깔끔하고 읽기 쉬우며 유지보수가 간편해집니다.

let userName = "John";

위 예시에서 userName이 변수이며, 값 "John"을 저장하고 있습니다. 프로그램에서 userName을 사용할 때마다 JavaScript는 저장된 값을 사용합니다.

변수를 사용하는 이유

• 값(숫자, 텍스트, 객체 등) 저장
• 데이터 재사용
• 프로그램 실행 중 값 업데이트

JavaScript에서 변수를 선언하는 방법

JavaScript는 변수를 선언하는 세 가지 방법을 제공합니다:

• let
• const
• var

let이란?

let은 변수를 선언할 때 사용하는 키워드입니다. ES6(2015)에서 도입되었으며, 값이 나중에 변경될 수 있을 때 권장되는 선언 방식입니다.

let과 const

let과 const는 모두 선언된 블록 { } 내부에서만 존재합니다.

let 예시

if (true) {
  let name = "John";
}

console.log(name); // ❌ ReferenceError: name is not defined

Scope와 Reassignment

• Scope(범위) → 변수를 사용할 수 있는 위치
• Reassignment(재할당) → 값을 변경할 수 있는지 여부

let은 재할당이 가능하지만, const는 재할당이 불가능합니다.

const란?

const는 상수 변수를 만들 때 사용합니다—값이 한 번 정해지면 변경할 수 없는 변수입니다.

const 예시

if (true) {
  const age = 25;
}

console.log(age); // ❌ ReferenceError: age is not defined

var란?

var는 JavaScript에서 변수를 선언하는 원래 방식입니다. 초기 버전(ES5 및 이전)부터 존재했지만, 현대 코드에서는 주로 let과 const로 대체됩니다.

var 변수는 선언된 블록이 아니라 해당 함수 전체에 속합니다. 값은 언제든지 변경할 수 있습니다.