자바스크립트 4강 함수로 재사용 코드 만들기

타리스만에서는 유익한 AI 기술을 전달합니다.
제휴 활동을 통한 수수료를 제공받을 수 있습니다.

자바스크립트 기초 #4

함수로 재사용 가능한 코드 만들기

[ 함수가 뭐고 왜 필요해? ]

똑같은 코드를 여러 번 쓰는 게 귀찮았던 적 있지? 함수는 코드를 한 번만 작성하고 필요할 때마다 불러서 쓸 수 있게 해줘.

함수는 특정 작업을 수행하는 코드 블록이야. 마치 요리 레시피처럼, 한 번 만들어두면 언제든 그 레시피대로 요리할 수 있는 거지.

함수의 핵심 장점:
▲ 코드 재사용 – 한 번 작성, 여러 번 사용
▲ 유지보수 편리 – 수정할 때 한 곳만 고치면 됨
▲ 코드 구조화 – 기능별로 나눠서 관리 가능
▲ 가독성 향상 – 함수 이름으로 뭘 하는지 알 수 있음
> 함수 없이 vs 함수 사용하기
결과가 여기에 나타납니다…

[ 함수 만들기 – 기본 문법 ]

함수를 만드는 방법은 여러 가지가 있어. 가장 기본적인 방법부터 하나씩 알아보자!

1. 함수 선언문 (Function Declaration):
function 함수이름() {
    // 실행할 코드
}

가장 기본적인 방법. 어디서든 호출 가능 (호이스팅됨)

함수의 구성 요소:
1. function 키워드 – 함수를 만든다는 선언
2. 함수 이름 – 나중에 호출할 때 사용
3. 소괄호 () – 매개변수를 받는 곳
4. 중괄호 {} – 실행할 코드를 담는 곳

2. 함수 표현식 (Function Expression):
const 함수이름 = function() {
    // 실행할 코드
};

변수에 함수를 할당하는 방법. 선언 후에만 호출 가능
3. 화살표 함수 (Arrow Function):
const 함수이름 = () => {
    // 실행할 코드
};

ES6에서 추가된 간단한 문법. 짧고 깔끔함
> 다양한 함수 선언 방법
결과가 여기에 나타납니다…

[ 매개변수와 인자 – 함수에 값 전달하기 ]

함수가 더 유용해지려면 외부에서 값을 받아서 처리할 수 있어야 해. 이때 사용하는 게 매개변수야!

매개변수(Parameter) vs 인자(Argument):
function greet(name) { // name이 매개변수
    console.log("안녕, " + name);
}
greet("철수"); // "철수"가 인자

▲ 매개변수: 함수를 정의할 때 사용하는 변수
▲ 인자: 함수를 호출할 때 전달하는 실제 값

여러 개의 매개변수:
함수는 여러 개의 매개변수를 받을 수 있어. 콤마(,)로 구분하면 돼!

기본값 설정 (Default Parameters):
function greet(name = "친구") {
    console.log("안녕, " + name);
}
greet(); // "안녕, 친구" 출력

인자를 전달하지 않았을 때 사용할 기본값을 설정할 수 있어
> 매개변수 활용하기
결과가 여기에 나타납니다…

[ return – 함수에서 값 반환하기 ]

함수는 작업을 수행한 후 결과값을 돌려줄 수 있어. 이때 사용하는 키워드가 return이야!

return의 역할:
1. 함수의 실행을 종료
2. 값을 함수 밖으로 반환
3. return 이후의 코드는 실행되지 않음

return vs console.log의 차이:
– console.log: 화면에 출력만 함
– return: 값을 반환해서 다른 곳에서 사용 가능

구분 console.log return
용도 디버깅, 확인용 값 반환
재사용 불가능 가능
함수 종료 안 함 종료함
> return 활용하기
결과가 여기에 나타납니다…

[ 스코프 – 변수의 유효범위 ]

스코프는 변수가 어디서 접근 가능한지를 정하는 규칙이야. 함수를 사용할 때 꼭 이해해야 하는 중요한 개념!

전역 스코프 vs 지역 스코프:
let globalVar = "전역변수"; // 어디서든 접근 가능

function myFunction() {
    let localVar = "지역변수"; // 함수 내부에서만
    console.log(globalVar); // OK
    console.log(localVar); // OK
}

console.log(globalVar); // OK
console.log(localVar); // Error!

스코프 규칙:
1. 안쪽에서는 바깥쪽 변수에 접근 가능
2. 바깥쪽에서는 안쪽 변수에 접근 불가
3. 같은 이름의 변수가 있으면 가장 가까운 것 사용

> 스코프 이해하기
결과가 여기에 나타납니다…

[ 실전 프로젝트 – 계산기 만들기 ]

이제 배운 내용을 활용해서 실용적인 계산기를 만들어보자! 함수를 조합해서 복잡한 프로그램도 만들 수 있어.

퀴즈: 두 수를 더하는 함수의 올바른 작성법은?
function add { return a + b; }
function add(a, b) { return a + b; }
function add(a, b) { console.log(a + b); }
add(a, b) => { return a + b; }

고차 함수 맛보기:
함수를 인자로 받거나 함수를 반환하는 함수를 고차 함수라고 해. 나중에 더 자세히 배울 거야!

> 계산기 프로그램
결과가 여기에 나타납니다…

[ 다음 단계는? ]

대단해! 이제 함수를 만들고 사용할 수 있게 됐어. 프로그래밍의 핵심 스킬을 하나 더 마스터한 거야!

함수 마스터 체크리스트:
✓ 함수 선언하고 호출하기
✓ 매개변수로 값 전달하기
✓ return으로 결과 반환하기
✓ 스코프 개념 이해하기
✓ 여러 함수 조합해서 프로그램 만들기

다음 강의 예고:
배열과 객체로 데이터를 효율적으로 관리하기! 진짜 실무에서 쓰는 핵심 개념이야

< 이전강의 #3 반복문 fow while 사용법

다음강의 #5 배열과 객체 >

자바스크립트 전체 강의목록 >

0 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments