<!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>Document</title>
</head>
<body>
<script>
// 함수 : 기능을 저장하는 공간
/*
function 함수이름(매개변수) {
함수가 실행되면 실행될 코드 블록
} -> 함수 선언
함수이름(); -> 함수실행
필요할 때마다 함수이름을 사용해서 호출할 수 있어서 재사용성이 좋음!
*/
// function sayHello(who) {
// document.write(who + '님, 안녕하세요<br>');
// document.write('반갑습니다, 서은혜입니다<hr>');
// }
// sayHello("영희");
// sayHello("철수");
/*
예제1)
이름, 부서, 직책을 입력받아 출력하는 함수 만들기
----------------
이름 : 000
부서 : 000팀
직책 : 000
----------------
**함수 이름은 동사형으로 작명하는게 좋음
sayHello, checkAuth, playSlider 등
*/
function mailCard(name, team, position) {
// document.write('이름 :' + name);
// document.write('부서 :' + team + '팀');
// document.write('직책 :' + position);
// document.write('직책 :' + position + '<br>부서 : ' + team + '<br>직책 : ' + position);
document.write(`
<hr>
이름 : ${name}<br>
부서 : ${team}팀<br>
직책 : ${position}
<hr>
`)
}
mailCard("영희", "마케팅", "직원");
mailCard("철수", "영업", "부장");
// 함수의 선언 방법
// 1. 선언형 :
let fn1 = function() {
}
// 2. 할당형 : 변수에 익명함수를 저장하는 형태
let fn2 = function() {
console.log("변수에 할당된 형태의 함수");
}
fn2();
// 3. 즉시실행함수 : runtime(페이지가 로드되어서 처음 실행되는 시점)에서 호출 없이 바로 함수가 실행
(function() {
console.log("즉시 실행됩니다.(IIFE)");
}())
// 4. 화살표함수(ES6)
let fn3 = (arg1, arg2) => { // 매개변수가 2개 이상일 경우 () 안에 넣어서 사용
}
let fn4 = arg => { // 매개변수가 1개일 경우 () 생략해서 바로 사용 가능
}
let fn5 = arg => arg * arg;
// 중괄호를 생략하고 한 줄로 적으면 암묵전 리턴!
console.log(fn5(2)); // fn5 = 2 * 2 (결과값은 4가 나온다)
// RETURN 개념
let mul = function(arg1, arg2) {
return arg1 * arg2 // arg1 이랑 arg2를 곱한 값을 mul에 반환해라(나타내라), 리턴을 해야 정상적으로 값을 반환할 수 있다!
}
console.log(mul(2,3)); // arg1 이랑 arg2에 대입할 값을 넣기
</script>
</body>
</html>
상생하며 성장하는 퍼블리셔