함수 선언 (함수 정의)
: function 예약어를 사용하고, { }안에 실행해야 할 명령어를 작성
함수 선언시 주의해야 할 것 !
함수 호출 시 HTML 요소 중 렌더링이 완료되기 전에 호출하는 코드를 실행한다면 요소를 찾을 수 없어 오류가 발생한다.
함수 호출 (함수 실행)
: 함수 이름을 사용해서 함수를 실행
let과 const
let - 프로그램 안에서 값이 변할 수 있는 변수
const - 프로그램 안에서 값이 변하지 않는 상수
매개변수(parameter)와 인수(argument) 차이점
매개변수 (parameter)
- 함수를 실행하기 위해 필요하다고 지정하는 값
- 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음
function addNumber(a, b) { // 매개변수
let sum = a + b;
return sum;
}
인수 (argument)
- 함수를 실행하기 위해 필요하다고 지정하는 값
- 함수를 실행할 때 매개변수로 넘겨주는 값
addNumber(12, 10); // 인수
익명 함수
: 이름이 없는 함수
함수 자체가 표현식(Expression)이기 때문에 함수를 변수에 할당하거나 함수의 매개변수로 사용할 수 있음. (일급 객체)
익명 함수 예제
// 익명 함수
// 이름 없음.
<script>
let add = function(a, b) {
return a + b;
}
console.log(add); // add 함수 자체가 출력
console.log(add(10, 10)); // 20
</script>
즉시 실행 함수
: 정의되자마자 즉시 실행되는 함수
<script>
// 즉시 실행 함수 (괄호로 감쌈)
let result2 = (function() {
return 10 + 10;
})();
console.log(result2); // 20
// 에러 즉시 실행 함수가 실행되었기 때문에 result2는 함수식이 아니라 변수에 값이 담긴 상태
// console.log(result2());
</script>
<script>
// 즉시 실행 함수에 매개변수와 인수를 사용하여 코드를 작성하기
const result = (function(a, b) {
return a + b;
})(100, 200);
console.log(result); // 300
</script>
화살표 함수
ES6 이후 버전에서 '=>' 표기법을 사용해 함수 선언을 간단하게 작성 (자바의 람다식과 흡사)
<script>
// 익명 함수
const hi = function() {
return "반갑";
}
console.log(hi); // 표현식 출력
console.log(hi()); // 반갑 출력
const hi2 = () => {
return "옹";
}
console.log(hi2);
console.log(hi2());
/*
화살표 함수를 사용할 때 리턴 키워드 생략 여부
const hi2 = () => {return "옹"}
const hi2 = () => "옹";
매개변수가 있는 경우
let sum = (a, b) => a + b;
!!! 화살표 함수를 쓸 때 return 키워드를 사용하면 반드시 { }를 붙여줘야 함.
*/
// 매개변수가 있는 경우
let sum = (a, b) => a + b;
console.log(sum(1, 1));
</script>→ 화살표 함수를 사용할 때 리턴 키워드를 사용하면 반드시 { }를 붙여줘야 함.
함수 사용 예제
<body>
<div>
<label for>원래 가격 : </label>
<input type="text" id="originPrice"> 원
</div>
<div>
<label for>할인율 : </label>
<input type="text" id="rate"> %
</div>
<button onclick="showPrice()">할인된 가격 계산</button>
<script>
function showPrice() {
// .value : input 태그의 값(value) 갖고 옴
let originPrice = document.querySelector("#originPrice").value;
let rate = document.querySelector("#rate").value;
let calcPrice = originPrice * (rate / 100);
let resultPrice = originPrice - calcPrice;
// 백틱 ` 을 이용해서 간편하게 값을 가져올 수 있다.
// 숫자 + "문자"
// innerHTML : 이 요소 안에 HTML을 넣고 싶다면
document.querySelector("#showResult").innerHTML =
`상품의 원래 가격은 ${originPrice}이고, 할인율은 ${rate}%입니다.
할인된 금액은 ${calcPrice}원을 적용하여, ${resultPrice}에 구매 가능합니다.";
}
</script>
<!-- 파싱의 순서에 따라 버튼을 버튼을 누르면 실행이 되기에 밑에 써도 됨 -->
<div id="showResult"></div>
</body>→ 백틱 ` 을 이용해 쉽게 사용 가능
'프로그래밍 > JavaScript' 카테고리의 다른 글
| JavaScript_객체 (0) | 2023.05.07 |
|---|---|
| JavaScript_이벤트 (0) | 2023.05.07 |
| JavaScript_자료형 (0) | 2023.05.07 |
| JavaScript_컴파일러 VS 인터프리터 (0) | 2023.05.07 |
| JavaScript_.querySelector와 .innerHTML (0) | 2023.05.07 |
