함수 선언(함수정의)
function 예약어를 사용하고, { } 안에 실행해야 할 명령어를 작성
함수 호출(함수 실행)
함수 이름을 사용해서 함수를 실행
함수 선언은 어디에 두어야 할까.
addNumber();
function addNumber {
....
}
addNumber();
함수 호출 시 HTML 요소 중 렌더링이 완료 되기 전에 호출하는 코드를 실행 한다면
요소를 찾을 수 없어 오류가 발생 합니다.
let 과 const
let - 프로그램 안에 값이 변할 수 있는 변수
const - 프로그램 안에서 값이 변하지 않는 변수
변수의 스코프
호이스팅 없음
변수의 재선언 불가 - 같은 스코프 안에 같은 변수를 다시 선언할 수 없음
매개변수(parameter) 와 인수(argument) 차이점
매개변수
- 함수를 실행하기 위해 필요하다고 지정하는 값
- 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음
function addNumber(a, b) {
let sum = a + b;
return sum;
}
인수(argument)
- 함수를 실행하기 위해 필요하다고 지정하는 값
- 함수를 실행 할때 매개변수로 넘겨주는 값
addNumber(19, 10);
익명 함수
이름이 없는 함수
함수 자체가 식(Expression) 이기 때문에 함수를 변수에 할당하거나 함수의 매개변수로
사용할 수 도 있음 (일급 객체)
<script>
let add = function(a, b) {
return a + b;
}
console.log(add); // add는 함수 자체가 식(표현식) 이다
console.log(add(10, 10)); // 함수 호출은 괄호 + 모양 맞추기
console.log(add(20, 20));
</script>
즉시 실행 함수
<script>
// 즉시 실행 함수
let result2 = (function() {
return 10 + 10;
})();
console.log(result2);
// console.log(result2());
// 즉시 함수가 실행 되었기 때문에
// result2 함수식이 아니라 변수에 값이 담긴 상태
</script>
화살표 함수
ES6 이후 버전에서 = > 표기법을 사용해서 함수 선언을 간단하게 작성
<!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>
const hi = function(){
return "반가워";
}
console.log(hi);
console.log(hi());
console.log("----------")
const hi2 = () => {return "야 반가워"}
console.log(hi2);
console.log(hi2());
/*
화살표 함수를 사용할때 리턴 키워드에 생략 여부
const hi2 = () => {return "야 반가워"}
const hi2 = () => "야 반가워";
let sum = (a,b) => {return a+b}
let sum = (a,b) => a+b;
*/
let ms = () => {return "반가워"}
let ms2 = () => "반가워2"
let sum = (a,b) => {return a + b}
let sum2 = (a,b) => a + b
console.log(ms);
console.log(ms());
console.log(ms2);
console.log(ms2());
console.log(sum);
console.log(sum(20,30));
console.log(sum2);
console.log(sum2(10,20));
</script>
</body>
</html>
