[모각코 23-1] 6회차- 자바스크립트에서 함수는 일급시민이다.

자바스크립트에서 함수는 일급시민이다.

 

일급시민이 뭔데?

1급 시민은 ...
- 변수에 함수를 대입할 수 있어야 한다.
- 함수를 다른 함수에 인자로 넘길 수 있어야 한다.
- 함수에서 함수를 생성하여 반환할 수 있어야 한다.

자바스크립트에서 함수는 객체이기도 하고, 값이기도 하다.

 

자바스크립트의 함수표현식 (목차)

1. 함수를 변수에 할당해서 사용하기

2. 즉시 실행 함수

2. 화살표 함수

3. 콜백() 함수

---

함수를 변수에 할당해서 사용하기

let sum = function(a,b) {
  return a + b ;
}
console.log(`함수 실행 결과: ${sum(10,20)}`);

sum 은 변수인데 함수처럼 뒤에 파라미터를 받으며 사용되는 것을 할 수 있다.

또한 함수를 파라미터로도 넣을 수 있다.

return 값으로 또다른 함수를 반환할 수 도 있다.

 

=> 1급 시민 함수!

 

화살표 함수

화살표?

ES6 버전부터는 => 를 사용하여 함수를 더 간단하게 선언 할 수 있다.

화살표 함수는 함수 표현식을 사용할 경우에만 사용할 수 있다.

 

(1) 매개변수가 없을때

let hi = function() {
  return `안녕하세요?`;
}

let hi = () => { return `안녕하세요?`; }

let hi = () => `안녕하세요?`
실행할 명령이 한줄이면 중괄호 생략 가능!
한줄 명령에 return문이 있다면 return도 생략 가능!

(2) 매개변수가 있을때

let hi = function(user) {
  console.log(`&{user}님, 안녕하세요?`);
}
hi("홍길동");

let hi = user => console.log(`&{user}님, 안녕하세요?`);
hi("홍길동");

매개변수가 하나일때는 = = 사이에 소괄호 없이 한줄로 쓸 수 있다.

let sum = function(a,b) {
  return a + b;
}
sum(10,20);

let sum = (a,b) => a + b;
sum(10,20);

매개변수가 2개 이상일때는 매개변수가 없을때와 같이 =()= 을 사용하고, 소괄호 안에 파라미터를 넣어준다.

 

콜백(call-back) 함수

콜백함수란,

다른 함수의 인자로 사용하는 함수이다.

뭐라고? 싶겠지만

addEventListener() 함수를 본적이 있을 것이다.

const bttn document.querySelector("button");

function display() {
  alert("클릭했습니다.");
}

bttn.addEventListener("click", display)

addEventListener() 함수 안에 display() 함수가 인자로 들어간다는 말이 그 말이다.

이때 display 뒤에 괄호가 없다는 점을 기억하자.

 

+ 화살표 함수를 이용하여 함수안에 직접 콜백함수를 작성해서 실행할 수 있다.

const bttn = document.querySelector("button");

bttn.addEventListener("click", () => {
  alert("클릭했습니다.");
});