JavaScript Syntax: 기초부터 이해하기 - 좋은공간 좋은집

JavaScript는 웹 개발에서 가장 중요한 프로그래밍 언어 중 하나로, 웹 페이지에 동적인 기능을 부여하는 데 사용됩니다. JavaScript를 효과적으로 사용하기 위해서는 기본적인 문법(Syntax)을 이해하는 것이 매우 중요합니다. 오늘은 JavaScript의 기본 문법을 알아보며, 이를 통해 간단한 코드 작성법을 배우고자 합니다.

1. JavaScript 문법 기초

변수 선언

JavaScript에서 변수를 선언할 때는 var, let, const 키워드를 사용합니다. 각 키워드의 사용 방식과 특징이 조금씩 다르기 때문에 상황에 따라 적절한 키워드를 선택하는 것이 중요합니다.

• var: 함수 스코프를 가지며, 재선언이 가능합니다. 하지만 현재는 var보다는 let과 const의 사용이 권장됩니다.
• let: 블록 스코프를 가지며, 재할당이 가능합니다.
• const: 블록 스코프를 가지며, 선언과 동시에 초기화해야 하며, 재할당이 불가능합니다.

var name = "John";    // 함수 스코프, 재선언 가능
let age = 30;         // 블록 스코프, 재할당 가능
const birthYear = 1993; // 블록 스코프, 재할당 불가

데이터 타입

JavaScript의 기본 데이터 타입에는 크게 7가지가 있습니다.

• String: 문자열. 예: "Hello, World!"
• Number: 숫자. 정수 및 부동 소수점을 포함합니다. 예: 42, 3.14
• Boolean: 참 또는 거짓. 예: true, false
• Undefined: 값이 정의되지 않은 상태. 예: let x;에서 x는 undefined입니다.
• Null: 값이 없음을 나타내는 특수한 키워드. 예: let y = null;
• Object: 키-값 쌍의 집합을 가지는 객체. 예: { name: "John", age: 30 }
• Symbol: 고유하고 변경 불가능한 데이터 타입으로 객체의 고유 속성 키를 만들 때 사용됩니다.

let message = "Hello"; // String
let number = 100;      // Number
let isValid = true;    // Boolean
let x;                 // Undefined
let y = null;          // Null
let person = { name: "John", age: 30 }; // Object
let sym = Symbol("id"); // Symbol

연산자

JavaScript에서는 다양한 연산자가 있습니다. 연산자는 값을 계산하거나 조작할 때 사용됩니다.

• 산술 연산자: +, -, *, /, % 등
• 비교 연산자: ==, ===, !=, !==, >, <, >=, <= 등
• 논리 연산자: &&, ||, !
• 할당 연산자: =, +=, -=, *=, /=

let a = 5;
let b = 10;

let sum = a + b;       // 15
let isEqual = a === b; // false
let isValid = (a > 0) && (b > 0); // true

2. 조건문과 반복문

조건문

조건문은 프로그램의 흐름을 제어하는 데 사용됩니다. 가장 기본적인 조건문은 if와 else입니다.

let score = 85;

if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else {
    console.log("C");
}

반복문

반복문은 특정 코드를 여러 번 실행할 때 사용됩니다. JavaScript에서 가장 자주 사용하는 반복문은 for, while입니다.

// for loop
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while loop
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

3. 함수

함수는 특정 작업을 수행하는 코드를 묶어놓은 것입니다. JavaScript에서 함수를 정의하는 방법은 다음과 같습니다.

함수 선언

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Alice")); // "Hello, Alice!"

함수 표현식

함수 표현식은 함수를 변수에 할당하는 방식으로, 익명 함수(이름이 없는 함수)나 이름이 있는 함수 모두 가능합니다.

const greet = function(name) {
    return "Hello, " + name + "!";
};

console.log(greet("Bob")); // "Hello, Bob!"

화살표 함수

ES6부터 추가된 화살표 함수는 간결한 문법으로 함수를 정의할 수 있습니다.

const greet = (name) => "Hello, " + name + "!";

console.log(greet("Charlie")); // "Hello, Charlie!"

4. 객체와 배열

객체

객체는 여러 개의 속성(키-값 쌍)을 가질 수 있는 데이터 타입입니다.

let person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log("Hello!");
    }
};

console.log(person.name); // "John"
person.greet();           // "Hello!"

배열

배열은 여러 개의 값을 순차적으로 저장하는 데이터 타입입니다.

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]);  // "Apple"
fruits.push("Orange");   // 배열에 "Orange" 추가
console.log(fruits.length); // 배열의 길이 출력

5. 스코프와 클로저

스코프

스코프는 변수의 유효 범위를 의미합니다. JavaScript에는 전역 스코프와 지역 스코프가 있습니다.

let globalVar = "I'm global";

function test() {
    let localVar = "I'm local";
    console.log(globalVar); // "I'm global"
    console.log(localVar);  // "I'm local"
}

test();
console.log(localVar); // Error: localVar is not defined

클로저

클로저는 함수가 외부 함수의 변수에 접근할 수 있는 기능을 말합니다.

function outer() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

결론

JavaScript의 문법을 이해하는 것은 웹 개발에 있어서 필수적인 첫걸음입니다. 이번 글에서는 JavaScript의 기초 문법을 살펴보았는데요, 변수를 선언하고, 데이터를 다루고, 조건문과 반복문을 사용해 프로그램의 흐름을 제어하는 방법까지 다뤄보았습니다. 이 기본 문법을 확실히 이해하고 나면 더 복잡한 JavaScript 기능을 배우는 데 큰 도움이 될 것입니다. JavaScript를 시작하는 모든 분들에게 이 글이 도움이 되길 바랍니다.