자바스크립트 문법

1. 문법의 의미

프로그래밍 언어에서 문법(syntax)은 프로그램을 어떤 규칙에 따라 작성하여야 하는지를 정한 약속이다. 자바스크립트(JavaScript)도 정해진 문법에 맞게 작성하여야 브라우저가 코드를 올바르게 해석하고 실행할 수 있다.

다음 코드는 자바스크립트 문법의 기본 형태를 보여준다. 변수(variable)를 만들고, 값을 저장하고, 계산 결과를 새로운 변수에 넣는 구조이다.

let x = 5;
let y = 6;
let z = x + y;

위 코드의 의미는 다음과 같다.

x라는 변수에 숫자 5를 저장한다.
y라는 변수에 숫자 6을 저장한다.
x + y의 계산 결과를 z라는 변수에 저장한다.

따라서 z의 값은 11이 된다.

---

2. 자바스크립트 값

자바스크립트에서 사용하는 값(value)은 크게 두 가지로 나눌 수 있다.

• 첫째는 리터럴(literal)이다.
  리터럴은 코드에 직접 적은 고정된 값이다.
• 둘째는 변수(variable)이다.
  변수는 값을 저장하는 이름이 있는 공간이다.

10
"Hello"
let name = "Hong";

 

위 코드에서 10과 "Hello"는 리터럴이다.
name은 값을 저장하는 변수이다.

---

3. JavaScript Literals

3.1 숫자 리터럴

숫자(number)는 정수와 소수 형태로 작성할 수 있다.

1001
10.50

 

자바스크립트에서는 숫자를 따옴표 없이 작성한다.

let price = 1000;
let rate = 0.15;

 

위 코드에서 price에는 숫자 1000이 저장되고, rate에는 숫자 0.15가 저장된다.

3.2 문자열 리터럴

문자열(string)은 글자 데이터를 의미한다. 문자열은 큰따옴표(" ") 또는 작은따옴표(' ') 안에 작성한다.

"John Doe"
'John Doe'

두 방식 모두 문자열을 표현할 수 있다.

let userName = "홍길동";
let message = '안녕하세요.';

 

문자열은 숫자와 달리 따옴표 안에 작성하여야 한다. 따옴표가 없으면 자바스크립트는 글자를 변수 이름이나 키워드로 해석하려고 한다.

---

4. 키워드

키워드(keyword)는 자바스크립트에서 특별한 의미를 가진 예약된 단어이다. let과 const는 변수를 만들 때 사용하는 대표적인 키워드이다.

let x = 5;
const fname = "John";

 

• let은 값을 변경할 수 있는 변수를 만들 때 사용한다.
• const는 값을 다시 바꾸지 않을 변수를 만들 때 사용한다.

let score = 0;
score = 10;

const title = "JavaScript";

 

위 코드에서 score는 처음에 0이었다가 나중에 10으로 변경된다.
title은 const로 선언하였기 때문에 다시 다른 값으로 바꾸면 오류가 발생한다.

자바스크립트의 키워드는 대소문자를 구분한다. let은 키워드이지만, LET이나 Let은 let과 같지 않다.

let x = 10;   // 올바른 작성
LET y = 20;   // 올바르지 않은 작성
Let z = 30;   // 올바르지 않은 작성

---

5. 변수( variable )

변수(variable)는 데이터를 저장하는 공간이다. 변수에는 숫자, 문자열, 계산 결과 등 다양한 값을 저장할 수 있다.

let x;
x = 6;

 

위 코드는 두 단계로 나누어 볼 수 있다. 먼저 let x;는 x라는 변수를 만든다. 다음으로 x = 6;은 변수 x에 숫자 6을 저장한다.

변수를 만들면서 바로 값을 저장할 수도 있다.

let x = 6;
let name = "홍길동";
let score = 90;

변수는 프로그램 안에서 값을 기억하고 다시 사용할 수 있게 해 준다.

let price = 10000;
let count = 3;
let total = price * count;

console.log(total);

 

위 코드에서 total은 price * count의 계산 결과를 저장한다.
따라서 콘솔에는 30000이 출력된다.

---

6. 식별자

식별자(identifier)는 변수에 붙이는 이름이다. 변수 이름, 함수 이름, 객체 이름 등에 사용된다. 식별자를 만들 때는 정해진 규칙을 따라야 한다.

자바스크립트 식별자 규칙은 다음과 같다.

• 첫째, 문자, 밑줄(_), 달러 기호($)로 시작할 수 있다.
• 둘째, 첫 글자 뒤에는 숫자를 포함할 수 있다.
• 셋째, let, const, if와 같은 예약어를 식별자로 사용할 수 없다.
• 넷째, 대소문자를 구분한다.

올바른 변수 이름의 예는 다음과 같다.

let name;
let userName;
let _count;
let $price;
let score1;

 

올바르지 않은 변수 이름의 예는 다음과 같다.

let 1score;      // 숫자로 시작
let user-name;   // 하이픈 사용
let let;         // 예약어 사용

 

하이픈(-)은 변수 이름에 사용할 수 없다. 자바스크립트에서 하이픈은 뺄셈 연산자로 사용되기 때문이다.

let firstName = "길동";
let lastName = "홍";

 

위 코드처럼 여러 단어를 연결할 때는 보통 카멜 표기법(camel case)을 사용한다.

---

7. 연산자

연산자(operator)는 값을 계산하거나 변수에 값을 저장할 때 사용하는 기호이다.

7.1 대입 연산자

대입 연산자(assignment operator) =는 오른쪽 값을 왼쪽 변수에 저장한다.

let x = 5;
let y = 6;
let sum = x + y;

 

위 코드에서 x에는 5, y에는 6이 저장된다.
sum에는 x + y의 결과인 11이 저장된다.

여기서 =는 수학에서 말하는 “같다”의 의미가 아니라, 오른쪽 값을 왼쪽에 저장한다는 의미이다.

7.2 산술 연산자

산술 연산자(arithmetic operator)는 숫자를 계산할 때 사용한다. 대표적인 산술 연산자는 +, -, *, /이다.

5 + 10
10 - 3
5 * 10
20 / 4

 

각 연산의 결과는 다음과 같다.

15
7
50
5

 

변수와 함께 사용할 수도 있다.

let a = 10;
let b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

 

 

---

8. 표현식

표현식(expression)은 값, 변수, 연산자를 조합하여 하나의 결과값을 만들어 내는 코드이다.

(5 + 6) * 10

 

위 표현식은 먼저 괄호 안의 5 + 6을 계산한다. 그 결과 11에 10을 곱하므로 최종 결과는 110이다.

변수를 포함한 표현식도 만들 수 있다.

let x = 5;

x * 10

 

x의 값이 5라면 x * 10의 결과는 50이다. 

• 문자열도 표현식에 사용할 수 있다. + 연산자는 숫자에서는 더하기를 의미하지만, 문자열에서는 문자열을 이어 붙이는 역할을 한다.

"John" + " " + "Doe"

실행 결과는 다음과 같다.

John Doe

 

• 한글 문자열도 같은 방식으로 연결할 수 있다.

let lastName = "홍";
let firstName = "길동";

console.log(lastName + firstName);

 

실행 결과는 다음과 같다.

홍길동

 

---

 

9. 대소문자 구분

자바스크립트는 대소문자를 구분한다. 따라서 lastName과 lastname은 서로 다른 변수이다.

let lastName = "Doe";
let lastname = "Peterson";

 

위 코드에서 lastName과 lastname은 다른 변수로 처리된다.
중간의 대문자 N 하나만 달라도 다른 이름이 된다.

• 다음 예제를 살펴보자.

let userName = "홍길동";
let username = "김철수";

console.log(userName);
console.log(username);

 

실행 결과는 다음과 같다.

홍길동
김철수

 

userName과 username은 서로 다른 변수이다. 변수 이름을 작성할 때 대소문자를 일관되게 사용하는 습관이 필요하다.

---

10. 카멜 표기법

여러 단어를 하나의 변수 이름으로 만들 때는 표기법을 정하여 작성한다. 자바스크립트에서는 보통 소문자 카멜 표기법(lower camel case)을 많이 사용한다.

카멜 표기법은 첫 단어는 소문자로 시작하고, 두 번째 단어부터 첫 글자를 대문자로 쓰는 방식이다.

let firstName = "길동";
let lastName = "홍";
let userAge = 20;
let totalPrice = 30000;

 

하이픈 방식은 자바스크립트 변수 이름에 사용할 수 없다.

let first-name = "길동";  // 올바르지 않음

 

밑줄 방식은 사용할 수 있다.

let first_name = "길동";
let last_name = "홍";

 

파스칼 표기법(Pascal case)은 각 단어의 첫 글자를 대문자로 쓰는 방식이다.

let FirstName = "길동";
let LastName = "홍";

 

기본 변수 이름에는 보통 firstName, lastName, totalPrice와 같은 소문자 카멜 표기법을 사용한다.

---

11. 종합 예제

다음 예제는 자바스크립트 문법의 기본 요소를 함께 사용한 코드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Syntax</title>
</head>
<body>
  <h1>JavaScript Syntax</h1>
  <p id="result"></p>

  <script>
    let price = 10000;
    let count = 3;
    let totalPrice = price * count;

    document.getElementById("result").innerHTML =
      "총 금액은 " + totalPrice + "원입니다.";
  </script>
</body>
</html>

 

위 코드의 흐름은 다음과 같다.

• price 변수에 상품 가격 10000을 저장한다.
• count 변수에 수량 3을 저장한다.
• totalPrice 변수에 price * count의 계산 결과를 저장한다
• innerHTML을 사용하여 계산 결과를 웹페이지에 출력한다.

실행 결과는 다음과 같다.

총 금액은 30000원입니다.

---

12. 핵심 정리

자바스크립트 문법은 프로그램을 작성하는 기본 규칙이다. 문법을 이해하면 변수 선언, 값 저장, 계산, 문자열 연결, 화면 출력과 같은 기본 동작을 정확하게 작성할 수 있다.

자바스크립트의 값은 리터럴과 변수로 나눌 수 있다. 숫자는 따옴표 없이 작성하고, 문자열은 큰따옴표나 작은따옴표 안에 작성한다. let과 const는 변수를 만들 때 사용하는 키워드이다. 변수 이름은 문자, _, $로 시작할 수 있고, 숫자는 첫 글자로 사용할 수 없다. 자바스크립트는 대소문자를 구분하므로 userName과 username은 서로 다른 변수이다.

연산자는 값을 계산하거나 변수에 값을 저장할 때 사용한다. 표현식은 값, 변수, 연산자가 결합되어 하나의 결과값을 만들어 내는 코드이다. 여러 단어로 변수 이름을 만들 때는 totalPrice, userName, firstName처럼 소문자 카멜 표기법을 주로 사용한다.