JS 함수 핵심! 구구단 예제로 쉽게 배우는 자바스크립트 기본 문법
자바스크립트 함수, 어렵지 않아요!
이번 영상에서는 자바스크립트에서 정말 중요한 '함수'에 대해 알아볼 거야. 함수가 뭔지, 왜 써야 하는지, 어떻게 쓰는지 차근차근 알려줄게.
왜 함수를 써야 할까?
1. 반복되는 코드 줄이기:
만약 구구단 3단을 출력하는 코드가 있다고 해보자.
console.log("3 * 1 = 3");
console.log("3 * 2 = 6");
// ... (9단까지)
이걸 5단, 7단으로 바꾸려면 숫자만 바꾸는 게 아니라 코드를 또 써야 해서 번거롭잖아.
그래서 for 문으로 좀 더 간단하게 만들 수도 있어.
let dan = 3;
for (let i = 1; i <= 9; i++) {
console.log(`${dan} * ${i} = ${dan * i}`);
}
이렇게 하면 숫자만 바꾸면 되니 편해졌지? 그런데 만약 한 페이지에 1단부터 9단까지 다 보여줘야 한다면? for 문을 9번이나 써야 해서 이것도 좀 비효율적이야.
이럴 때 바로 '함수'가 등장하는 거야! 함수는 특정 목적을 가진 코드 덩어리라고 생각하면 돼. 함수를 만들어두면 필요할 때마다 불러서 쓸 수 있어서 코드를 훨씬 깔끔하고 효율적으로 만들 수 있어.
함수, 어떻게 만들까?
자바스크립트에서 함수를 만드는 방법은 크게 세 가지가 있어.
1. 함수 선언문:
가장 기본적인 방법이야. function이라는 키워드를 쓰고, 함수 이름을 정한 뒤, 괄호 ()와 중괄호 {} 안에 실행할 코드를 넣으면 돼.
function 구구단() {
let dan = 3;
for (let i = 1; i <= 9; i++) {
console.log(`${dan} * ${i} = ${dan * i}`);
}
}
2. 함수 표현식:
변수에 함수를 담는 방식이야. 변수 이름으로 함수를 부를 수 있지.
const 구구단 = function() {
let dan = 3;
for (let i = 1; i <= 9; i++) {
console.log(`${dan} * ${i} = ${dan * i}`);
}
};
함수 표현식에는 이름을 붙일 수도 있는데, 이걸 '네이밍 함수 표현식'이라고 하고, 이름을 안 붙이면 '익명 함수 표현식'이라고 불러. 보통은 변수 이름과 똑같이 이름을 붙여주는 게 좋아.
3. 화살표 함수 (ES6부터):
최신 문법인데, 더 간결하게 함수를 만들 수 있어.
const 구구단 = () => {
let dan = 3;
for (let i = 1; i <= 9; i++) {
console.log(`${dan} * ${i} = ${dan * i}`);
}
};
함수, 어떻게 불러서 쓸까? (함수 호출)
함수를 만들었다면, 이제 그걸 사용해야겠지? 함수 이름을 쓰고 괄호 ()를 붙여주면 돼. 이걸 '함수 호출'이라고 해.
구구단(); // 위에서 만든 함수가 실행돼!
함수 선언문, 함수 표현식, 화살표 함수 모두 똑같은 방식으로 호출할 수 있어.
주의할 점: 함수 표현식으로 만든 함수는 변수 이름으로만 호출해야 해. 함수 이름으로 호출하면 오류가 날 수 있어!
함수를 더 똑똑하게! 매개변수와 인수
함수를 만들 때, 외부에서 데이터를 받아서 다르게 동작하게 만들고 싶을 때가 있잖아? 이때 '매개변수'와 '인수'를 사용해.
- 매개변수: 함수를 정의할 때 괄호 안에 변수처럼 이름을 적어주는 거야. 함수 안에서 이 이름을 써서 외부에서 받은 데이터를 사용할 수 있어.
- 인수: 함수를 호출할 때 괄호 안에 실제로 전달하고 싶은 값을 넣어주는 거야.
예를 들어, 구구단 함수에 몇 단을 출력할지 매개변수로 전달해볼게.
function 구구단(단수) { // '단수'가 매개변수야
for (let i = 1; i <= 9; i++) {
console.log(`${단수} * ${i} = ${단수 * i}`);
}
}
구구단(3); // '3'이 인수야. 3단을 출력해줘!
구구단(7); // '7'이 인수야. 7단을 출력해줘!
매개변수는 여러 개를 사용할 수도 있어. 이때는 콤마(,)로 구분해주면 돼. 함수를 호출할 때도 매개변수 개수만큼 인수를 넣어줘야 해.
중요! 만약 매개변수보다 적은 수의 인수를 넣어도 오류는 나지 않아. 다만, 전달되지 않은 매개변수는 undefined 값이 들어가게 돼.
함수에서 값을 돌려받고 싶을 때: return 문
함수가 어떤 계산을 하고 그 결과를 돌려주고 싶을 때가 있잖아? 이때 return 문을 사용해.
function 더하기(a, b) {
let 결과 = a + b;
return 결과; // 계산된 '결과'를 함수 밖으로 돌려줘!
}
let 합계 = 더하기(10, 20); // '더하기' 함수가 돌려준 값을 '합계' 변수에 저장해
console.log(합계); // 30이 출력돼!
return 문을 사용하면 함수 내부의 데이터를 함수 밖으로 가져올 수 있어서, 여러 함수 결과를 합치거나 복잡한 계산을 할 때 아주 유용해.
매개변수에 기본값 주기 (ES6부터)
매개변수에 기본값을 미리 정해둘 수도 있어. 만약 함수를 호출할 때 인수를 안 넣어주면, 기본값이 자동으로 사용돼.
function 인사하기(이름 = "손님") { // 이름이 없으면 "손님"으로 기본값 설정
console.log(`안녕하세요, ${이름}님!`);
}
인사하기("철수"); // 안녕하세요, 철수님!
인사하기(); // 안녕하세요, 손님님!
이 기능은 아직 모든 브라우저에서 지원하지 않을 수도 있으니, 사용할 때는 환경을 확인하는 게 좋아.
함수는 코드를 효율적으로 만들고, 재사용성을 높여주는 아주 강력한 도구야. 오늘 배운 내용들을 잘 기억해서 앞으로 코딩할 때 꼭 활용해보자!