💡 학습목표
1. 함수의 선언과 사용
2. 함수 표현식이란?
3. 즉시 실행 함수란?
4. 화살표 함수란? 1. 함수의 선언과 사용
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
/**
* 매개변수(parameter)
- 함수를 실행하기 위해 필요하다고 지정하는 값
- 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음
인수(argument)
- 함수를 실행하기 위해 필요하다고 지정하는 값
- 함수를 실행할 때 매개변수로 넘겨 주는 값
*/
function addNumber(a, b) {
let sum = a + b;
return sum;
}
console.log(addNumber(10, 10));
</script>
<body>
<h1>함수에 이해와 활용 1</h1>
</body>
</html>2. 함수 표현식이란?
💡 함수 자체가 식(Expression) 이기 때문에 함수를 변수에 할당하거나 함수의 매개변수로
사용할 수 도 있음 (일급 객체)<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
// 1. 매개 변수가 없는 함수 표현식을 정의하고 currentTime 변수에 할당
const currentTime = function() {
const now = new Date();
return now.toLocaleTimeString();
};
// currentTime 함수 호출
const time = currentTime();
console.log(time); // 현재 시간을 출력
// 2. 함수 표현식으로 덧셈 함수를 정의하고 add 변수에 할당
const add = function(x, y) {
return x + y;
};
// 변수 add를 사용하여 덧셈 함수 호출
const result = add(3, 5);
console.log(result); // 8
</script>
<body>
<h1>함수에 이해와 활용 2</h1>
</body>
</html>3. 즉시 실행 함수란?
자바스크립트에서 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)를 만들려면 함수를 정의하고 즉시 실행 연산자 ()로 둘러싸면 됩니다. IIFE는 함수를 정의함과 동시에 즉시 실행되며, 주로 스코프를 만들거나 전역 변수 오염을 방지하기 위해 사용됩니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
// 1 - 매개 변수가 없는 즉시 실행 함수
(function() {
// 함수 내부 코드
const message = "이 함수는 즉시 실행됩니다.";
console.log(message);
})();
// 2 - 매개 변수가 있는 즉시 실행 함수
(function(name) {
// 함수 내부 코드
console.log("안녕하세요, " + name + "님!");
})("홍길동");
</script>
<body>
<h1>함수에 이해와 활용 3</h1>
</body>
</html>- 화살표 함수란?
💡 화살표 함수 (Arrow Function)
ES6 이후 버전에서 => 표기법을 사용해서 함수 선언을 간단하게 작성
일반 함수 표현식보다 간결하고 짧은 문법을 제공하며 주로 익명 함수로 사용됩니다.
화살표 함수는 주로 함수 내부에서 this 컨텍스트가 고정되는 특성을 가지고 있습니다.
주의) 2번째 예제에서 알아 봅시다.
함수 내부에서 this 컨텍스트가 고정되는 특성이란
- 화살표 함수와 일반 함수 표현식 간의 주요 차이 중 하나입니다.
- 화살표 함수는 함수를 정의할 때, 함수가 선언된 위치에서의 this 컨텍스트를 상속받습니다.
이것은 함수 내부에서 this 키워드를 사용할 때, 해당 함수가 아닌 외부 함수나 객체의
this 값을 사용한다는 것을 의미합니다.예제 1
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
// 1 - 매개 변수 2개를 선언한 화살표 함수 선언 및 변수에 할당
const add = (x, y) => {
return x + y;
};
// 2 - 매개 변수 1개를 선언한 화살표 함수 선언 및 변수에 할당 - 괄호 생략 가능
const square = x => {
return x * x;
};
console.log(add(10, 20));
console.log(square(10));
/////////////////////////////////////
// 주의! 괄호가 없다면 화살표 함수를 호출하는 것이 아니라 함수 자체를 출력하게 됩니다
// 즉, 함수를 문자열로 표시하는 것
console.log(add);
console.log(square);
</script>
<body>
<h1>함수에 이해와 활용 4</h1>
</body>
</html>예제 2 - 심화
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
// 일반 함수 표현식
const obj1 = {
value: 42,
getValue: function() {
return this.value;
}
};
// 화살표 함수
const obj2 = {
value: 42,
getValue: () => {
return this.value; // this 전역 스코프를 가리킴
}
};
console.log(obj1.getValue()); // 42
console.log(obj2.getValue()); // undefined // 전역 스코프에 value 라는 변수는 없음
// console.log(value) <-- 전역 스코프에서 변수가 선언 되어 있지 않음
</script>
<body>
<h1>함수에 이해와 활용 4</h1>
</body>
</html>화살표 함수의 특성 중 하나는 함수 내부에서 this가 상위 스코프(함수가 호출되는 context)의 this를 가리키지 않고, 함수가 정의된 시점에서의 this를 유지한다는 것입니다.
따라서 위의 코드에서 getValue 함수 내부에서 this.value를 사용하려고 하면, this는 함수가 정의된 시점에서의 this를 참조하게 됩니다. 이 경우, obj2 객체 내부에서 정의된 것이 아니라 전역 스코프에서 정의된 함수이므로, this는 전역 객체를 가리키게 됩니다. 전역 스코프에는 value 변수가 정의되어 있지 않으므로 this.value는 undefined를 반환합니다.
이런 이유로 화살표 함수를 객체의 메서드로 사용할 때는 this를 사용하여 객체의 속성에 접근하는 것이 올바른 동작을 얻기 위해선 일반 함수 표현식을 사용하는 것이 더 적합합니다.
// 일반 함수 표현식
const obj1 = {
value: 42,
getValue: function() {
return this.value;
}
};! 주의 !
💡 let sum = (a, b) => return a + b; // 문법 오류
// return 키워드를 사용할 려면 반드시 중괄호를 붙어 사용하자.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
//let sum = (a, b) => return a + b; // 문법 오류
let sum1 = (a, b) => {return a + b} // 리턴 키워드 사용시 {} 사용
let sum2 = (a, b) => a + b; // 중괄호와 리턴 키워드 생략
console.log(sum1(10, 10));
console.log(sum2(20, 20));
</script>
<body>
<h1>함수에 이해와 활용 4</h1>
</body>
</html>요약
매개변수와 인수에 대한 용어를 확실히 구분하고 함수를 변수에 담을 수 있다는 개념과 일반 함수 표현식보다 간결하고 짧은 문법을 사용하고 싶다면 화살표 함수를 사용해 보자.
