JavaScript 변수와 함수 완전 정복: 구구단 실습으로 배우는 프로그래밍 기초

 

 

HTML과 CSS로는 예쁜 정적인 웹 페이지를 만들 수 있지만,
유저와의 상호작용을 위한 동적 기능은 JavaScript로 구현해야 합니다
이 글에서는 JavaScript의 기본 개념인 변수와 함수를 구구단 예제를 통해 쉽게 익혀보겠습니다

 

JavaScript의 기본 개념, 왜 변수와 함수부터 시작해야 할까?

 

JavaScript는 웹 페이지를 정적인 구조에서 동적인 기능으로 발전시키는 핵심 언어입니다
초보자라면 HTML과 CSS로 시작해도 어느 순간 JavaScript의 필요성을 느끼게 됩니다
그 중심에 있는 개념이 바로 변수와 함수입니다

 

이 글에서는 자바스크립트 입문자가 반드시 익혀야 할 변수와 함수의 개념을 실습 예제와 함께 소개합니다
코드를 직접 따라하며 JavaScript에 대한 감각을 키워보시기 바랍니다

 

변수란 무엇인가요? 개념부터 선언 방법까지

 

변수는 데이터를 저장하기 위한 '이름 붙은 상자'입니다

코드에서 변수를 선언하면 특정 값을 메모리에 저장하고,
이후에는 변수 이름으로 해당 값을 자유롭게 사용할 수 있습니다

 

let apple = '사과';

 

위 코드는 "apple"이라는 이름으로 '사과'라는 문자열을 저장한 것입니다
핵심은 apple이라는 이름으로 언제든 '사과'를 꺼내 쓸 수 있다는 점입니다

 

함수를 왜 써야 하나요? 동작 정의의 시작

 

변수가 명사라면, 함수는 동사입니다

즉, 함수는 동작이나 계산, 처리 절차를 묶어서 정의합니다
예를 들어 문자열의 길이를 구하는 함수를 정의할 수 있습니다

 

function countLength(string) {
  return string.length;
}

 

이 함수는 문자열 하나를 받아 길이를 반환합니다
입력값에 따라 다르게 동작하는 것이 함수의 매력입니다

 

실전 함수 호출과 반환값 활용 예시

 

정의한 함수는 직접 호출해서 써야 의미가 있습니다
아래는 함수를 호출하고, 결과를 변수에 저장하는 예시입니다

 

let appleCount = countLength('사과');
let bananaCount = countLength('바나나');
console.log(appleCount + bananaCount);

 

이 코드의 출력은 5가 됩니다
"사과"는 2글자, "바나나"는 3글자이므로 두 수를 더한 결과입니다
중요 포인트는 함수 결과를 변수에 저장해 다른 계산에 사용할 수 있다는 점입니다

 

변수와 함수는 어떻게 함께 사용되나요?

 

JavaScript에서 변수와 함수는 짝꿍처럼 함께 동작합니다
예를 들어 데이터를 저장하는 변수와, 그 데이터를 처리하는 함수가 협력하여 결과를 만들어냅니다

 

let fruit = '딸기';
function getUpperCase(str) {
  return str.toUpperCase();
}
let result = getUpperCase(fruit); // 딸기 → 딸기(대문자)
console.log(result); // 출력: 딸기

 

이처럼 변수는 데이터를 저장하고, 함수는 그 데이터를 변형하거나 처리하는 데 사용됩니다
변수와 함수의 연결은 자바스크립트 로직의 기초입니다

 

변수와 함수, 어떻게 구구단 실습에 활용할 수 있을까?

 

변수와 함수는 JavaScript의 가장 핵심적인 구성 요소입니다
변수는 데이터를 저장하고, 함수는 그 데이터를 처리하는 역할을 합니다
구구단 실습을 통해 변수와 함수가 어떻게 동작하는지 명확하게 이해해봅니다

 

구구단 2단 출력값

 

변수로 구구단 2단 출력하기: 반복 작업을 단순화하는 첫 단계

 

처음에는 구구단 2단을 일일이 작성해야 합니다
하지만 동일한 숫자를 반복해 작성하는 대신 변수로 추상화할 수 있습니다

 

let left = 2;
console.log(left * 1);
console.log(left * 2);
console.log(left * 3);
console.log(left * 4);
console.log(left * 5);
console.log(left * 6);
console.log(left * 7);
console.log(left * 8);
console.log(left * 9);

 

left 변수의 값을 바꾸기만 하면 다른 단도 쉽게 출력할 수 있습니다
예: left = 3으로 바꾸면 3단 출력

중요 포인트: 반복되는 숫자를 변수로 바꾸면 유지보수가 쉬워집니다

 

구구단 3단 결과값

 

함수를 사용해 구구단 출력하기: 재사용 가능한 코드로 진화

 

구구단 함수를 이용한 결과값

 

다음 단계는 함수를 이용해 구구단 코드를 더 간결하게 만드는 것입니다
입력값에 따라 원하는 단이 출력되도록 만들 수 있습니다

 

function gugudan(left) {
  console.log(left * 1);
  console.log(left * 2);
  console.log(left * 3);
  console.log(left * 4);
  console.log(left * 5);
  console.log(left * 6);
  console.log(left * 7);
  console.log(left * 8);
  console.log(left * 9);
}

 

함수를 호출할 때 원하는 숫자를 전달하면 해당 단이 출력됩니다

 

gugudan(2); // 2단 출력
gugudan(3); // 3단 출력

 

핵심 개념: 함수를 정의해 놓으면 다양한 입력값에 따라 같은 로직을 반복적으로 실행할 수 있습니다

 

실습 코드 실행은 여기에서! StackBlitz를 활용한 실시간 테스트

 

직접 코드를 입력하고 실행해보며 개념을 복습해보세요

 

👉 변수로 구구단 출력 실습하기
👉 함수로 구구단 출력 실습하기

 

실행 방법은 간단합니다:
코드 에디터 아래 터미널에 node index.js를 입력한 후 Enter 키를 누르세요

 

변수와 함수 비교 요약표

 

요소 역할 사용 예시 결과 예측

 

변수	값 저장 및 반복 제거	let left = 3;	3단 출력
함수	기능 정의 및 재사용	gugudan(5);	5단 출력

 

JavaScript는 개념을 이해하고 손으로 직접 타이핑해보며 익히는 것이 가장 확실한 학습 방법입니다

오늘 구구단 실습을 통해 변수와 함수의 작동 원리를 제대로 체득해보세요

 

요약: 초보자가 반드시 익혀야 할 두 가지

 

변수와 함수는 자바스크립트뿐 아니라 모든 프로그래밍의 기본입니다
그 의미를 정확히 알고, 쓰는 방법을 익혀두면
조건문, 반복문, 이벤트 처리 등 고급 개념도 훨씬 쉽게 접근할 수 있습니다

 

개념 설명

변수	데이터를 저장하고 불러오는 이름 붙은 공간
함수	특정 작업을 실행하는 코드 묶음

 

자주 묻는 질문으로 마무리해봅니다

 

"변수는 꼭 let으로만 선언해야 하나요?"
→ 아니요. const와 var도 존재하지만, 초보자에겐 let부터 익히는 것이 좋습니다

 

"함수 안에서 return은 꼭 써야 하나요?"

→ 반환값이 필요할 때는 return을 사용합니다. 단순히 콘솔에 출력만 할 수도 있습니다

 

궁금한 점은 직접 실습하며 확인하는 것이 가장 빠른 학습법입니다

 

실습 정리표로 복습해보세요

코드 요소 역할 예시 코드

변수 선언	데이터 저장	let fruit = '사과';
함수 정의	작업 정의	function count(str) { return str.length; }
함수 호출	동작 실행	let result = count('바나나');
출력	결과 확인	console.log(result);

 

 

자바스크립트를 제대로 배우고 싶다면, 변수와 함수부터 깊이 있게 익혀야 합니다

이 두 개념은 모든 프로그래밍 지식의 출발점입니다