Introduce

본 문서는 2022년 1월 30일 에 작성되었습니다.
본 문서는 2022년 4월 17일 에 수정되었습니다.

---

Theory

컴파일 언어 인 Java 와 스크립트 런타임 언어 인 javaScript 는 다르며,
Velog - unchaptered / JS Deep Theory 를 알고 있다는 전제 하에, 두 언어의 차이를 비교하고 넘어가겠습니다.

필수적인 내용은 아니며, 어째서 JavaScript 의 함수가 매력적인지 알았으면 해서 추가 했습니다.

함수 vs 메서드 ?

Java 에서는 메서드 라는 용어만을 사용했습니다.
하지만, JavaScript 에서는 함수 라는 용어가 추가되어 섞여서 사용되는 모습을 볼 수 있습니다.

저 또한 얼마 전까지도 이를 구분하여 사용하는 것이 힘들었습니다.
간단하게 말하자면 함수 앞의 점 ( . ) 의 유무로 함수와 메서드를 구분할 수 있습니다.

1급 시민으로써의 함수 ?

일반적으로 프로그래밍 언어에서 1급 시민으로써의 함수 라는 용어를 종종 듣게 됩니다.

1. 함수의 인자로 넘길 수 있는가
2. 함수의 리턴으로 남길 수 있는가
3. 변수에 담을 수 있는가

Velog - unchaptered / Function as First Class Citizen

구분	Java	JavaScript
1번	불가	가능
2번	불가	가능
3번	불가	가능

jdk(1.8~) Functional Interface 등을 제외하고 기본적인 생태계만 전제로 작성하였습니다.

---

Syntax

JavaScript 에서 함수를 사용하기 위한 문법은 일반적으로 다음이 있습니다.

1. Function
2. Anonymous function
3. Arrow function
4. Variable function

Function

가장 일반적인 변수의 사용 방법입니다.
다음과 같은 형태로 사용할 수 있습니다.

function 함수이름(매개변수) {
  실행 내용
  
  return 은 선택 
}

Anonymous function

함수 이름이 생략된 형태의 사용 방법입니다.
일반적으로, 함수 이름이 불필요하게 많이 나오는 것을 해결하기 위해서 사용됩니다.

다음과 같은 방식으로 사용할 수 있습니다.

// 해당 객체를 클릭할 시에 anonymous function 이 실행됩니다.
document.getElementById("아이디").addEventListener("click", function () {
  실행 내용
  
  return 은 선택
});

Arrow function

화살표 형태를 하고 있는 함수입니다.
모든 부분이 다르지만 Execution Context 에서 ThisBinding 이 생략된다는 점이 다릅니다.
해당 내용을 모른다면 Velog - unchaptered / JS Deep Theory 를 참고해주세요.

document.getElementById("아이디").addEventListener("click", ()=>{
  실행 내용
  
  return 은 선택
});

Variable Function

변수 공간안에 함수를 담는 형식으로 사용된 방법입니다.
function, anonymous function, arrow function 모두 변수에 담을 수 있습니다.

this 와 관련된 이슈는 개별적으로 위 함수를 사용하는 것과 동일하게 유지됩니다.

const funcA=function funcAA() {}
const func=function () {}
const func=()=>{}