함수
👉입력을 받아서 출력을 내보내는 일련의 과정을 정의한 것.
🧑🏻자바스크립트 함수는 이름을 생략할 수 있다고?
결론부터 말하자면 JS에서 함수명 생략은 가능하다. 다만 무작정 생략이 가능한 것은 아닌데 오늘 그 조건에 대해서 한 번 알아볼 것이다!
함수 선언문
function Plus(x, y) {
return x + y;
};
console.log(Plus(3, 4)); //7우선 함수생략이 우째 가능한지 알아보기에 앞서 우리는 JS의 함수가 조금 특별한 함수임을 인지하고 넓은 아량으로 이해할 준비가 되어야 한다. 첫번째로 JS의 함수는 객체이다.
뭔 똥 씹어먹는 소리야 함수가 객체라니?🤷
공교롭게도 사실이다. Javascript는 V8자바스크립트 엔진에서 동작하게 되는데 이 과정에서 우리가 정의한 함수는 V8엔진에서 평가되어 함수 객체가 된다.
이해가 안간다면 함수를 장비 레시피, 자바스크립트 엔진을 대장장이라고 생각하면 쉽다. 우리가 장비 레시피를 만들어서 대장장이에게 그 레시피를 맡기면 그에 맞는 장비를 만들어준다고 생각하면 좀 쉬울거다.
(Javascript는 스크립트 언어로, integer, character, boolean, undefined를 제외한 모든 타입이 객체다. 다만 위에 4가지 타입도 사실상은 객체로 취급되기도한다. 같은 스크립트 언어인 python도 이와 같은 특징을 지닌다. 알기로는 java도 OOP로 같은 특징인걸로 아는데.. 이거 아시는분은 댓글 부탁드립니다. java는 특히 잘 모릅니다..ㅜㅜ)
함수가 객체가 되면 식별자도 없는데 함수 호출은 어떻게??
좋은 질문이다. 함수가 객체라면 식별자 없이는 호출도 불가능한 것이 사실이다.
아니 엄밀히 말하면 호출은 가능하다.(Javascript는 안된다.) 식별자가 없는 거지 메모리참조는 가능하기에 우리가 해당 메모리의 주소만 알고있다면 함수 호출은 가능하겠지? 근데 상식적으로 2의 32제곱인 최대 4,294,967,296개의 메모리 주소를 언제 다 뒤져볼 건데? 심지어 이건 32비트 운영체제 pc일 경우이고 64비트 운영체제pc라면... ㅋ.ㅋ..🤦🏻
//()로 묶어 함수를 객체로 인식 시킨후에 돌려보았다.
(function Plus(x, y) {
return x + y;
});
console.log(Plus(3, 4)); //ReferenceError: Plus is not defined
//?? Plus가 뭔데?그래서 자바스크립트 엔진은 함수 선언문을 함수 객체로 만드는 과정에서 암묵적으로 함수명을 가지고 식별자를 생성해낸다. 마치 애플스토어에서 아이폰13을 달라고 했는데 직원은 아이폰13을 모르는 것과 비슷하다.
함수 표현식
오 ㅋㅋ 그럼 함수가 객체라면 변수로 선언도 가능하겠네?
고렇지 고렇지. 변수로 선언하는 것도 당연히 가능하다. 왜냐? 함수가 객체니까 ㅎ.ㅎ
var func = function Plus(x, y) {
return x + y;
};
console.log(Plus(3, 4)); //7함수 선언문에서 자바스크립트 엔진에 의해 생성된 식별자대신에 변수명이 식별자가 되기에 엔진에서 따로 식별자를 만들 필요도 없다. 그럼 여기서 문제‼️
var Plus = function Plus(x, y) {
return x + y;
};
console.log(Plus(3, 4));여기서 Plus()는 함수명으로 호출한걸까 변수를 이용하며 함수를 호출한걸까?
정답은 '변수를 식별자로 함수를 호출했다.'이다. 앞서 말했다시피 함수 객체는 식별자가 없다. 이 이유로 함수명으로는 호출이 안되고 식별자인 변수로 호출이 되는 것. 변수명을 함수명과 다르게 해본 후, 둘 다 로그로 찍어보면 간단하게 답을 얻을 수 있다.
var plus22 = function Plus11(x, y) {
return x + y;
};
console.log(plus22(3, 4)); //7
console.log(Plus(3, 4)); //ReferenceError: Plus is not defined
//Plus? 그딴거 안키움 ㅋ익명 함수
위의 경우처럼 함수표현식에서는 함수명을 적어놔도 그만, 안적어놔도 그만이기에 함수이름을 생략할 수 있다. 이것이 바로 익명 함수이다.이거 말하려고 이딴식으로 빌드업한거냐?🤬
var plus22 = function (x, y) {
return x + y;
};
console.log(plus22(3, 4)); //7보통 함수표현식을 쓰면 이렇게 익명 함수를 많이 쓴다.
이유라하면 음.. 필자의 경우에는 그냥 가끔 뚝딱뚝딱하다가 함수 쓸 때 가끔 함수명을 적어버리는 경우가 생겨서..ㅎㅎ 고거 하나 실수 했다고 드럽게 뭐라고하더라 노트북 3끼
호이스팅
뭐야 그럼 함수 선언문이랑 함수 표현식이랑 다를게 없잖아. 그냥 식별자만 변수로 바뀐거 아님?
ㄴㄴ 그렇게 생각하면 ㄹㅇ 경기도 오산. 일단 근본부터 다르다. 함수 선언문이 아무리 함수객체가 된다고 해도 바뀌기전에는 함수라는 것, 그리고 변수에 할당된 것이 아무리 함수라고 해도 변수는 변수인 것. 이걸 강조하는 이유가 함수와 변수가 각각 메모리에 할당되는 시점이 다르기 때문이다.
console.log(Plus(3, 4)); //7
function Plus(x, y) {
return x + y;
};고퀄리티 그림과 소스코드를 같이보면 함수 호출을 함수 선언문보다 먼저 했음에도 불구하고 정상적으로 함수 호출이 되는 것을 볼 수 있다.
console.log(plus22(3, 4)); // TypeError: plus22 is not a function
//ㅇ 함수아님 ㅋ.
var plus22 = function (x, y) {
return x + y;
};하지만 함수 선언식인 경우에는 무자비하게도 함수가 아니라고 화낸다. ㅜㅜ
이런식으로 코드 실행전에 먼저 동작하는 것을 호이스팅이라고 하는데 위 두가지의 경우, 순서대로 함수 호이스팅, 변수 호이스팅이라고 한다. 일단 이것에 관련된 글은 아니므로 간단하게 Pass.
