[코딩 자율학습 HTML + CSS + 자바스크립트] 3. 자바스크립트로 웹 동작 구현하기- "10장 자바스크립트 함수 다루기"

10.1 함수

1. 함수

떤 목적을 가지고 작성한 코드를 모아 둔 블록문.

블록문을 function 키워드, 식별자, 소괄호와 함께 묶으면 함수가 생성되는데, 이를 함수를 정의함.

function 식별자() {
	}

 

---

10.2 함수를 정의하는 방법

2. 함수 정의

함수를 정의하는 방법 3가지

 ① 함수 선언문: function 키워드로 함수를 정의.

function 키워드 다음에 함수를 식별할 수 있도록 식별자를 붙이면 됨. 이때 식별자 뒤에는 소괄호(()). 식별자의 명명 규칙은 변수명을 생성할 때와 같음.

function 식별자() {	}

 

함수를 정의하고 나면 함수의 식별자(함수명)와 소괄호를 열었다가 닫아주는 형식으로 함수를 실행할 수 있음.

함수명();

※ 식별자가 어떤 용도로 사용되는지에 따라서 다른 명칭 불림.

변수명: 변수에 붙는 식별자는 변수명

함수명: 함수에 붙는 식별자 

정의된 함수를 실행하는 행위: 함수를 실행한다. 함수를 호출한다.

 

 ② 함수표현식

함수는 객체에서 파생된 자료형. 자바스크립트에서 자료형은 변수에 할당할 수 있어야 함. 따라서 함수도 변수에 할당할 수 있는데, 이를 이용한 함수 정의 방법 임.

네이밍 함수(naming function): 변수에 할당하는 함수에 식별자가 있으면. 

익명 함수(anonymous function): 변수에 할당하는 함수에 식별자가 없으면.  

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

함수 선언문과는 다르게 function 키워드 다음에 오는 식별자로 함수를 호출하지 않고, 할당한 변수명으로 호출.

function 키워드 다음에 식별자가 없는 익명 함수도 함수를 호출하는 데 아무 문제없음.

함수 표현식으로 함수를 정의할 때는 function 키워드 다음에 오는 식별자가 아니라 변수명으로 호출해야 한다는 점을 유의해야 함.

함수 표현식으로 함수를 정의할 때는 const 키워드를 주로 사용.

 

③ 화살표 함수: 화살표를 사용해 함수를 정의하는 방법.

() => {};

화살표 함수는 익명 함수로만 정의할 수 있어서 함수를 호출하려면 정의된 함수를 변수에 할당하는 방법인 함수 표현식을 사용해야 함.

 

 

---

 

10.3 함수 기능 확장하기

3-1 매개변수

함수를 정의할 때 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 정의하는 변수.

인수: 정의한 함수를 호출할 때 소괄호 안에 전달하고 싶은 데이터를 적음.

=> 함수 호출 시 전달하는 데이터 즉, 인수는 함수의 매개변수에 자동으로 할당.

// 함수 선언문
function 함수명(매개변수1, 매개변수2, ..., 매개변수N){}
// 함수 표현식
const 함수명 = function 식별자(매개변수1, 매개변수2, ..., 매개변수N){};
// 화살표 함수
const 함수명 = (매개변수1, 매개변수2, ..., 매개변수N) => {};
// 함수 호출
함수명(인수1, 인수2, ..., 인수N);

구구단 예시

function gugudan(① dan){
  for(let i = 1; i <= 9; i++){
    console.log(`${dan} * ${i} = ${dan * i}`);
  } 
}
gugudan(② 3); // 3단 출력
gugudan(② 5); // 5단 출력
gugudan(② 8); // 8단 출력
 

① 매개변수
② 인수

 

3-2 매개변수의 특징

● 명명 규칙

매개변수는 일반적으로 변수와 같다고 생각하면 됨. 변수의 특징을 그대로 가지고 있으므로 매개변수의 식별자도 변수의 식별자 명명 규칙에 따라 지어주면 됨.

● 데이터 전달

함수를 정의할 때 함께 정의한 매개변수는 함수 호출 시 전달되는 데이터와 일대일로 대응되어 데이터가 할당.

함수의 매개변수는 함수 호출 시 전달되는 데이터가 기본으로 할당 but 함수를 호출할 때 데이터를 전달하지 않는다고 해서 오류가 발생하지는 않음. 매개변수는 변수의 특징을 그대로 가지고 있음.

변수를 선언하고 값을 할당하지 않으면 undefined 값으로 초기화되는 것처럼 매개변수도 함수 호출 시 데이터를 전달하지 않으면 undefined 값이 할당되어 코드를 실행해도 오류가 발생하지 않음.

● 기본값 할당

매개변수에 직접 데이터를 할당하는 방식으로 단순하게 기본값을 지정할 수 있음.

function sum(a = 10, b = 10){
  console.log(a, b);
}
sum(); // 10, 10

 

3.3 return 문

함수 외부로 데이터를 반환할 때 , return문을 사용하면 함수 내부에서 함수를 호출한 곳으로 데이터를 전달.

return 식(또는 값)

 

function sum(num1, num2){
  let result = num1 + num2; 
  return result;
}
const result = sum(10, 20);
console.log("out: " + result); // out: 30

이와 같이 작성하면 함수 내부 변수인 result에 할당된 값, 즉 데이터가 sum() 함수를 호출한 곳으로 전달. => 이를 "반환한다"

이때 반환된 데이터를 반환값이라고 함.

return 문은 데이터를 반환하지 않으면 단순히 함수 실행을 종료하는 역할만 하게 됨.

함수 내부에서 데이터를 반환하지 않는 return 문을 만나면 return 문 다음에 코드가 있더라도 함수 실행을 즉시 종료하고 undefined를 반환함.

 

 

---

 

10.4 함수 특징 이해하기

4. 스코프

 변수나 함수와 같은 참조 대상 식별자를 찾아내기 위한 규칙

 

● 함수 스코프

함수에서 정의한 블록문만 스코프의 유효 범위로 인정하는 방식

 

선언한 변수를 함수 내부와 외부에서 각각 참조

let a = 10; // 전역 스코프
function sum(){
  console.log(`함수 내부: ${a}`);
}
sum();
console.log(`함수 외부: ${a}`);

function sum(){
  let a = 10; // 지역 스코프
  console.log(`함수 내부: ${a}`);
}
sum();
console.log(`함수 외부: ${a}`);

-----------
실행결과

함수 내부: 10
함수 외부: 10

- 전역 스코프: 함수 외부.  전역 스코프는 스코프와 상관없이 모두 참조할 수 있음.

-지역 스코프: 함수 내부에 선언한 변수 

 

● 블록 스코프

{}로 구성된 블록문 기준으로 스코프의 유효 범위를 나누는 방식. 이 방식은 let과 const 키워드로 선언한 변수에 한해서만 적용.

let a = 10;
{
  let b = 20;
  console.log(`코드 블록 내부 a: ${a}`);
  console.log(`코드 블록 내부 b: ${b}`);
}
console.log(`코드 블록 외부 a: ${a}`);
console.log(`코드 블록 외부 b: ${b}`);


---------------------------------
실행결과

코드 블록 내부 a: 10
코드 블록 내부 b: 20
코드 블록 외부 a: 10
ReferenceError: b is not defined

같은 코드를 var 키워드로만 바꿔 실행하면 참조 오류가 발생하지 않음.

 

● 참조 우선순위

let, const 키워드는 같은 식별자의 중복 선언이 불가능. (같은 스코프 영역에서)

 

 

4.2 함수 호이스팅

코드를 선언과 할당으로 분리해 선언부를 자신의 스코프 최상위로 끌어올리는 것.

함수 선언문이나 var 키워들르 사용한 함수 표현식, 화살표 함수 방식은 전부 호이스팅의 대상.

var num; // 선언부를 스코프 최상위로 끌어올림
console.log(num); // undefined 출력
num = 10;

호이스팅은 var 키워드로 선언한 변수에만 적용되고 let과 const 키워드로 선언한 변수에는 적용되지 않음.

 

 

10.5 즉시 실행 함수 사용하기

5 즉시 실행함수

함수를 정의하면서 동시에 실행까지 하는 함수

(function(){})();

 

"전역 스코프가 오염됐다"

일반적으로 함수를 선언하면 전역 스코프에 정의됨. 그리고 프로그램이 종료되기까지 전역 스코프에 선언한 함수는 메모리에서 사라지지 않음.

const init = function(){
  console.log("initialized!");
}

함수 표현식으로 정의된 init() 함수는 const 키워드에 할당했기 때문에 프로그램이 종료되기 전에는 init 식별자를 재사용할 수 없음.

그런데 이 함수는 어차피 한 번만 사용할 함수라 const 키워드 때문에 init 식별자를 더 이상 사용할 수 없게 됨.

=> 이때 즉시 실행 함수로 함수를 정의하면 전역 스코프가 오염되는 것을 방지할 수 있음.

(function init(){
  console.log("initialized!");
})();

즉시 실행 함수는 한 번 실행되고 나면 메모리에 데이터가 남아 있지 않음. 그래서 init 식별자는 한 번도 사용되지 않은 것처럼 인식됨. 실제로 즉시 실행 함수를 호출한 다음에 재호출하면 참조 오류가 발생하면서 실행되지 않음.

 

 

 

 

 

---

 

 

출처

코딩 자율학습 HTML + CSS + 자바스크립트