선언적 함수 vs 익명 함수 vs 생성자 함수

* 함수의 매개변수 - 함수의 바디 안에서 사용할 이름을 정해줌

* 함수의 리턴 - 함수의 결과를 얻어줌(실행 시 결과값)

 

선언적 함수 생성

function 함수이름(매개변수) { 로직 }

함수도 객체의 한 종류임(표준 내장 객체)

function Hello1() {
  console.log("hello");
}
console.log(hello1, typeof hello1); // [Function: hello1] function

function Hello2(name) {
  console.log("hello2", name);
}
hello2("Mark"); // hello2 Mark

function hello3(name) {
  return `hello3 ${name}`;
}
console.log(hello3("Mark"); // hello3 Mark

 

익명함수 생성(화살표 함수는 항상 익명함수)

const 변수명 = function(매개변수) { 로직 }
const 변수명 = (매개변수) => { 로직 }

익명함수로 생성한 함수 역시 타입은 표준 내장 객체이고, 함수명은 함수가 삽입된 변수명에 해당함.

const Hello1 = function() {
  console.log("hello");
}
console.log(hello1, typeof hello1); // [Function: hello1] function

const Hello2 = function(name) {
  console.log("hello2", name);
}
hello2("Mark"); // hello2 Mark

const hello3 = function(name) {
  return `hello3 ${name}`;
}
console.log(hello3("Mark"); // hello3 Mark

// 매개변수가 1개일 경우, 괄호 생략 가능
const name = name => { console.log('hello2', name); }

// 리턴 시 중괄호 및 return 키워드 생략 가능
const hello5 = name =>`heello4 ${name}`;

 

* 선언적 함수와 익명 함수의 차이점

- 선언적 함수는 호이스팅(Hoisting)이 적용되어, 선언한 함수의 내용이 메모리에 먼저 할당된다. 때문에 함수 호출 코드 위치가 함수의 선언보다 앞쪽에 작성되어도 실행된다.

- 익명 함수는 함수의 호이스팅이 적용되지 않는다.(var는 not a function,const는 not defined 에러 발생함)

 

 

생성자 함수

const 변수명 = new Function('인자1', '인자2',...,'함수의 바디');

new 키워드 뒤에 Function

매개변수(인자) 입력 시 변수명은 문자열 형태로 입력함.

함수의 바디는 {중괄호}가 아닌 문자열 형태로 입력

const sum = new Function('a', 'b', 'c', 'return a+b+c');
console.log(sum(1,2,3)); // 6

* 익명함수와 생성자 함수의 차이점

- 생성자 함수는 지역변수를 인식하지 못하고, 글로벌 변수만 참조한다.

- 익명함수는 지역 변수를 참조한다.

 

 

함수의 다양한 사용법

생성자 함수로 새로운 객체를 만듬

- 객체 생성을 위한 함수의 함수명은 대문자로 시작

- 함수의 this는 객체로 만들어졌을 때, 객체를 가르킴

- 화살표 함수는 this를 취급하지 않기 때문에, 생성자 함수로 사용하지 않음.

function Person(name, age) {
  //this는 객체가 만들어졌을 때 객체를 가리키는 역할을 함.
  this.name = name;
  this.age = age;
}

const p = new Person('Mark', 37);
const a = new Perseon('Hanna', 36);

 

함수 안에서 함수를 만들어서 리턴

function plus(base) {
  return function(num) {
   return base+num;
  }
}

const plus5 = plus(5); // base가 5
plus5(10); //plus5가  num

 

함수를 호출할 때, 함수를 인자로 사용

function hello(c) {
  console.log('hello');
  c();
}
hello(() => console.log('콜백')); //hello 콜백

callback -함수를 호출할 때 인자로 함수를 사용 가능

파라미터(인자)로 함수를 전달받아, 함수의 내부에서 실행하는 함수

익명함수로만 사용함.

 

반복문을 활용하여 주어진 배열 안의 모든 숫자 요소들의 합을 구하는 함수

function sumOf(numbers) {
  let sum = 0;
  for(let i = 0; i < numbers.length; l++) sum += numbers[l];
  return sum;
}
const result = sumOf([1,2,3,4,5]);
console.log(result); // 15