[JavaScript] 함수

so8san·2022년 10월 19일

JavaScript

JAVASCRIPT

목록 보기

5/8

함수

💡 빠른 복습

함수는 온디맨드 형식으로 코드를 정의하는 구조 입니다.
javascript가 코드를 읽으면 전체 코드를 먼저 확인하고 추가한 함수 선언을 찾아서 함수를 등록합니다. 그러면 스크립트가 실행되고 함수를 원할 때 마다 호출 할 수 있습니다.
함수 내에서 상수나 변수를 생성하면 해당 함수에 속합니다.
이는 스코프 때문 입니다.
함수는 인수라는 매개변수를 취해 값을 반환합니다.
매개변수를 취하지 않으며, 아무것도 반환하지 않는 함수도 작성 가능합니다.
함수는 여러 번 호출 할 수 있고, 인수에 관한 다른 값을 보내면 함수의 기능인 코드 온디맨드로 동적인 함수가 될 수 있는데 그 이유는 인수를 취하면 인수는 함수를 호출할 때 마다 다를 수 있기 때문입니다. 그래서 동일한 함수가 다양한 호출에 관한 여러 가지 값을 생산할 수 있습니다.
함수 이름 뒤에 괄호를 추가해서 직접적으로 호출 할 수 있습니다.
간접적으로 호출하는 경우는 이벤트 리스너를 호출해서 바인딩하는 경우나 버튼에 함수를 추가하는 경우입니다.

💡 인수 (Argument) & 인자, 매개변수 (Parameter)

function test(parameter){ // 함수를 호출 할 때 받아오는 값을 매개변수,
	return parameter
}

test(argument) // 함수를 호출 할 때 전달하는 값을 인수라고 한다.

💡 함수 ? 메서드 ?

// 일반 함수
function Fn() {
	console.log('soooooooooosan')
}

// 메서드
const person = {
	name:'soooosannn',
	Fn: function() {
		~~console.log(this.name)~~ //Fn이 전역으로 선언 되어있기 때문에 this.name 못 찾습니다.
	},
	Fn2: () => {
		console.log(this.name) //Fn, Fn2는 객체 안에 존재하는 함수 입니다. 이를 메서드 라고 부릅니다. 객체에 연결된,저장된 함수 === 메서드
	}
}

const func = document.querySeletor(".test")
func.addEventListener('click', person.Fn2) // addEventListener은 func객체의 메서드 입니다. 따라서 click과 person.Fn2는 인수가 되겠습니다.

함수는 객체입니다.

당장 함수를 typeof 연산자로 확인해 봤을 때에는 function이라고 나오지만,
console.dir(function)을 찍어보면 객체 형식으로 구성되어 있는 걸 볼 수 있습니다.

JavaScript의 함수는 일급 객체이므로 값으로 취급할 수 있습니다. 따라서 프로퍼티 값으로 함수를 사용할 수 있으며, 이 경우 일반 함수와 구분하기 위하여 메소드라 부릅니다.

💡 함수 표현식 & 함수 선언

function fun(){
	console.log('함수 선언식 입니다.')
}

const fn = function fun() { 
	console.log('함수 표현식 입니다.')
}
/* 이제 function fun << fun은 어디서도 참조 할 수 없게 되었습니다. 오로지 fn이라는 이름으로만 함수를 참조할 수 있게 되었으니 function 뒤에 이름은 지워줘도 됩니다.
▼ */
const fn = function() {
	console.log('test')
}

함수 표현식과 선언식의 가장 큰 차이점은 **호이스팅의 영향을 받느냐** 입니다. 함수를 선언하면 javascript 엔진이 자동으로 함수를 맨 위로 hoist하여 완전히 초기화 합니다. 즉, **함수를 선언 하기도 전에 함수를 호출 할 수 있다**는 말이 됩니다.

함수 표현식에서는 호이스팅 자체도 작동 하지만, 상수가 정의되지 않은 상태로 호이스트 됩니다.
초기화가 이루어지지 않으니 정의되기 전 까지는 함수를 호출 할 수 없습니다.

호이스팅 파트에서 설명했듯 호이스팅은 선언만 위로 끌어올립니다. 즉 할당 부터는 호이스팅 되지 않습니다. 즉, 선언만 해놓은 함수는 호이스팅에 영향을 받습니다. 하지만, 표현식으로 작성하게 된다면 선언부 즉, const fnName = 부분 까지만 호이스트 되고 function 이후 부분은 그대로 남아 정의되지 않는 한 호출 할 수 없는 것 입니다.

💡 익명 함수

const test = document.querySelector('.test')

test.addEventListener('click' , function(){ // 익명함수
	console.log('test')
})

두 번째 addEventListener 메서드에 인수로 작성된 익명함수를 보면
위와 같은 방법으로 익명 함수를 작성 했을 경우 addEventListener 메서드를 실행하면서 함수를 따로 찾을 필요가 없습니다. 작성하는 것도 한 번만 작성해주면 되기 때문에 편리할 것입니다.

허나, 함수 표현식으로 함수를 정의하고 호출하지 않고 위와 같은 방식으로 작성해줄 경우 함수를 반복적으로 호출해야 할 때 일일이 다 같은 함수를 적어 줘야 하는 불편함이 있습니다.
함수의 재활용성이 떨어지므로 그 부분을 고려해 작성해야 할 것입니다.

또 익명 함수는 error 메세지가 나왔을 때 익명 함수 이기 때문에 당연한 결과이겠지만, 어느 함수에서 문제가 있는지 알려주지 않습니다. 굉장히 긴 코드를 작성하고 있었을 경우 이는 부담이 될 수 있습니다. 물론 어느 파일에 몇 번째 줄에서 나온 문제 인지 알려주기는 하기 때문에 큰 지장이 없을 수 있으나, 이런 문제가 있다는 건 알아두시기 바랍니다.

💡 화살표 함수

const fun = function(){
	console.log('일반 함수')
}

const fun = () => {
	console.log('화살표 함수')
}

차이점

this가 가르키는 대상

일반 함수 : 함수 실행 시에는 Window객체를 가르키나, 메소드 실행 시에는 메소드를 소유하고 있는 객체를 가르킵니다. 생성자 실행 시에는 새롭게 만들어진 객체를 가르킵니다.
일반 함수는 함수를 선언 할 때 this에 바인딩 할 객체가 정적으로 결정되는 것이 아니라 어디에 호출 되었는지에 따라서 thos에 바인딩할 객체가 동적으로 결정 됩니다.

화살표 함수 : 선언할 때 this에 바인딩할 객체가 정적으로 결정됩니다. 화살표 함수의 this는 언제나 상위 스코프의 this를 가르킵니다. (렉시컬 시코프) 또한 call, apply, bind 메소드를 사용해 this를 바꿔줄 수 없습니다.
생성자 함수 사용 가능 여부

일반 함수 : 가능합니다.
화살표 함수 : 불가능합니다. prototype 프로퍼티를 가지고 있지 않기 때문입니다.
일반 함수는 매개변수를 작성하지 않고도 arguments 라는 변수명으로 인수를 받아올 수 있습니다. 당연히 화살표 함수는 동작하지 않습니다.