JavaScript 함수 작성 방법

function func() { }
const func =  () => { };

---

자바스크립트 함수 작성 방법

함수 작성하는 방법을 총 3가지로 분류했다.

 

1. 함수 선언문 (Function Declaration)

2. 함수 표현식 (Function Expression)

3. 화살표 함수 (Arrow Function)

 

그 밖에 추가적인 내용은 포스팅에 담도록 할 예정이다.

 

함수 선언문(Function Declaration)

• 가장 기본적인 함수 작성 방법으로, `function 함수명() { }`을 사용하며 함수 선언문을 통해 함수를 정의하고 어디서든 호출 가능하다.
  • 함수 호이스팅이 일어난다. →함수 선언 전에 호출 가능.

example() // 함수 호이스팅 

function example() {
	console.log('Function Declaration');
}

변수호이스팅

https://1000sang-dev.tistory.com/32

JavaScript 변수, 함수 정의 및 사용

해당 포스팅을 참고하도록 하자.

---

함수 표현식 (Function Expression)

• 함수를 변수에 할당하는 방식으로, 함수 선언과 달리 변수 호이스팅만 일어나며 함수는 선언 이후에만 사용할 수 있다.

표현식 = 식별자(변수) + 연산자(=) + 리터럴(함수)

• 함수 선언문: 함수 호이스팅 발생 → 함수 선선언(정의)
• 함수 표현식: 변수 호이스팅 발생 → 변수 선선언 + 할당

exmaple() // 변수 호이스팅 = ReferenceError: Cannot access 'example'

let exmaple = function() {
	console.log('Function Expression');
};

 

https://ko.javascript.info/function-expressions

함수 표현식

해당 링크에 자세하게 설명되어있으니 참고하도록 하자!

---

 

익명함수와 기명함수

• 익명 함수: 이름이 없는 함수로 주로 함수 표현식이나 콜백 함수에 사용된다.
• 기명 함수: 이름이 있는 함수로, 함수 내부에서 재귀적 호출이나 디버깅에 유용하다.

익명함수(Anonymous Function)와 호이스팅

// console.log(example); // undefined (변수는 호이스팅되지만 초기화되지 않음)
// example(); // TypeError: example is not a function(함수는 아직 할당되지 않음)

let example() = function() {
	console.log('익명 함수');
};

example(); // '익명 함수'

• `example`변수는 호이스팅되어 선언은 되어 있지만, 아직 함수가 할당되지 않았기 때문에 `undefined` 상태이다.

기명함수(Name Function)와 호이스팅

let example = function namedFunc() {
	console.log('기명 함수');
};

example(); // '기명 함수'

• 함수 표현식에서는 변수만 호이스팅되며, 함수는 변수에 할당된 이후에 호출 할 수 있다.
• 내부적으로 함수 이름인 `namedFunc`은 함수 내부에서 재귀적으로 호출할 때 사용 할 수 있지만, 외부에서는 `example`로만 접근할 수 있다.

---

함수와 메서드의 차이

• 함수: 단순히 정의된 함수 그자체, 전역 컨텍스트에서 실행된다.(`window`, `global`)
•  메서드: 객체의 프로퍼티로 정의된 함수로, 객체 내에서 호출. 메서드 내부에서 `this`는 메서드가 속한 객체를 참조. (this 는 객미새)

---

화살표 함수 (Arrow Function)

화살표 함수는 기존의 `function()` 대신 `() => {}` 문법을 사용한다.

함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는데 여기서 가장 핵심이 `this` 바인딩 방식에서 가장 큰 차이가 있다.

 

1. 일반 함수 표현식: 동적 바인딩(Dynamic Binding)

일반 함수는 호출되는 객체에 따라 `this`가 결정된다. 이를 동적 바인딩이라하고 호출된 객체에 따라 `this`가 달라질 수 있다.

var param = 'global param';

let printParam = function() {
	console.log(this.param) // 호출된 객체에 따라 `this` 결정
}
let object = {
	param: 'object param',
    func: printParam
};

object.func(); // "object pram" (object 객체가 'this'로 바인딩)

• `obejct.func()`가 호출되면서, `this`는 `object`를 참조하게 되어 `object.param`이 출력된다. 

2. 화살표 함수 표현식: 정적 바인딩(Lexical Binding)

화살표 함수는 `this`가 고정된다. 화살표 함수는 자신의 상위 스코프에서 `this`를 가져오며, 어디서 호출되었는지 상관없이 `this`는 함수가 선언된 위치에 의해 결정된다. 

var param = 'global param';

let printParam = () => {
	console.log(this.param); // 상위 스코프의 `this` 사용 (전역 객체)
}

let object = {
	param: 'object param',
    func: printParam
};

object.func(); // "global param" (화살표 함수는 `this를 상위 스코프에서 가져옴)

`obejct.func()`를 호출해도, 화살표 함수의 `this`는 전역 객체(`windwo`)를 참조하게 되어 `global param`이 출력된다. 화살표 함수는 동적 바인딩이 아닌 정적 바인딩을 사용하기 때문.

일반 함수는 호출된 객체에 따라 `this`가 결정되며 이는 동적 바인딩이다.
화살표 함수는 상위 스코프에 있는 `this`를 고정적으로 사용하며, 이는 정적 바인딩이다.

 

• 화살표 함수는 `this`가 없기 때문에 메서드로 사용할수 없다.
• 필드 접근이 불가능하다.

const object = {
	field: '+필드',
    not_method: () => {
    	console.log('넌 내가 아직도 메서드로 보이니', this.filed); // undefined
    }
};

object.not_method(); // '넌 내가 아직도 메서드로 보이니 undefined'

• 화살표 함수는 메서드로 사용할 수 없으며, `this`는 객체가 아닌 상위 스코프의 `this`를 참조하기 때문에 `object.filed`를 출력하지 못하고 `undefined`가 나온다.

---

var / let 스코프 차이와 전역 객체에서의 `this` 바인딩

1. 전역 객체와 `this` (Global Execution Context)

자바스크립트에서 전역 컨텍스트에서의 `this`는 브라우저 환경에서는 전역 객체인 `window`를 가르킨다. 즉, 전역 스코프에서 `this`를 호출하면 `window`객체가 반환된다

console.log(this); // 브라우저에서는 window 객체

 

2. `var`와 `let`의 차이: 블록 스코프와 함수 스코프

https://1000sang-dev.tistory.com/32 

JavaScript 변수, 함수 정의 및 사용

해당 글에서도 설명했지만 다시 한번 설명해보겠다.

 

자바스크립트에서 `var`와 `let`은 스코프의 범위가 다르다. 이 차이로 인해 `this`와 변수 참조가 다르게 작동할 수 있다.

• `var`는 함수 스코프를 따른다. 즉, 함수 내에서 선언된 `var`변수는 해당 함수 전체에서 접근 할 수 있다. 그리고 전역 스코프에서 선언된 `var` 변수는 전역객체의 프로퍼티가 된다.
• `let`은 블록 스코프를 따른다. 즉, `let`으로 선언된 변수는 `{ }` 블록 내에서만 접근할 수 있다. 전역 스코프에서 `let`변수를 선언해도 전역객체의 프로퍼티가 되지 않는다.

3. `var`와 `let을 사용할 때 `this`와 변수 참조의 차이

3.1. `var`를 사용한 경우

• 전역에서 `var`로 변수를 선언하면, 해당 변수는 전역 객체의 프로퍼티가 된다. 즉 `this`가 전역 객체를 가르킬 때, `this`를 통해서도 해당 변수에 접근할 수 있다.

var param = 'global param';

function printParam() {
	console.log(this.param); // this는 전역 객체(window)를 가리킴
}

printParam(); // "global param"

• `param`은 `var`로 선언되었기 때문에, 전역 객체의 프로퍼티가 된다.
• 함수에서 `this`는 전역 객체를 참조하기 때문에, `this.param`은 `"global param"`을 출력한다.

3.2. `let`을 사용한 경우

• `let`은 블록 스코프를 따르기 떄문에, 전역에서 `let`으로 선언된 변수는 전역 객체의 프로퍼티가 되지 않는다. 따라서 `this`를 통해 해당 변수에 접근할 수 없다.

let param = 'global param';

function printParam() {
	console.log(this.param); // this는 여전히 전역 객체(window)를 가리킴
}

printParam(); // undefined

• `param`은 `let`으로 선언되었으므로 전역 객체의 프로퍼티가 되지 않는다.
• 함수에서 `this`는 여전히 전역 객체를 가리키지만, `this.param`은 존재하지 않기 때문에 `undefined`가 출력된다.

---

재선언 가능 여부

일반 함수는 `var를 사용해 재선언이 가능하다.

화살표 함수는 변수 선언이 필수적이므로, 재선언이 불가능하다 → 화살표함수 쓰는 이유가 재선언을 방지하는 이유이기도 하다.

function hello() {
	console.log('Hello');
}

function hello() {
	console.log('World');
}

hello(); // 'World' (재선언 가능)

let hello = () => {
	console.log('Hello');
}

let hello = () => {
	console.log('World');
}

// SyntaxError: Identifier 'hello' has already been declared (재선언 불가)

 

---

ℹ️참고

[ASAC 6기 강의자료]

https://ko.javascript.info/function-expressions

함수 표현식

https://medium.com/@nilangav/function-statements-vs-function-expressions-in-javascript-91d4b8ed6c42

Function statements vs Function expressions in JavaScript