자바스크립트 - 문법: 초보자 가이드

안녕하세요, 미래의 자바스크립트 마법사 여러분! 이 흥미로운 여정에서 여러분의 안내자로서 기쁜 마음으로 인사드립니다. 프로그래밍을 가르쳐온 지 오래된 저로서는, 문법을 마스터하는 것은 시를 쓰기 전에 알파벳을 배우는 것과 같다고 말씀드릴 수 있습니다. 기본적인 것처럼 보일 수 있지만, 우리가 함께 만들어갈 모든 것의 기초입니다. 그麼, 시작해보겠습니다!

자바스크립트 문법: 코드의 기본 블록

자바스크립트 문법은 자바스크립트 프로그램이 어떻게 구성되는지 정의하는 규칙들의 집합입니다. 이를 자바스크립트 언어의 문법이라고 생각할 수 있습니다. 우리가 말을 할 때 이해를 돕기 위해 문법 규칙을 따르는 것처럼, 코드를 컴퓨터가 이해할 수 있게 하기 위해 문법 규칙을 따라야 합니다.

첫 자바스크립트 코드

간단한 "Hello, World!" 프로그램으로 시작해보겠습니다. 새로운 언어를 배울 때 흔히 작성하는 첫 번째 프로그램입니다.

console.log("Hello, World!");

이 코드를 실행하면 콘솔에 "Hello, World!"가 출력됩니다. 이를 좀 더 자세히 설명해보겠습니다:

• console은 자바스크립트가 제공하는 객체로, 브라우저의 디버깅 콘솔에 접근할 수 있게 해줍니다.
• .log()은 console 객체의 메서드로, 인자로 전달된 값을 출력합니다.
• "Hello, World!"는 출력하고 싶은 문자열(문자들의 시퀀스)입니다.

자바스크립트 값

자바스크립트에서는 다양한 유형의 값을 다룹니다. 주요 유형은 다음과 같습니다:

1. 숫자: 42, 3.14
2. 문자열: "Hello", 'JavaScript'
3. 불리언: true, false
4. 객체: {name: "John", age: 30}
5. 배열: [1, 2, 3, 4]
6. 함수: function greet() { console.log("Hi!"); }

다양한 유형의 값을 사용하는 예제입니다:

let age = 25;  // 숫자
let name = "Alice";  // 문자열
let isStudent = true;  // 불리언
let person = {name: "Bob", age: 30};  // 객체
let numbers = [1, 2, 3, 4, 5];  // 배열

console.log(age);  // 출력: 25
console.log(name);  // 출력: Alice
console.log(isStudent);  // 출력: true
console.log(person.name);  // 출력: Bob
console.log(numbers[2]);  // 출력: 3

공백과 행 띄우기

자바스크립트는 공백(스페이스, 탭, 줄 바꿈)에 대해 매우寬容합니다. 코드를 더 읽기 쉽게 하기 위해 사용할 수 있지만, 기능에 영향을 미치지 않습니다.

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

// 이와 동일합니다:
let x=5;let y=10;let z=x+y;

// 그리고 이도 가능합니다:
let x = 5
let y = 10
let z = x + y

쉼표는 선택 사항

자바스크립트에서는 문장의 끝에 쉼표를 사용하는 것이 선택 사항입니다. 그러나 일반적으로 쉼표를 포함하는 것이 좋습니다.

let a = 5;  // 쉼표 포함
let b = 10  // 쉼표 미포함

// 둘 다 유효하지만, 쉼표를 포함하는 것이 권장됩니다

대소문자 구분

자바스크립트는 대소문자를 구분합니다. 이는 myVariable, MyVariable, MYVARIABLE이 모두 다른 변수라는 뜻입니다.

let myVariable = "Hello";
let MyVariable = "World";

console.log(myVariable);  // 출력: Hello
console.log(MyVariable);  // 출력: World

자바스크립트와 Camel Case

자바스크립트에서는 변수와 함수 이름을 camel case로 사용하는 것이 관례입니다. 이는 첫 글자를 소문자로 시작하고, 이후 각 단어의 첫 글자를 대문자로 쓰는 것입니다.

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

console.log(fullName);  // 출력: John Doe

자바스크립트 키워드

자바스크립트에는 변수 이름으로 사용할 수 없는 예약어가 있습니다. 이를 키워드라고 합니다. 일반적인 것들 몇 가지를 보겠습니다:

키워드	설명
let	블록 범위의 변수를 선언합니다
const	블록 범위의 불변한 상수를 선언합니다
if	조건에 따라 코드 블록을 실행합니다
for	루프를 실행합니다
function	함수를 선언합니다
return	함수를 종료합니다
true	불리언 참 값
false	불리언 거짓 값

자바스크립트 식별자

식별자는 변수, 함수 또는 프로퍼티에 부여하는 이름입니다. 유효한 식별자에 대한 규칙은 다음과 같습니다:

1. 문자, 숫자, 밑줄, 달러 기호를 포함할 수 있습니다
2. 첫 글자는 문자, 밑줄, 달러 기호로 시작해야 합니다
3. 대소문자를 구분합니다
4. 예약어로 사용할 수 없습니다

// 유효한 식별자
let myVariable = 5;
let _privateVar = 10;
let $specialVar = 15;

// 무效한 식별자
// let 123abc = 20;  // 숫자로 시작할 수 없습니다
// let my-var = 25;  // 하이픈을 사용할 수 없습니다
// let let = 30;     // 예약어를 사용할 수 없습니다

자바스크립트 주석

주석은 코드에 설명을 추가하거나 코드의 특정 부분을 실행하지 않도록 하는 데 사용됩니다. 자바스크립트에는 두 가지 유형의 주석이 있습니다:

// 이는 단일 줄 주석입니다

/*
이는 멀티 라인 주석입니다
*/

let x = 5;  // 줄 끝에 주석을 추가할 수도 있습니다

자바스크립트 연산자

연산자는 변수와 값을 다루는 연산을 수행합니다. 일반적인 연산자 몇 가지를 보겠습니다:

연산자	설명	예제
+	덧셈	5 + 3
-	뺄셈	5 - 3
*	곱셈	5 * 3
/	나눗셈	15 / 3
%	나머지	5 % 2
++	증가	x++
--	감소	x--
==	같다	5 == 5
===	Strict 같다	5 === "5"
!=	다르다	5 != 3
>	크다	5 > 3
<	작다	3 < 5

자바스크립트 표현식

표현식은 값, 변수, 연산자의 조합으로, 값을 평가합니다. 몇 가지 예제를 보겠습니다:

let x = 5;
let y = 3;

console.log(x + y);  // 출력: 8
console.log(x * y);  // 출력: 15
console.log(x > y);  // 출력: true
console.log(x === "5");  // 출력: false

자바스크립트 문자셋

자바스크립트는 유니코드 문자셋을 사용합니다. 이는 다양한 언어와 이모지를 지원합니다. 재미있는 예제를 보겠습니다:

let greeting = "Hello! ?";
let name = "Alice";
console.log(greeting + " " + name);  // 출력: Hello! ? Alice

이제 여러분은 자바스크립트 문법의 기본을 다루게 되었습니다. 연습이 완벽을 만듭니다. 모든 것이 처음에는 이해가 되지 않을 수 있지만, 전혀 문제ありません. 계속 실험하고, 코딩을 하고, 가장 중요한 것은 즐기세요!

다음 강의에서는 변수와 데이터 유형에 대해 더 깊이 다룹니다. 그때까지 행복하게 코딩하세요! ??‍??‍?

Credits: Image by storyset