프론트엔드 입문자를 위한 자바스크립트 기초 (변수, 함수, 조건문)

HTML과 CSS를 배운 뒤, 웹사이트에 ‘동작’을 추가하고 싶다면 자바스크립트 (JavaScript)를 배워야 합니다. 자바스크립트는 웹의 핵심 언어 중 하나로, 버튼 클릭, 팝업 창, 슬라이더, 유효성 검사 등 사용자와의 상호작용을 처리하는 데 필수입니다. 이 글에서는 프론트엔드 입문자를 위해 자바스크립트의 기초 개념 중 가장 중 요한 변수, 함수, 조건문을 쉽게 설명하고, 코딩 실습을 시작할 수 있도록 실용적인 예제를 함께 제공합니다.

자바스크립트 변수: 데이터를 저장하는 첫걸음 (변수)

프로그래밍에서 변수는 데이터를 저장하는 상자와도 같습니다. 자바스크립트에서는 변수 선언에 var, let, const 키워드를 사용합니다.

• var: 함수 스코프
• let: 블록 스코프
• const: 상수, 재할당 불가

let name = "철수"; 
const age = 25; 
var city = "서울";

자바스크립트에서 변수를 제대로 다루려면 스코프(scope)와 재할당 가능 여부를 이해하는 것이 중요합니다.

자바스크립트 함수: 코드의 재사용과 구조화 (함수)

함수(Function)는 반복되는 작업을 하나로 묶어 재사용할 수 있는 구조입니다.

function sayHello(name) { 
console.log("안녕하세요, " + name + "님!"); 
} 
sayHello("영희");

화살표 함수:

const sayHi = (name) => { 
console.log(`반갑습니다, ${name}님!`); 
};

프론트엔드 개발에서 함수는 버튼 클릭, 폼 전송 등 다양한 이벤트 처리를 위해 자 주 사용됩니다.

조건문으로 흐름 제어하기: 상황에 따라 다르게 실행 (조건문)

조건문은 프로그램의 흐름을 제어하는 기본 구조입니다. 가장 흔한 형태는 if, else, else if입니 다.

let age = 20; 
if (age >= 18) { 
console.log("성인입니다."); 
} else { 
console.log("미성년자입니다."); 
}

switch문을 사용하면 여러 조건을 정리할 수 있습니다.

let day = "월요일"; 
switch (day) { 
case "월요일": 
console.log("한 주의 시작입니다."); 
break; 
case "금요일": 
console.log("불금입니다!"); 
break; 
default: 
console.log("평범한 하루입니다."); 
}

결론: 요약 및 Call to Action

자바스크립트는 프론트엔드 개발의 필수 언어이며, 그 출발점은 변수, 함수, 조건문입니다. 이제 코드 편집기를 열고 직접 실습해보세요. 작은 스크립트 한 줄이 당신의 웹페이지를 살아 움직이게 만들 수 있습니 다.