- this
- return
- 매개변수
- 화살표함수
- 콜백함수
1) this
this는 자기 자신을 의미한다.
<script>
function make(menu) {
alert(`${menu}를 선택하셨습니다.`);
};
</script>
</head>
<body>
<h2>
커피 주문
</h2>
<p>
<!-- this : 자기 자신 -->
<input type="button" value="아메리카노" onclick="make(this.value)">
<input type="button" value="바닐라라떼" onclick="make(this.value)">
<input type="button" value="밀크쉐이크" onclick="make(this.value)">
<input type="button" value="그린티라떼" onclick="make(this.value)">
</p>
</body>
make 함수의 변숫값을 자기 자신의 value로 지정했으므로 각 value값에 따른 alert창이 뜨게 된다.
2) 매개변수
function make(x, y) { //매개변수 지역변수 {} 스코프 안에서 사용
console.log(`x: ${x}, y: ${y}`);
let result1 = 0; //지역변수, {} 스코프 안에서만 사용
let result2 = 0;
// if문 처리
// undefined가 아니면 result에 x값을 더해서 출력
if (x != undefined) {
result1 = result1 + x
console.log(`${result1}`);
}
// if문 처리
// undefined가 아니면 result에 y값을 더해서 출력
if (y != undefined) {
result2 = result2 + y
console.log(`${result2}`);
}
console.log(`=============`);
}
make();
make(100);
make(100,200);
x: undefined, y: undefined
=============
x: 100, y: undefined
100
=============
x: 100, y: 200
100
200
=============아래 make에서 첫 번째와 두 번째는 x, y 를 할당하지 않았으므로 각각 undefined가 출력되었다.
function make(x = 1, y = 10) { //매개변수 초기화
console.log('==========================')
console.log(`x: ${x}, y: ${y}`);
console.log('==========================')
}
make();
make(100);
make(100,200);
==========================
x: 1, y: 10
==========================
==========================
x: 100, y: 10
==========================
==========================
x: 100, y: 200
==========================make함수를 정의할 때 매개변수 x와 y의 초기값을 넣으면 값이 없는 함수를 호출할 때 출력 되게 된다.
3) return
<script>
function sum (x, y) {
let result = x + y;
return result;
}
let x1 = sum(10, 20);
document.write(`합: ${x1} <br>`);
function sub(x, y) {
let result = x - y;
return result
}
let x2 = sub(20, 30);
document.write(`차: ${x2} <br>`);
function mul(x, y) {
let result = x * y;
return result
}
let x3 = mul(10, 20);
document.write(`곱: ${x3} <br>`)
function div(x, y) {
let result = x / y;
return result
}
let x4 = div(10, 20);
document.write(`몫: ${x4} <br>`)
function mod(x, y) {
let result = x % y;
return result
}
let x5 = mod(10, 3);
document.write(`나머지: ${x5} <br>`)
</script>
return을 사용해 함수의 결과값을 저장하게 되면 변수의 값을 넣고 호출하게 되면 그에 따른 result 값을 출력하게 된다.
<script>
function sum (x, y) {
let result = x + y;
document.write(`${result}`);
return result;
}
let x1 = sum(10, 20);
document.write(`${x1} <br>`);
document.write(`${sum(20,30)} <br>`);
sum(20,30)
</script>
* 추가로 세번째 document처럼 함수를 호출할 수 있고 sum(x, y)로도 호출 가능하다.
그리고 함수를 정의할 때 return을 만나게 되면 그 아래로는 의미가 없게 되기 때문에 주의해야 한다.
3) 화살표함수
function make1() {
alert('실행문');
}
make1()
<!-- 화살표 함수 -->
선언 후 아래에서 호출
const make1 = () => {
alert('실행문');
}
make1()function을 사용해 함수를 만들어도 되지만, 아래와 같은 화살표 함수를 많이 사용하니 자주 익혀두라고 배웠다.
* const 외에 let도 가능하지만 함수를 따로 수정할 것이 아니기에 재정의 불가능한 const를 사용한다고 한다.
4) 콜백함수
값이 함수가 되고 매개변수는 함수를 받는 변수가 되는 함수이다.
const make=(call)=>{
for (let i = 0; i < 5; i++) {
call();
}
}
make(function() {
document.write('함수호출 <br>');
})
make 안에 함수호출을 출력하는 function 익명 함수를 정의하고, 다시 make 함수를 정의하면 아래에서 만든 function 함수가 호출되게 된다.
const add = (x, y) => x + y;
function addResult(call) {
document.write(`두 수의 합 : ${call}`)
}
addResult(add(10, 20));
* function add (x, y) { return = x + y;}
const add = (x, y) => x + y; 화살표 함수와 return을 생략해 이처럼 쓸 수도 있다.
<script>
const add=(x, y, call)=> {
call(x + y);
}
const addResult=(sum)=> {
document.write(`두 수의 합 : ${sum}`);
}
add(30, 20, addResult);
</script>