함수 다시 한번 보기

✅ function

function num(a, b) {
    return a + b
}

num(3, 4)  // 7

함수는 코드 조각의 모임으로 코드를 모아놓은 저장창고 역할을 한다. 함수와 메서드에 입력 변수이름인 parameter(매개변수)  와 함수와 메서드에 실제 입력되는 값인 argument(전달인자, 인수)가 있으며  return으로 값을 반환받는다. 함수는 return구문 을 만나면 종료된다.

return문이 없거나 return 지시자만 있는 함수는 undefined를 반환
return문이 없는 함수도 무언가를 반환합니다. undefined를 반환

function fun() {
    console.log('hello1');
    console.log('hello2');
    return
    console.log('hello3');
    console.log('hello4');
}

fun();  // hello1 , hello2 까지만 반환 후 return을 종료

 

 

📍 아규먼트수에 따른 함수의 반환값

함수에 전달되는 argument(인자)는 parameter(매개변수) 보다 작거나 많아도 에럴를 발생하지 않는다.

인자를 매개변수의 수에 맞지않게 입력하거나 임의로 자리를 지정해도 순차적으로 들어가고 비는 값은 undefined를 반환한다.

function fun(a, b, c){
    console.log(a);
    console.log(b);
    console.log(c);
}

// 인자를 다 입력했을때
fun(10, 20, 30); // 10, 20, 30

// 인자를 부족하게 입력했을때
fun(10, 20)// 10, 20, undefined

// 인자를 초과하여 입력했을때
fun(10, 20, 30 ,40) // 10, 20 ,30

// 임의로 자리를 입력해줬을때
fun(b = 10, c = 20) //  10, 20, undefined

만약 함수에 인자를 입력하지 않는다면 기본 값을 지정해줄 수 있다.

function fun(a = 10, b = 20, c = 30){
    console.log(a);
    console.log(b);
    console.log(c);
}

fun() //  각각 undefined 대신 10, 20, 30 을 반환한다.

 

함수는 한번에 한작업에만 집중하는 것이 좋고 읽기 쉽고 어떤 동작인지 알 수 있게 함수명을 정하는게 좋다
ex)
showError // 에러를 보여줌, getName // 이름을 얻어옴, creatUserDate // 유저 데이터 생성, checkLogin // 로그인 여부 체크

 

📍 함수 선어문 vs 함수표현식

// 함수 선언문
function a() {
	console.log('Hello')
}

// 함수 표현식
let sayHello = function(){
	console.log('hello')
}

함수는 선언문과 표현식의 사용방법과 실행, 동작 방법은 동일하지만 작성 방법만 다르다 왜 다를까? 바로 호출할 수 있는 타이밍이다.

• 함수 선언문 :  호이스팅으로 어디서든 호출 가능 / 구문(Statement)으로 구성 / 일반 함수
• 함수 표현식:  코드에 도달하면 생성 / 제목 없이 선언하여 값으로 할당하는 표현식(Expression) / 익명함수
  * 익명함수는 재사용 하지 않는, 한번만 사용할 수 있어 따로 함수의 이름을 갖지 않는다. 리터럴 방식으로 변수에 담겨 사용하는 함수       이기도 하다.

구문이란? 자바스크립트의 명련문. 어떤 작업을 수행하기 위한 코드블럭 ex) if문, switch문, for문 등등
표현식이란? 값으로 평가될 수 있는 것, 위에서 함수 표현식이란 함수를 값처럼 사용하기 때문에 그렇게 표현 ex) 숫자, 문자, 연산자

🧨
함수가 이름을 갖는것과 변수에 저장되는 것(리터럴 방식)은 큰 차이점이 있다. 일반 함수의 경우 함수 전체가 맨 위로 올라가(호이스팅) 함수 호출이 어디서 일어나서 상관없지만 리터럴 방식으로 사용되는 익명 함수의 경우 호이스팅 시 함수를 담는 변수 선언부만 위로 올라가고, 익명 함수 자체는 변수가 호출 되었을 때 실행되기 때문에, 선언부가 호출 위치보다 위에 있어야한다.

 

📍 화살표 함수

함수는 선언 시 function 키워드를 화살표 기호로 대체해서 생략할 수 있습니다. 화살표 함수의 장점은 함수를 더 짧고 간결하게 작성할 수 있다는 것이다.

// 화살표 함수


let add = function(num1, num2){
  return num1 + num2;
}

// 위 코드에 화살표를 쓰면 'function' 을 없애고 화살표 생성
let add = (num1, num2) => {
  return num1 + num2;
}

// 코드 본문이 한 줄이고 return문이 있다면 return 은 {} 대신 ()로 바꿀수 있음
let add = (num1, num2) => (
  num1 + num2;
)

// return 문이 한줄이라면 ()도 생략할 수 있음
let add = (num1, num2) => num1 + num2;

// + 함수의 인수가 1개라면 ()를 생략할 수 있음
let sayHello = name => `Hello ${name}`;

// 그러나 인수가 없는 상황이면 ()를 생략할 수 없음
let showError = () => {
  alert('error');
}

// + return 문이 있더라도 return 전에 여러줄의 코드가 있다면 {} 생략 불가능
let add = function(num1,num2){
  const result = num1 + num2;
  return result;
}

📍 콜백 함수

js에서 함수는 object라고 한다. 그래서, 함수는 다른 함수의 인자로 쓰일 수도 어떤 함수에 의해 리턴될 수도 있다. 이런 함수를 고차 함수라고 한다. 결국, 인자로 넘겨지는 함수를 콜백 함수라고 한다. 다른 용도로는 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을때 시스템에서 호출하는 함수이기도 하다.

function callback(){
    console.log('이게 callback함수 입니다')
}

function fun() {
    callback();
}

fun(callback) // '이게 callback함수 입니다'

 

📍 즉시 실행 함수

함수를 정의하자 마자 실행하는 것을 말한다.

(function fun(){
	console.log('함수를 선언하자마자 실행!');
})()


// 클릭 이벤트
(function() {
	document.querySelector(".btn").addEventListener("click", function(){ 
	console.log('click!')
	});
})();