함수 선언문 vs 함수 표현식

함수 표현식: 이름이 없는 함수를 만들고 변수를 선언해소 함수를 할당 하는것

* 기존 함수 선언문과 실행하는 방식과 동장하는 방식 사용하는 방식이 다 같음

<출처> https://www.youtube.com/watch?v=KF6t61yuPCY 코딩앙마 중 이미지

 

함수 선언문과 함수 표현식의 가장 큰 차이

함수 선언문은 어디서든 호출이 가능하다는 점! 아래 그림처럼 순서를 바꿔도 동작함  그러나 원래 자바스크립트는 위에서 부터 아래로 실행되므로 원래는 아래 그림같은 순서로는 동작할 수 없다. 그렇 함수는 어떻게 어디서든 호출이 가능할까?

 

<출처> https://www.youtube.com/watch?v=KF6t61yuPCY 코딩앙마 중 이미지

 

바로 호이스팅(hoisting) 자바스크립트는 실행전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해 놓기 때문에 함수를 사용할 수 있는 범위가 넒어지는 것이다. 여기서 주의 할 점은 함수 선언문이 위로 올라가는게 아니라는점

<출처> https://www.youtube.com/watch?v=KF6t61yuPCY 코딩앙마 중 이미지

반며에 함수 표현식은 위에 처럼 동작하지 않음 자바스크립트가 위에서부터 읽으면서 실행하고 해당 코드에 도달해서야 함수를 생성하고 사용가능해짐

<출처> https://www.youtube.com/watch?v=KF6t61yuPCY 코딩앙마 중 이미지

 

 

화살표 함수 (arrow 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;
}

 

생성자 함수

비슷한 객체를 여러번 만들어야 할때 사용 (ex. 상품들, 회원들) 생성자 함수는 보통 첫글자를 대문자로 해서 함수를 만들어줍니다.

보통 생성자 함수는 붕어빵 틀을 의마하고(필요한 재료를 넣어 찍어내는 것) 생성된 객체들은 붕어빵들임

 

생성자 함수라고 해서 특별한건 없음 어떤 함수라도 new를 붙이면 알고리즘이 동작함 단, 생성자 함수임을 알려주기 위해 첫글자를 대문자로 하는게 관례.

function Items(name, price){// 첫 글자는 대문자
  // this = {}  > 'new'를 붙여 실행하는 순간 옆 코드 대로 알고리즘이 동작함
  this.name = name;
  this.price = price; //삼풍명과 가격을 인자로 받아서 this에 넣음
  // return this;  > 'new'를 붙여 실행하는 순간 옆 코드 대로 알고리즘이 동작함
}

let item1 = new Items('커피원두', 4500); //new 연산자를 활용해 함수를 호출
console.log(item1); // {name: '커피원두', price: 4500} 객체 출력