자바스크립트 문법 완벽 가이드: 초보자를 위한 필수 입문서

자바스크립트(JavaScript)를 처음 배우고 계신가요? 그렇다면 잘 찾아오셨습니다.

모든 프로그래밍 언어에는 영어와 마찬가지로 고유한 규칙이 있습니다. 어릴 때 학교에서 문장을 올바르게 구성하기 위해 문법을 배웠던 것을 떠올려 보세요.

프로그래밍 언어도 마찬가지입니다. 모두가 같은 규칙을 따라야 서로의 코드를 이해하고 소통할 수 있습니다. 만약 영어를 사용할 때마다 각자 마음대로 새로운 규칙을 만든다면 아무도 대화할 수 없겠죠. 프로그래밍 언어가 규칙에 엄격한 이유도 바로 여기에 있습니다. 정해진 문법대로 작성해야 컴퓨터가 코드를 실행할 수 있기 때문입니다.

이 가이드에서는 자바스크립트 문법(syntax)에 대해 알아보겠습니다. 문법이란 자바스크립트에서 코드를 어떻게 작성해야 하는지 정의하는 규칙의 집합을 의미합니다.

문법은 왜 중요할까요?

자바스크립트에는 반드시 지켜야 하는 문법 규칙들이 있습니다. 예를 들어 괄호를 열었다면 반드시 닫아야 합니다. 그렇지 않으면 에러가 반환됩니다. 컴퓨터는 무엇을 해야 하는지 이해하지 못하면 프로그램 실행을 계속 진행할 수 없기 때문입니다.

여기서 컴퓨터와 사람의 중요한 차이점을 짚고 넘어갈 필요가 있습니다. 사람은 가끔 발생하는 사소한 오류는 넘어가며 이해할 수 있지만, 컴퓨터는 프로그래밍 언어로 작성된 코드를 실행할 때 그렇게 하지 못합니다. 그래서 작업 중인 프로그래밍 언어의 문법에 맞춰 코드를 작성하는 것이 중요합니다.

또한 문법은 코드의 가독성을 높여 줍니다. 모두가 같은 문법을 사용하면 다른 사람의 프로그램도 쉽게 해석할 수 있습니다. 영어와 마찬가지로 기본 규칙만 익히면 어떤 코드든 읽을 수 있게 됩니다.

이번 가이드에서 다룰 주요 문법 요소는 다음과 같습니다:

• 공백(Whitespace)
• 변수 이름 짓기
• 들여쓰기
• 주석
• 세미콜론

그럼 시작해 보겠습니다!

공백(Whitespace)

공백 처리는 개발자들 사이에서 늘 논쟁이 되는 주제입니다. 논쟁은 잠시 접어두고, 자바스크립트 문법에서 기억해야 할 핵심 규칙 하나만 짚고 넘어가겠습니다. 변수 사이, 그리고 괄호 앞뒤에는 공백을 두어야 합니다.

예를 들어 for 반복문을 작성한다고 해볼까요?

for (var i = 0; i < 4; i++) {
	console.log(i);
}

이 반복문은 0부터 4 미만까지의 숫자를 콘솔에 출력합니다. for 키워드와 여는 괄호 사이에 공백이 있는 것을 볼 수 있습니다. 닫는 괄호())와 여는 중괄호({) 사이에도 공백이 있고, 괄호 안의 모든 문장 사이에도 공백이 들어갑니다:

• var i = 0;
• i < 4;

for 반복문 밖에서 변수를 선언할 때도 같은 방식을 적용합니다:

var cookie = "라즈베리 초콜릿 칩";

변수 사이에 공백을 두면 코드를 훨씬 읽기 쉬워집니다.

들여쓰기

다른 프로그래밍 언어와 달리, 자바스크립트는 전체 프로그램을 한 줄에 작성할 수도 있습니다. 물론 그렇게 하면 코드를 읽기가 매우 어려워지기 때문에 좋은 방법은 아니지만, 기술적으로는 가능합니다.

if 조건문이나 클래스처럼 코드 블록 안에 포함된 모든 문장은 들여쓰기를 해야 합니다. 들여쓰기란 코드 앞부분에 공백 두 칸, 네 칸 또는 탭 하나를 추가하는 것을 말합니다. 어떤 방식이 가장 좋은지에 대해 개발자들 사이에서 많은 논쟁이 있지만, 코드 전체에서 일관성만 유지하면 문제될 것은 없습니다.

들여쓰기를 적용한 for 반복문 예시입니다:

for (var i = 0; i < 4; i++) {
	console.log(i);
}

console.log()가 탭 하나로 들여쓰기 된 것을 볼 수 있습니다. 중괄호 안에 포함되어 있기 때문입니다. 이렇게 하면 for 반복문의 내용과 나머지 코드를 쉽게 구분할 수 있습니다. 만약 코드에 if 문 같은 다른 코드 블록이 있다면, 그 내용은 한 단계 더 들여쓰기 합니다:

for (var i = 0; i < 4; i++) {
	if (i === 3) {
		console.log(i);
	}
}

이 코드는 i가 3일 때 i의 값을 출력하고, 그 외에는 아무 일도 일어나지 않습니다. 이 예제에서 if 문은 for 반복문 안에 있으므로 탭 하나만큼 들여쓰기 되었고, console.log() 문은 if 문 안에, 다시 그 if 문이 for 문 안에 포함되어 있으므로 탭 두 개만큼 들여쓰기 되었습니다.

주석

주석은 개발자가 개발자를 위해 작성하는 문장입니다. 자바스크립트가 기술적으로는 읽지만 실제로 실행되지는 않습니다.

주석의 목적은 개발자가 자신의 코드를 관리하는 데 도움을 주는 것입니다. 복잡한 함수를 구현할 때 몇 가지 주석을 남겨두면 함수의 각 부분이 어떤 역할을 하는지 나중에 쉽게 파악할 수 있습니다. 협업 프로젝트에서도 주석이 자주 활용됩니다. 직접 작성하지 않은 개발자도 프로그램을 이해할 수 있게 해주기 때문입니다.

자바스크립트에서 주석은 슬래시 두 개(//) 뒤에 주석 내용을 붙여 작성합니다:

// 자바스크립트가 건너뛰는 주석입니다!

슬래시 두 개 뒤에 오는 모든 문자는 주석으로 처리됩니다. 여러 줄에 걸친 주석을 작성하려면 다음 문법을 사용하세요:

/* 여러 줄에 걸쳐
작성되는 주석입니다. */

/*와 */ 사이의 모든 텍스트는 자바스크립트 컴파일러가 무시합니다.

변수 이름 짓기

변수 이름을 지정하는 방법은 다양합니다. 가장 널리 쓰이는 세 가지 방식은 파스칼 케이스(upper camel case), 카멜 케이스(lower camel case), 스네이크 케이스(underscores)입니다.

자바스크립트에서는 대부분의 개발자가 카멜 케이스(lower camel case)로 변수 이름을 짓는 것을 선호합니다:

firstName, surname, isAdmin

자바스크립트에서 변수를 선언하는 방식은 다음과 같습니다:

var firstName = "Tony";

사용하는 변수 타입(여기서는 var) 뒤에 변수 이름이 오고, 등호(=), 그리고 변수에 저장할 값이 순서대로 위치합니다.

변수 이름의 첫 단어는 단어가 하나뿐이라 하더라도 항상 소문자로 시작해야 합니다. 두 번째 단어부터는 위 예시처럼 대문자로 시작합니다.

물론 스네이크 케이스("first_name")나 파스칼 케이스("FirstName") 같은 다른 방식으로 변수를 작성할 수도 있지만, 자바스크립트에서는 흔하게 사용되지 않습니다.

자바스크립트의 변수는 대소문자를 구분합니다. 즉, firstName과 firstname은 같은 문자로 이루어져 있어도 서로 다른 변수로 취급됩니다.

그리고 "예약어(reserved words)"라고 불리는 특별한 단어들은 변수 이름으로 사용할 수 없습니다. 이 단어들은 자바스크립트에서 특별한 기능을 수행합니다. 예를 들어 "class"나 "for"는 이미 언어에서 사용 중이므로 변수 이름으로 지을 수 없습니다.

예약된 자바스크립트 키워드의 전체 목록은 Mozilla Developer Network(MDN)에서 확인할 수 있습니다.

세미콜론

영어의 모든 문장이 마침표로 끝나듯, 자바스크립트에도 문장을 구분하는 방법이 필요합니다. 마침표는 한 문장을 멈추고 다음 문장을 시작할 때를 알려줍니다. 어린 시절 문장이란 잠시 숨을 고르는 자리라고 배웠던 기억이 나시나요?

컴퓨터 프로그램은 숨을 쉴 필요는 없지만, 프로그램 안에서 문장이 어떻게 나뉘는지는 알아야 합니다. 자바스크립트에서는 대부분의 문장이 세미콜론(;)으로 끝납니다:

var cookie = "초콜릿 퍼지";

단, 블록 문장(block statement) 뒤에는 세미콜론을 붙일 필요가 없습니다. class, switch, do, if, for 같은 문장들이 여기에 해당하며, 이들은 중괄호를 사용해 코드를 감쌉니다:

function addNumbers(one, two) {
	return one + two;
}

이 코드에서 return 문은 세미콜론으로 끝납니다. 함수 내부에 있기 때문입니다. 반면 함수 자체는 세미콜론으로 끝나지 않습니다.

마무리

자바스크립트 프로그래밍 언어에는 수많은 규칙이 있습니다. 이 규칙들은 여러분과 브라우저가 모두 코드를 읽을 수 있도록 보장해 줍니다. 팀 단위로 작업할 때는 특히 자바스크립트 문법 규칙을 지키는 것이 중요합니다.

이번 가이드에서 다룬 핵심 규칙을 정리하면 다음과 같습니다:

• 변수 선언문의 모든 문장과 "for", "if" 같은 키워드 뒤의 문장은 공백으로 구분해야 합니다.
• 코드 블록("if", "else" 등) 안에 포함된 문장은 들여쓰기를 해야 합니다.
• 변수 이름은 카멜 케이스(lower camel case)를 사용하고, 예약 키워드와 같아서는 안 됩니다.
• 블록 문장을 제외한 모든 문장은 세미콜론으로 끝내야 합니다.
• //는 한 줄 주석을, /* */는 여러 줄 주석을 작성할 때 사용합니다.

이제 여러분도 프로 개발자처럼 자바스크립트 코딩을 시작할 준비가 되었습니다!