[JS 3강] 코드를 재사용하자! 함수(Function)의 마법

[JS 3강] 코드를 재사용하자! 함수(Function)의 마법

"반복되는 코드를 하나로 묶어 효율적으로 관리하는 방법을 배워봅시다."

안녕하세요! 지난 2강에서는 조건문과 반복문을 통해 프로그램의 흐름을 제어하는 법을 배웠습니다. 오늘은 똑같은 코드를 여러 번 복사해서 붙여넣지 않고, 필요할 때마다 꺼내 쓸 수 있게 만드는 함수(Function)에 대해 알아보겠습니다.

1. 함수란 무엇인가요?

함수는 특정한 작업을 수행하도록 설계된 코드의 묶음입니다. 한 번 만들어두면 원할 때마다 이름을 불러 실행할 수 있습니다.

✅ 재사용성: 똑같은 코드를 반복해서 쓸 필요가 없습니다.

✅ 유지보수: 함수 내용만 수정하면 사용된 모든 곳에 적용됩니다.

✅ 구조화: 코드가 읽기 쉽고 깔끔해집니다.

2. 함수의 구조 (매개변수와 반환값)

함수는 값을 받아서(Input) 처리한 뒤 결과(Output)를 돌려줍니다.

• 📥 매개변수(Parameter): 함수 외부에서 전달받는 값
• 📤 반환값(Return): 함수 실행 결과를 외부로 내보내는 값

3. 함수 정의와 활용 실습

전통적인 함수 방식과 최신 자바스크립트에서 많이 쓰이는 화살표 함수 방식을 모두 익혀보세요.

// 1. 기본 함수 선언식 function sayHello(name) { return "안녕하세요, " + name + "님!"; } // 함수 호출하기 console.log(sayHello("철수")); // "안녕하세요, 철수님!" console.log(sayHello("영희")); // "안녕하세요, 영희님!" // 2. 값을 계산해서 돌려주는 함수 function add(a, b) { return a + b; } let result = add(10, 20); console.log("더하기 결과:", result); // 30 // 3. 화살표 함수 (최신 문법) const multiply = (x, y) => { return x * y; }; console.log("곱하기 결과:", multiply(5, 4)); // 20

코딩의 효율성이 올라갔습니다!

함수를 잘 만드는 것이 진정한 프로그래머로 가는 지름길입니다. 작은 기능부터 함수로 만들어보세요.

다음 4강에서는 자바스크립트로 웹페이지를 직접 제어하는 'DOM 조작 기초'를 배워볼게요!