JavaScript 기초: 변수와 문법 규칙

변수란 무엇인가요?

변수는 이름이 붙은 데이터 저장 공간입니다. 마치 이름표가 붙은 상자에 물건을 보관하듯이, 변수에 값을 저장해 두었다가 필요할 때마다 꺼내 쓸 수 있습니다.

변수가 왜 필요할까요?

같은 내용을 여러 번 사용해야 할 때를 생각해 보세요.

alert("Hi, I'm Max!");

이렇게 복사-붙여넣기로 작성하면 두 가지 문제가 있습니다:

같은 코드를 반복해서 작성해야 합니다
내용을 수정하려면 모든 곳을 일일이 찾아서 고쳐야 합니다

변수를 사용하면 이 문제가 해결됩니다!

변수 만들고 사용하기

1. 변수 선언하기

let greetingText = "Hi, I'm Max!";

let: 변수를 만들라고 브라우저에게 알려주는 키워드입니다
greetingText: 변수의 이름입니다 (원하는 대로 정할 수 있습니다)
=: 값을 저장하는 기호입니다
"Hi, I'm Max!": 변수에 저장할 값입니다

2. 변수 사용하기

let greetingText = "Hi, I'm Max!";

alert(greetingText); // "Hi, I'm Max!" 출력

alert(greetingText); // 또 "Hi, I'm Max!" 출력

이제 내용을 바꾸고 싶으면 변수 선언 부분 한 곳만 수정하면 됩니다!

3. 변수 값 바꾸기

let greetingText = "Hi, I'm Max!";

alert(greetingText); // "Hi, I'm Max!"

greetingText = "This works!"; // let 없이 새 값 할당

alert(greetingText); // "This works!"

주의: 이미 만든 변수의 값을 바꿀 때는 let을 다시 쓰지 않습니다!

중요한 문법 규칙

변수 이름 짓기 규칙 (Rules - 반드시 지켜야 함)

✅ 가능한 것:

한 단어로 작성: userName, totalPrice
밑줄 사용 가능: user_name
숫자 포함 가능 (단, 첫 글자는 안 됨): user1, data2

❌ 불가능한 것:

공백 사용: user name (X)
특수문자 사용: user-name, user@name (X)
숫자로 시작: 1user (X)

변수 이름 짓기 관례 (Convention - 권장 사항)

자바스크립트에서는 **camelCase(카멜 케이스)**를 주로 사용합니다:

let greetingText = "안녕하세요"; // ✅ 권장

let GreetingText = "안녕하세요"; // ⚠️ 작동은 하지만 관례에 어긋남

let greeting_text = "안녕하세요"; // ⚠️ 작동은 하지만 자바스크립트 스타일 아님

camelCase: 첫 단어는 소문자로 시작하고, 이어지는 단어의 첫 글자는 대문자로 작성합니다.

세미콜론(;) 사용하기

세미콜론은 선택 사항입니다

let name = "Max" // 세미콜론 없어도 작동함

let name = "Max"; // 세미콜론 있어도 작동함

하지만 많은 개발자가 세미콜론을 사용하는 이유는

명령어의 끝을 명확히 표시할 수 있습니다
한 줄에 여러 명령을 쓸 때 필수입니다

let a = 1; let b = 2; let c = 3; // 세미콜론 필요

다른 프로그래밍 언어와의 일관성을 유지합니다

중요한 원칙: 일관성

어떤 스타일을 선택하든, 한 가지 방식을 끝까지 유지하세요:

세미콜론을 쓰기로 했으면 모든 줄에 씁니다
안 쓰기로 했으면 전혀 쓰지 않습니다
절대 섞어 쓰지 마세요!

따옴표도 마찬가지입니다:

let text1 = "안녕하세요"; // 큰따옴표 사용

let text2 = '반갑습니다'; // 작은따옴표 사용

// 둘 다 작동하지만, 하나를 선택해서 일관되게 사용하세요!

코드 실행 순서

자바스크립트는 위에서 아래로, 한 줄씩 실행됩니다:

let greetingText = "Hi, I'm Max!"; // 1. 변수 생성 및 값 저장

alert(greetingText); // 2. "Hi, I'm Max!" 출력

greetingText = "This works!"; // 3. 변수 값 변경

alert(greetingText); // 4. "This works!" 출력

alert(32); // 5. 32 출력

이 순서대로 화면에 표시됩니다!

핵심 정리:

변수는 값을 저장하는 이름 붙은 저장 공간입니다
let 키워드로 변수를 만들고, =로 값을 저장합니다
변수 이름은 camelCase로 작성하고, 공백과 특수문자를 피합니다
세미콜론 사용 여부를 정하고 일관되게 유지합니다
코드는 위에서 아래로 순차적으로 실행됩니다