(JavaScript) 3. 함수 (Function)

3.1 함수 선언

• 익명 함수

function() {
}
이름이 없다는 것! 변수에 할당해서 사용

let 함수 = function(){
	alert('hi');
}

이런식으로 사용

• 일반 함수

function add(a, b) {
    return a + b;
}
console.log(add(2, 3)); // 5

• 식별 우선 순위

<script>
	// 함수를 선언합니다.
	함수=function () {
		alert('함수_A');
	};
	function 함수() {
		alert('함수_B');
	}
	// 함수를 호출합니다.
	함수();
</script>

결과는 ‘함수_A’ 변수에 선언한게 먼저 식별됨. 하지만 이렇게 선언하는 것은 좋은 코드가 아님

• 매개 변수

<script>
	 // 함수를 선언합니다.
	 function f(x) {
		 return x * x;
	 }
	 // 함수를 호출합니다.
	 alert(f(3));
</script>

javascript는 함수의 매개변수의 갯수를 신경안씀

f(); f(3,4,5); 도 실행은 됨

f()는 undefined값이 들어감 f(3,4,5) 같은 경우엔 4,5 는 짤리고 3만 인식 됨

---

3.2 화살표 함수 (ES6)

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

 

이거 많이 쓰는 연습 중! 코드가 조금 더 짧고 간결한 느낌!

---

3.3 기본 매개변수

function greet(name = "Guest") {
    console.log("Hello, " + name);
}
greet(); // Hello, Guest

함수 중에 함수 선언문 vs 함수 표현식

• 호이스팅이 되냐 안되냐
  • 호이스팅 : javascript에서 함수 호출을 어디서 해도 가능
  • 함수 선언문으로 만든 함수는 호이스팅 O
  • 함수 표현식으로 만든 함수는 호 이스팅 X

sayHello()// 얘는 가능
sayHello2() // 이러면 호이스팅 실패

// 함수 선언문
function sayHello() {
  console.log('안녕하세요');
}

// 함수 표현식
const sayHello2 = function () {
  console.log('안녕하세요 2');
};

// 화살표 함수
const sayHello3 = () =>{
	console.log('안녕하세요 3');
}

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음
화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴

3.4 콜백 함수

//함수를선언합니다.
function callTenTimes(callback) {
	for (let i = 0; i < 2; i++) {
		callback();
	}
  //함수를호출합니다.
  callTenTimes(function () {
     alert('함수호출');
});

함수를 매개변수로 사용

다른 변수들과 사용할 때 규칙까진 아니지만 편하게 맨 뒤에 쓰기로 했다고 함

callTenTimes(num,arr,x,y,function()) //이런식으로