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

1. 함수(function)

• 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문
• 함수 실행(호출) -> 함수 내부에 모아 둔 여러 줄 코드 한 번에 실행 => 재사용 편함
• 함수를 정의한다: 블록문을 function 키워드, 식별자, 소괄호와 함께 묶으면 함수 생성

---

2. 정의하는 방법

선언문/ 표현식/ 화살표 함수

함수 선언문(function declaration statement)

• function 키워드로 함수 정의하는 방법
• function 식별자(){}

=> function 키워드 다음에 오는 식별자로 함수 호출

식별자 -> 사용 용도에 따라 명칭 달라짐

ex. 변수명: 변수에 붙는 식별자/ 함수명: 함수에 붙는 식별자

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

gugudan(); // 함수 호출

---

함수 표현식(function expression)

함수: 객체에서 파생된 자료형

자료형 -> 변수에 할당할 수 있어야 함

• 네이밍 함수(naming function)
  • 변수에 할당하는 함수에 식별자 O
  • const 변수명 = function(){};
• 익명 함수(anonymous function)
  • 변수에 할당하는 함수에 식별자 X
  • const 변수명 = function 식별자(){};

=> 할당한 변수명으로 호출

함수 정의할 때는 const 키워드 주로 사용

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

// 익명 함수
const gugudan = function(){ 
  for(let i=1; i<=9; i++){
    console.log(`3 * ${i} = ${3 * i}`);
  }  
};

gugudan(); // 함수 호출

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

naming(); // 함수 호출 -> 실행 결과: ReferenceError: naming is not defined

---

화살표 함수(arrow function)

• ES6에서 추가된 함수 정의 방법
• 화살표를 사용해 함수를 정의하는 방법
• () => {};
• 익명 함수로만 정의할 수 있음
  -> 함수 표현식(정의된 함수를 변수에 할당하는 방법) 사용해서 함수 호출

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

gugudan();

함수 선언문 끝 세미콜론 X But, 함수 표현식처럼 변수에 함수가 할당 -> 문이 아닌 식으로 봐서 세미콜론 O

---

3. 기능 확장하기

매개변수와 인수/ 매개변수 특징/ return 문

매개변수와 인수

• 매개변수(parameter)
  • 함수를 정의할 때 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 정의하는 변수
• 인수(argument)
  • 정의한 함수를 호출할 때 소괄호 안에 전달하고 싶은 데이터
  • 함수의 매개변수에 자동으로 할당

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

 

변수의 특징 가지고 있음 => 함수 호출 시 데이터 전달 X -> 오류 발생 X undefinded 값(기본값) 할당

// 화살표 함수
const sum = (num1, num2) => {
  console.log(num1, num2);
};
sum(10, 20);

// 매개변수 1개일 경우 () 생략할 수 있음
const sum = num1 => {
  console.log(num1);
};
sum(10);

---

return 문

함수 외부로 데이터 반환할 때 사용

return 식(or 값)

반환값: 반환된 데이터

// 화살표 함수
// {} 생략 -> 화살표 다음에 오는 코드 return 문으로 처리
const sum = (num1, num2) => num1 + num2;
const result = sum(10, 20); // 30

---

4. 특징 이해하기

스코프/ 함수 호이스팅

스코프(scope)

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

• 함수 스코프(function scope)
  • 함수에서 정의한 블록문만 스코프의 유효 범위로 인정하는 방식
  • 함수 내부: 지역 스코프(local scope)
    • 함수 내부가 아닌 외부에서 변수 참조 -> 오류 발생
    • 지역 변수: 지역 스코프에 선언한 변수
  • 함수 외부: 전역 스코프(global scope)
    • 스코프와 상관없이 모두 참조
    • 전역 변수: 전역 스코프에 선언한 변수
• 블록 스코프(block scope)
  • ES6에서 let, const 키워드 추가 -> 블록 스코프 지원
    • let, const 키워드로 선언한 변수에 한해서만 적용
    • var 키워드 -> 함수 스코프 방식으로만 스코프 나눔
  • {}로 구성된 블록문 기준으로 스코프의 유효 범위를 나누는 방식
  • 참조 우선순위
    • 같은 식별자의 중복 선언 X == 같은 스코프 영역에서 중복 선언 X

---

함수 호이스팅

• 호이스팅: 코드를 선언과 할당으로 분리 -> 선언부를 자신의 스코프 최상위로 끌어올리는 것
• var 키워드로 선언한 변수에만 적용
• let, const 키워드로 선언한 변수에 적용 X

console.log(num);
var num = 10;

// 호이스팅 -> 아래처럼 작동
var num; // 선언부 -> 스코프 최상위로 끌어올림
console.log(num); 
num = 10;

// => 실행 결과: undefined

• 함수 선언문으로 정의된 함수 -> 호이스팅에서 선언부로 봄 => 함수 선언문 최상위로 끌어올림 
  • 화살표 함수 방식 -> 함수 표현식처럼 변수에 할당 => 함수 표현식과 같은 원리로 호이스팅
  • 함수 표현식, 화살표 함수: let이나 const 키워드로 선언 => 호이스팅 X

// 함수 선언문 방식
function printHello(){ // 함수 선언문을 최상위로 끌어올림
  console.log("Hello");
}
printHello();

// 함수 표현식 방식
printHello(); 
var printHello = function printHello(){ 
  console.log("Hello");
} 

// 실제 실행
var printHello;
printHello();
printHello = function printHello(){ 
  console.log("Hello");
}

// 실행 결과: TypeError: printHello is not a function

---

5. 즉시 실행 함수(IIFE; Immediately Invoked Function Expression)

• 함수를 정의하면서 동시에 실행까지 하는 함수
• (function(){})();
• 한 번 실행하고 나면 메모리에 데이터 남아 있지 X

함수 선언 -> 전역 스코프에 저장, 프로그램 종료 전까지 메모리에서 사라지지 X

const 키워드에 할당 -> 프로그램 종료 전에 식별자 재사용 X

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

 

=> 전역 스코프가 오염됐다: 한 번만 사용할 함수인데 const 키워드 때문에 init 식별자 더 이상 사용 X

-> 즉시 실행 함수로 정의 => 전역 스코프 오염 방지

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

---

출처

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