Function와 method

1. 기본 함수

1) 함수 선언식

function greet()
{
	console.log("hello!");
}

2) 함수 표현식

const greet = function greet()
{
	console.log("hello!");
}

2. 화살표 함수

화살표 함수란?

• ES6에서 새롭게 도입된 함수 정의 방식이다.
• 문법 : () => { / 함수 본문 / }

👌 비교 분석

1. 일반 함수 표현식

const add = function(a, b){
return a + b;};

2. 화살표 함수 표현식

0. 기본 형태

const add = (a,b) => {

  return a + b;

}; 

1. 화살표 함수 표현식

함수 본문이 하나의 표현식인 경우 아래와 같이 중괄호와 return 생략 가능하다.

const add = (a, b) => a + b;
console.log(add(5, 3)); // 출력값 = 8 

3. 또한 화살표 함수는 여러 개의 매개변수를 가질 수있고, 매개변수가 하나인 경우 아래와 같이 소괄호 없이 사용할 수 있다.

const greet = name => {
	console.log("hello" + name + "!")
};
greet("John"); // hello, John! 이 출력된다. 

4. 매개변수가 두 개 이상인 경우나, 매개변수가 아예 없는 경우에는 괄호를 없앨 수 없다.

const add = (a,b) => {

  return a + b;

}; 혹은
const txt = () => {
	
  console.log("hello!")
  return;

}; 

const sayHello = () => {
	console.log("hello!");
}
sayHello();
// 함수본문이 하나의 표현식인 경우, 중괄호 생략 버전
const sayHello = () => console.log("hello!");
sayHello();

🌟중요 포인트!

화살표 함수에서의 'this' 바인딩

• 본래 js의 this는 상황에 따라 다르게 바인딩된다.
  1. 전역 공간의 this : 전역 객체
  2. 메소드 호출시 메소드 내부의 this: 해당 메소드를 호출한 객체
  3. 함수 호출시 함수 내부의 this: 지정되지 않는다 ❓❗

즉, 일반 function으로 선언한 함수가 메소드로 호출되냐 함수 자체로 호출되냐에 따라 동적으로 this가 바인딩되는 반면,(함수 선언식이 내부함수에서 선언될 경우 (콜백함수, 내부함수의 내부함수)는 항상 global,window 처럼 전역객체에 바인딩 된다.) 화살표 함수는 선언될 시점에서의 상위 스코프가 this로 바인딩된다. 따라서 화살표 함수를 사용하면 내가 원하는 의도대로 바인딩 할 수 있다는것!!

const person = {}

❗함수 VS 메소드 헷갈림주의❗

const person = {
  name: "John",
  greet: function() {
    console.log(`Hello, ${this.name}`);
  },
};

위 코드를 뜯어보자.

객체 = person이고, 객체 리터럴 방식으로 작성되어 있다. 그리고 person 내부에 있는 함수인 greet의 경우 객체에 포함 된 (속해 있는) 함수이므로 "메소드" 이다.

즉, 다시 정리하자면,

<함수 vs 메소드>

둘 다 자바스크립트에서 비슷한 역할을 하지만 사용되는 방법과 속하는 객체의 위치에 따라 차이가 있다.

함수 : 독립적으로 존재하며 전역 스코프 또는 다른 함수 내에 다시 정의될 수 있다.

메소드 : 객체에 속한 함수로, 해당 객체의 "속성"으로 정의되며 해당 객체 내에서 특정 동작을 수행하는 함수를 가리킨다.

또한 name: "John" 은 객체인 person의 프로퍼티 (속성값) 이다.