자바스크립트 기본 문법 완전정복, 변수부터 ES6까지 한 번에 배우기

자바스크립트 기본 문법 완전정복, 변수부터 ES6까지 한 번에 배우기

📌 자바스크립트 초보라면 꼭 알아야 할 핵심 문법 총정리 💡

프로그래밍 입문자라면 한 번쯤은 자바스크립트(JavaScript)라는 언어를 접해보셨을 거예요.
웹 개발을 포함한 다양한 분야에서 활용되는 JS는 그만큼 기본 문법을 제대로 이해하는 것이 매우 중요합니다.
특히 변수 선언 방식, 조건문, 반복문, 함수 등 핵심 구조는 이후 학습에 기반이 되기 때문에 절대 소홀히 넘기면 안 됩니다.
최근에는 ES6 문법이 기본으로 사용되고 있기 때문에, let, const, 화살표 함수(arrow function) 등도 필수 개념으로 자리 잡았죠.

이 글에서는 자바스크립트의 기본 구조부터 ES6 핵심 문법까지 꼭 짚고 넘어가야 할 부분을 알기 쉽게 정리해드릴게요.
처음 접하는 분들도 어렵지 않게 이해할 수 있도록 예시와 설명을 덧붙여 구성했으니, 자바스크립트를 시작하시려는 분들께 도움이 되길 바랍니다.
학습 후에는 JS를 활용한 실습에도 자신감이 생길 거예요!

🔤 자바스크립트란 무엇인가요?

자바스크립트(JavaScript)는 웹 페이지를 동적으로 만들기 위해 사용하는 프로그래밍 언어입니다.
HTML과 CSS가 각각 구조와 디자인을 담당한다면, 자바스크립트는 사용자와 상호작용하는 모든 동작을 제어합니다.
예를 들어 버튼 클릭, 모달 창 열기, 탭 전환, 폼 유효성 검사 등이 자바스크립트를 통해 구현됩니다.

초기에는 브라우저에서만 실행되는 언어였지만, 현재는 Node.js의 등장으로 백엔드 개발에도 활용되고 있습니다.
또한 React, Vue, Angular 같은 프레임워크와 결합하면 모바일 앱, 데스크탑 앱, 서버 개발 등으로 확장성이 매우 높아지죠.

• 💡프론트엔드에서 사용자 인터페이스 제어
• 🌐Node.js를 통한 백엔드 서버 개발 가능
• 📱모바일 앱과 데스크탑 앱 개발에도 확장 활용

요즘처럼 웹과 모바일 중심의 디지털 시대에 자바스크립트는 사실상 프로그래머의 필수 언어라고 할 수 있어요.
배우기 쉬우면서도 다양한 기능을 다룰 수 있어, 입문자와 경력자 모두에게 사랑받는 이유이기도 합니다.

📦 변수 선언 방식 let, const, var

자바스크립트에서 데이터를 저장하려면 변수를 사용해야 합니다.
그리고 이 변수는 var, let, const라는 키워드를 통해 선언합니다.
세 가지 모두 변수 선언에 사용되지만, 동작 방식에는 분명한 차이가 있어요.

🔹 var 키워드

ES6 이전까지 사용된 변수 선언 방식입니다.
동일한 이름의 변수를 중복 선언해도 에러가 발생하지 않으며, 함수 스코프(function scope)를 따릅니다.
하지만 호이스팅(hoisting) 문제와 예기치 못한 재선언 이슈가 발생할 수 있어, 현재는 가급적 사용을 지양합니다.

🆕 let 키워드

ES6에서 새롭게 도입된 변수 선언 방식으로, 블록 스코프(block scope)를 따릅니다.
같은 이름의 변수를 중복 선언할 수 없고, 초기화 전에 접근하려 하면 에러가 발생해 안전한 코드 작성에 유리합니다.
일반적으로 대부분의 변수는 let으로 선언하는 것이 기본이 되었습니다.

🔒 const 키워드

const는 ‘상수(Constant)’의 줄임말로, 한 번 값을 할당하면 변경할 수 없는 변수를 선언할 때 사용합니다.
블록 스코프를 따르며, 재할당이 불가능한 점을 제외하면 let과 거의 동일한 특성을 가집니다.
단, 객체나 배열을 const로 선언할 경우 내부 값은 변경이 가능합니다.

// var
var name = "Mike";
var name = "Jane"; // 재선언 가능

// let
let age = 25;
// let age = 30; // 에러 발생

// const
const PI = 3.14;
// PI = 3.1415; // 에러 발생

이처럼 변수 선언은 단순히 문법의 차이만 있는 것이 아니라, 코드의 안정성과 유지보수성에도 큰 영향을 줍니다.
되도록이면 const → let → var 순으로 사용을 권장합니다.

🔁 조건문과 반복문의 구조

조건문과 반복문은 자바스크립트에서 프로그램의 흐름을 제어하는 핵심 구조입니다.
어떤 상황에서는 실행하고, 어떤 경우엔 건너뛰거나 반복하도록 지정할 수 있어 매우 자주 사용됩니다.

⚖️ 조건문 if / else / else if

if문은 특정 조건이 참일 경우에만 코드를 실행하도록 할 때 사용합니다.
그 외 조건은 else 또는 else if를 활용해 다양한 흐름을 설정할 수 있습니다.

let score = 85;

if (score >= 90) {
    console.log("A등급입니다.");
} else if (score >= 80) {
    console.log("B등급입니다.");
} else {
    console.log("C등급 이하입니다.");
}

🔄 반복문 for / while

반복문은 특정 조건이 충족될 때까지 명령을 여러 번 반복 실행할 수 있게 합니다.
가장 일반적으로 사용하는 구조는 for문과 while문입니다.

// for문 예시
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

// while문 예시
let n = 1;
while (n <= 5) {
    console.log(n);
    n++;
}

조건문과 반복문은 모든 프로그래밍 언어에서 핵심 중의 핵심입니다.
입문 단계에서 익숙해지면, 이후의 로직 구성도 훨씬 수월해질 거예요.

🧩 함수 선언과 호출 방법

자바스크립트에서 함수(function)는 하나 이상의 명령어를 묶어 재사용 가능한 코드 블록으로 만드는 방법입니다.
반복적으로 수행되는 작업을 함수로 작성해두면, 필요할 때마다 호출해서 효율적으로 작업을 수행할 수 있어요.

✍️ 함수 선언 방식

자바스크립트에서는 함수 선언 방식이 여러 가지입니다.
기본 선언식, 함수 표현식, 화살표 함수 등이 있으며, 각각의 방식에는 사용 목적이나 문맥에 따른 차이가 있습니다.

// 함수 선언식
function greet(name) {
    return "안녕하세요, " + name + "님!";
}

// 함수 표현식
const greet2 = function(name) {
    return `반가워요, ${name}님!`;
}

// 화살표 함수 (ES6)
const greet3 = (name) => {
    return `환영합니다, ${name}님!`;
}

📣 함수 호출 방법

정의된 함수는 함수 이름 뒤에 괄호()를 붙여 호출합니다.
괄호 안에는 매개변수(인자값)를 전달할 수 있으며, 함수 내에서 처리된 결과값이 반환됩니다.

let message = greet("지민");
console.log(message); // "안녕하세요, 지민님!"

console.log(greet2("태형")); // "반가워요, 태형님!"
console.log(greet3("정국")); // "환영합니다, 정국님!"

함수는 로직을 분리하고 재사용성을 높이는 데 매우 유용한 구조입니다.
특히 팀 프로젝트나 규모가 큰 프로그램에서는 함수로 코드를 모듈화하는 것이 유지보수에 큰 도움이 됩니다.

🚀 ES6의 주요 문법과 특징

ES6는 자바스크립트의 6번째 버전으로, 2015년에 발표되어 이후 현대 자바스크립트 개발의 표준이 되었습니다.
코드의 가독성과 생산성을 높여주는 기능들이 대거 추가되었으며, 지금까지도 널리 사용되고 있어 반드시 숙지해야 할 문법들입니다.

📌 let, const

기존 var 대신 변수 선언에 let과 const를 사용하는 것이 기본이 되었습니다.
이들은 블록 스코프를 지원하고 재선언을 방지할 수 있어 보다 안정적인 코드 작성이 가능합니다.

➡️ 화살표 함수(Arrow Function)

간결한 문법으로 함수 선언을 대체할 수 있는 방식입니다.
함수 내부에서의 this 바인딩이 기존과 다르게 작동하기 때문에, 콜백 함수나 메서드 안에서 특히 유용합니다.

// 기존 함수 표현
const add = function(a, b) {
    return a + b;
}

// 화살표 함수
const addArrow = (a, b) => a + b;

📦 구조 분해 할당(Destructuring)

배열이나 객체에서 필요한 값을 간단한 문법으로 추출할 수 있는 기능입니다.
변수 선언과 동시에 값을 할당받을 수 있어 매우 유용합니다.

// 배열 구조 분해
const [a, b] = [1, 2];

// 객체 구조 분해
const user = { name: "유나", age: 20 };
const { name, age } = user;

📑 템플릿 리터럴(Template Literal)

문자열을 표현할 때 백틱(` `)을 사용해 변수나 표현식을 간단하게 삽입할 수 있습니다.
긴 문자열이나 HTML 템플릿 작성 시 매우 유용하죠.

const name = "지후";
console.log(`안녕하세요, ${name}님!`);

이 외에도 클래스(class), 모듈(module), Promise, Set/Map 같은 기능들도 ES6에서 도입되었습니다.
앞으로의 자바스크립트를 공부하면서 하나씩 익혀두면 큰 도움이 될 거예요.

❓ 자주 묻는 질문 (FAQ)

🧠 자바스크립트 기초 문법 요약과 태그 정보

자바스크립트는 웹 개발에서 빠질 수 없는 핵심 언어이며, 그 기본 문법을 제대로 이해하는 것은 매우 중요합니다.
이번 글에서는 변수 선언 방식인 let, const, var부터 시작해, 조건문과 반복문, 그리고 함수의 선언 및 호출 방법을 살펴봤습니다.
특히 ES6 문법은 현재 대부분의 프론트엔드 프로젝트에서 기본으로 사용되고 있기 때문에, 화살표 함수, 구조 분해 할당, 템플릿 리터럴 같은 기능들을 반드시 익혀두어야 합니다.

초보자에게도 어렵지 않도록 예제와 함께 설명한 내용을 바탕으로, 직접 코드를 작성해보며 복습해보세요.
기초 문법에 익숙해진다면 그 다음 단계인 객체, 클래스, 비동기 처리도 훨씬 수월하게 이해할 수 있을 것입니다.
앞으로도 자바스크립트를 꾸준히 연습하며, 실전 감각을 키워나가 보시길 바랍니다.

🏷️ 관련 태그 : 자바스크립트기초, JS문법정리, ES6기능, 변수선언방식, 조건문반복문, 함수작성법, 화살표함수, 웹개발입문, 프론트엔드기초, 코딩초보추천