[HTML+CSS+자바스크립트] 10장 자바스크립트 함수 다루기 (~405p)

안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 당담하게 된 박브레드입니다.

오늘은 열세 번째 날로, 자바스크립트 공부 네 번째 날입니다!

오늘부턴 함수를 다뤄볼 거예요! 공부 시작해 볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

 

🏃 공부할 내용(392~405p) 

1. 함수란

2. 함수를 정의하는 방법

3. 함수 기능 확장하기

 

1. 함수란

---

자바스크립트에서 함수는 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문입니다.

코드를 함수로 만들면 함수를 호출해 함수 내부에 모아 둔 여러 줄의 코드를 한 번에 실행할 수 있어요!

 

다음과 같이, 3단 구구단을 실행하는 반복문을 볼까요?

간단하죠? 그러나 3단이 아닌 다른 단도 출력하고 싶을 때는 어떻게 할까요?

같은 코드를 반복해서 적어야 할까요? 아닙니다.

for (let i = 1; i <= 9; i++) {
  console.log(`3 * ${i} = ${3 * i}`);
}

 

이런 식으로 함수를 만들어 사용하면

dan 변수값만 변경시키면 손쉽게 구구단 변경이 가능합니다!

그리고 여러 개를 한꺼번에 손쉽게 출력할 수 있고요~

function gugudan(dan) {
  for (let i = 1; i <= 9; i++) {
    console.log(`${dan} * ${i} = ${dan * i}`);
  }
}

let dan = 9;
gugudan(dan);

 

2. 함수를 정의하는 방법

---

2.1 함수 선언문으로 함수 정의하기

함수 선언문은 function 키워드로 함수를 정의하는 방법이에요.

function 식별자(){}

 

2.2 함수 표현식으로 함수 정의하기

함수는 객체에서 파생된 자료형입니다. 자바스크립트에서 자료형은 변수에 할당할 수 있어요 해요.

따라서 함수도 변수에 할당할 수 있는데, 이를 이용한 함수 정의 방법을 함수 표현식이라고 합니다!

 

함수 표현식은 변수에 할당하는 함수에 식별자가 있으면 네이밍 함수, 없으면 익명 함수로 다시 구분해요.

const 변수명 = function () {}; // 익명 함수
const 변수명 = function 식별자() {}; // 네이밍 함수

 

2.3 화살표 함수로 함수로 정의하기

화살표 함수는 ES6에서 추가된 함수 정의 방법으로, 화살표를 사용해 함수를 정의하는 방법이에요.

화살표 함수는 익명 함수로만 정의할 수 있어서 함수를 호출하려면 정의된 함수를 변수에 할당하는 방법인 함수 표현식을 사용해야 돼요. 처음에는 낯설어 보일 수 있지만, ES6가 지원되는 개발 환경에서는 가장 많이 사용하는 방법이니 잘 기억해 두세요~

() => {}

const gugudan = () => {
  for (let i = 1; i <= 9; i++) {
    console.log(`${dan} * ${i} = ${dan * i}`);
  }
}

gugudan();

 

3. 함수 기능 확장하기

---

3.1 매개변수와 인수

아까 구구단에서 dan 적었던 거 기억나시나요?

여기서 함수에 들어가는 dan을 매개변수라고 해요!

gugudan(dan) 여기에 들어가는 dan은 인수라고 합니다.

function gugudan(dan) {
  for (let i = 1; i <= 9; i++) {
    console.log(`${dan} * ${i} = ${dan * i}`);
  }
}

let dan = 9;
gugudan(dan);

 

3.2 매개변수의 특징

매개 변수는 개수 제한이 없기 때문에 여러 개를 생성할 수 있지만,

함수가 지저분해 보일 수 있어서 최소한으로 정의하는 것이 좋아요.

 

3.3 return 문

함수를 호출할 때 데이터를 전달하려면 매개변수를 정의해야 하듯이,

함수 외부로 데이터를 반환할 때는 return 문을 사용해야 해요.

function sum(num1, num2) {
  let result = num1 + num2;
  console.log("inner: " + result);
}
sum(1, 2); // inner: 3

이처럼 return문을 써주고 result를 반환해줘야 데이터를 변수에 담을 수 있어요

function sum(num1, num2) {
  let result = num1 + num2;
  return result;
}
const result = sum(1, 2);
console.log("inner: " + result); // inner: 3

다음과 같이 return문을 사용하지 않으면 반환하는 값이 없기 때문에 undefined값이 나오게 됩니다.

function sum(num1, num2) {
  let result = num1 + num2;
}
const result = sum(1, 2);
console.log("inner: " + result); // inner: undefined

 

✅ 정리

1. 함수란
2. 함수를 정의하는 방법

함수 선언문, 함수 표현식, 화살표 함수
3. 함수 기능 확장하기

 

내일은 자바스크립트 함수를 더 자세히 다뤄볼 예정이에요!

 

제가 공부한 내용을 보고 궁금한 점이 있으면 댓글을 남겨 주세요.
확인하고 답변해 드리겠습니다. 
그럼 내일 다시 만나요!