function의 형태, 함수 선언문과 표현식 호이스팅

🔶 function

: 하나의 함수는, 하나의 return문만 갖을 수 있다.
: return이 없다면 undifined를 반환한다.

• 기본형식

/* 예제1 */
    function name(num){
    	return num;
    };
    name(2) // 2

/* 예제2 - return이 없다면? */
    function name(num){
    	console.log("abc");
    };
    name(2) // undifined

• 파라미터의 기본값 설정

    function introduce(name = '홍길동', birth = 1999) {
      console.log(`${name}`);
      console.log(`${birth}`);
    }
    
    introduce('Tom');         // Tom, 1999
    introduce('Joy', null);      // joy, null
    introduce(undefined, 2000);  // 홍길동, 2000

🔶 함수선언문, 함수표현식

함수는 크게 "함수 선언문"과 "함수 표현식"으로 만들 수 있다. (deep dive 165p 참조)

1. 함수 선언문 statement(문)

: 표현식이 아닌 문은 변수에 할당할 수 없다.

 function name () {
    	return x
    } 

2.함수 표현식 expression(식)

: 함수를 변수에 할당하여 함수를 값처럼 사용할 수 있는 함수 정의 방식.

// 예제1)
const add = function(x,y){
	return x + y;
}
console.log(add(2,5)) // 7 ← 이제 "add = 7" 인 꼴이 됨!
    
// 예제2)
btnEl.addEventListener("click", function(){ //<-함수선언을 값처럼 활용하고 있음
    consolg.log("kk");                       //  따라서 이거도 "함수표현식"임       
});

🔶 함수선언문과 함수 표현식의 호이스팅

1. 함수선언문: 호이스팅이 가능함

(※ 스코프 : 함수.변수 단위로 만들어짐)

• "모든 선언문"은 런타임 이전에 먼저 준비되기 때문에 호이스팅 됨.
• 준비단계에서 함수는 메모리까지 준비됨!!
  때문에 스코프가 먼저 준비되어 있어서 호이스팅 결과, 함수는 실행까지 되는 것임.

test1(); //aa출력, (호이스팅 가능ㅇ)

function test1(){
console.log("aa");
}

2.함수표현식: 호이스팅이 불가능.

• 변수는 호이스팅이 안되는 것 처럼 보이는 것과 같은 원리
  : 변수는 런타임 이후에 초기화가 시작되는데, TDZ(스코프 시작 지점부터 ~ 초기화 시작 지점까지는 변수를 참조할 수 없는 구간)때문에
  변수에 함수식이 할당되기 전까진 변수 값(함수)를 참조할 수 없는 것임!

test2();  //error남,호이스팅 불가능

const test2 = function(){
console.log("bb)
}

🔶 화살표 함수(arrow function)

1.화살표함수 기본형태 : 익명함수로만 됨.

(num1,num2) => { 
		return num1 + num2;
	}

2.화살표함수를 표현식으로 만들 수 있음

: 화살표 함수를 호출하기 위해서 변수에 함수를 할당하여 사용함.

const sum = (num1,num2) => { 
	return num1 + num2;
}

3.화살표 함수의 간략한 형태

1) 매개변수가 하나면 소괄호 생략하능
: 메소드도 함수여서 return을 이용해 매개변수로 반환을 해야함.
num => {return num * 2};
(num) => {return num * 2};

2) 하나의 문으로 구성되있고, 별도의 연산없이 바로 리턴하려면
: "return/중괄호" 생략가능,
num => num * 2

3) 객체 자체를 반환할 경우
: 소괄호 넣어줘야 함.
num => ({num * 2});

4.특징

1)arguments 객체가 없음.

let test1 = ()=>{console.log(arguments)} //에러남
test1(1,2,3,4,5);

2)화살표함수 내부의 this는 메서드를 호출할 때 호출한 객체를 가르키지 않고,
상위 스코프의 this를 가르키게됨.
(참조 - this , new생성자함수★★★★★)

5. 활용 예제

function name1(arr){
	let result = arr.map(ele => ele*2);
  //리턴을 이용해서 값을 map메소드로 반환한다.
  return result;
}

console.log(name1([1,2,3,4,5]));

🔶 즉시실행 함수

• 형태 : (익명함수)();

1. 예제코드

(function (x, y) {
  consoel.log(x + y);
})(3, 5);

2. 함수에 이름을 지어주더라도 외부에서 재사용할 수 없음.

(function sayHi() {
  console.log('Hi!');
})();

sayHi(); // ReferenceError

.