JavaScript 기초 — 변수와 함수 이해하기

JavaScript를 배워야 하는 이유

HTML과 CSS로 웹페이지의 구조와 디자인을 만들었다면, JavaScript는 그 페이지에 생명을 불어넣는 언어입니다. 버튼을 클릭하면 무언가가 실행되고, 사용자의 입력에 반응하고, 데이터를 동적으로 화면에 표시하는 모든 동작이 JavaScript를 통해 이루어집니다. 저도 HTML/CSS만으로는 한계를 느끼고 JavaScript 학습을 시작했는데, 처음에는 꽤 어려웠습니다. 하지만 기초 개념을 차근차근 쌓아가니 점점 이해가 되기 시작했습니다.

변수: 데이터를 담는 그릇

변수는 쉽게 말해 "데이터를 담는 이름표가 붙은 상자"입니다. 교실에서 아이들의 사물함에 이름표를 붙이는 것과 같은 원리라고 생각하면 됩니다. JavaScript에서는 변수를 선언하는 세 가지 키워드가 있습니다.

let - 바꿀 수 있는 변수

let으로 선언한 변수는 나중에 값을 변경할 수 있습니다. 출석부에서 오늘의 학생 수를 기록하는 것처럼, 상황에 따라 값이 바뀌는 데이터에 적합합니다.

let studentCount = 25;
console.log(studentCount); // 25

// 한 명이 전학을 왔다면?
studentCount = 26;
console.log(studentCount); // 26

const - 바꿀 수 없는 상수

const는 한 번 값을 할당하면 변경할 수 없습니다. 학교 이름이나 교실 번호처럼 변하지 않는 값에 사용합니다.

const schoolName = "행복초등학교";
const classRoom = "3-2";

console.log(schoolName); // "행복초등학교"

// schoolName = "즐거운초등학교";
// 오류 발생! const는 재할당 불가

var - 옛날 방식 (비추천)

var는 JavaScript 초기부터 사용되던 변수 선언 방식입니다. 현재는 let과 const가 더 안전하고 명확하기 때문에, 새로운 코드에서는 var를 사용하지 않는 것이 좋습니다. 기존 코드를 읽을 때 알아두면 되는 정도로 생각하세요.

변수를 선언할 때는 먼저 const를 사용하고, 값을 변경해야 할 때만 let을 사용하세요. var는 가급적 사용하지 마세요. 이것이 현대 JavaScript의 권장 사항입니다.

함수: 반복되는 작업을 묶어주기

함수는 특정 작업을 수행하는 코드 묶음입니다. 수업 시간에 매번 같은 인사말을 하는 것을 하나의 루틴으로 만들어 두는 것과 비슷합니다. 함수를 만들어두면 필요할 때마다 호출하기만 하면 됩니다.

함수 선언 방식

// 함수 선언문
function greetStudent(name) {
  return `안녕하세요, ${name} 학생! 오늘도 좋은 하루 보내세요.`;
}

console.log(greetStudent("김민수"));
// "안녕하세요, 김민수 학생! 오늘도 좋은 하루 보내세요."

// 화살표 함수 (ES6)
const calculateAverage = (scores) => {
  const total = scores.reduce((sum, score) => sum + score, 0);
  return total / scores.length;
};

const mathScores = [85, 92, 78, 95, 88];
console.log(calculateAverage(mathScores)); // 87.6

함수를 잘 활용하면 코드의 반복을 줄이고, 읽기 쉬운 프로그램을 만들 수 있습니다. 교사 입장에서 비유하자면, 수업지도안의 각 활동을 함수처럼 모듈화해 두는 것과 같습니다.

조건문: 상황에 따라 다르게 동작하기

조건문은 특정 조건에 따라 다른 코드를 실행하는 구조입니다. "시험 점수가 90점 이상이면 A, 80점 이상이면 B를 부여한다"와 같은 논리를 코드로 표현할 수 있습니다.

function getGrade(score) {
  if (score >= 90) {
    return "A - 훌륭합니다!";
  } else if (score >= 80) {
    return "B - 잘했습니다!";
  } else if (score >= 70) {
    return "C - 조금 더 노력해봐요!";
  } else {
    return "D - 함께 보충학습을 해봅시다.";
  }
}

console.log(getGrade(95));  // "A - 훌륭합니다!"
console.log(getGrade(73));  // "C - 조금 더 노력해봐요!"

실전 연습: 출석 체크 프로그램

지금까지 배운 변수, 함수, 조건문을 조합하여 간단한 출석 체크 프로그램을 만들어 봅시다. 이런 작은 프로젝트를 직접 만들어보는 것이 가장 효과적인 학습 방법입니다.

const students = ["김민수", "이서연", "박지호", "최하은"];
const attendance = {};

function checkAttendance(name, isPresent) {
  if (students.includes(name)) {
    attendance[name] = isPresent ? "출석" : "결석";
    console.log(`${name}: ${attendance[name]}`);
  } else {
    console.log(`${name} 학생은 명단에 없습니다.`);
  }
}

checkAttendance("김민수", true);   // "김민수: 출석"
checkAttendance("이서연", false);  // "이서연: 결석"
checkAttendance("홍길동", true);   // "홍길동 학생은 명단에 없습니다."

마치며

JavaScript의 변수, 함수, 조건문은 프로그래밍의 가장 기본이 되는 개념입니다. 저도 처음에는 이 세 가지만 이해하는 데 꽤 오랜 시간이 걸렸지만, 한번 익혀두니 이후의 학습이 훨씬 수월해졌습니다. 코드를 읽는 것만으로는 부족합니다. 반드시 직접 타이핑하고 실행해 보면서 감을 잡아 가시길 권합니다.

프로그래밍은 자전거 타기와 같습니다. 설명서를 아무리 읽어도 직접 페달을 밟아봐야 배울 수 있습니다. 오늘 당장 브라우저 콘솔(F12)을 열고 코드를 입력해 보세요.