728x90
반응형
SMALL
1. 화살표 함수(arrow function expression)란 ❓
- function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
- this나 super에 대한 바인딩이 없고, methods로 사용될 수 없음
- Constructor(생성자)를 사용할 수 없음
- 화살표 함수는 항상 익명
2. 함수의 표현
2-1. 매개변수가 없을 경우
// => 사용
// 표현1
const 함수명 = () => {
함수가 호출되었을 때 실행될 문장;
...
}
// 표현2
const 함수명 = () => 함수가 호출되었을 때 실행될 문장;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화살표 함수</title>
</head>
<body>
<h2>화살표 함수</h2>
<script>
const func1 = () => console.log('안녕하세요 자바스크립트!')
func1()
const func2 = (x, y) => console.log(`두 수의 합: ${x+y}`)
func2(10,3)
</script>
</body>
</html>
2-2. 매개변수가 있을 경우
// 표현1
const 함수명 = (매개변수1, 매개변수2..) => {
함수가 호출되었을 때 실행될 문장;
...
}
// 표현2
const 함수명 = (매개변수1, 매개변수2..) => 함수가 호출되었을 때 실행될 문장;
2-3. 매개변수가 1개인 경우
- 소괄호를 생랼할 수 있음
const 함수명 = 매개변수1 => 함수가 호출되었을 때 실행될 문장;
...<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화살표 함수</title>
</head>
<body>
<h2>화살표 함수</h2>
<script>
//매개변수가 1개 (소괄호 생략가능)
const func3= x => x*x
const result = func3(10);
console.log(`10의 제곱: ${result}`)
const func4 = (x, y) => {
let sum = 0;
for(let i=x; i<=y; i++){
sum += i;
}
return sum;
}
const total = func4(1, 100);
console.log(`1부터 100까지의 합: ${total}`)
</script>
</body>
</html>
✅ 나이를 입력받아 성인 구별 프로그램을 화살표 함수로 작성해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화살표 함수</title>
</head>
<body>
<h2>화살표 함수</h2>
<script>
let age = prompt('나이를 입력하세요')
const isAdult = (age > 19) ? () => console.log('성인입니다'): () => console.log('미성년입니다');
isAdult();
</script>
</body>
</html>
728x90
반응형
LIST
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 상속과 프로토타입(Prototype) (0) | 2023.04.11 |
|---|---|
| [JavaScript] 객체(Object)란? & 객체 생성 표기법 (0) | 2023.04.11 |
| [JavaScript] 호이스팅(Hoisting)이란? & 함수 선언문과 함수 표현식에서의 호이스팅 (0) | 2023.04.11 |
| [JavaScript] 사용자 정의 함수(function) - 함수 선언과 함수 호출 (0) | 2023.04.11 |
| [JavaScript] 배열(Array)이란? & 자바스크립트 배열의 특징, 배열 객체 메소드, 배열 객체와 for문 (0) | 2023.04.11 |
