function

멍차·2024년 2월 14일

javascript

목록 보기
2/3
  • 변수는 선언한다고 표현하지만 함수는 정의한다고 표현한다.
  • 함수는 객체(타입의 값)다. 이 사실은 다른 프로그래밍 언어와 구별되는 JS의 중요한 특징이다.

Parameter / Argument

function getAge(age){
return age +;
}

let result = getAge(90);
console.log (result);

위 함수에서 첫 번째 줄 age가 매개변수 (parameter)

result 줄에 있는 (90)이 인수 (argument)

매개변수 = 함수의 특별한 성질을 나타내는 변수, 메서드 선언의 변수 목록

매개변수는 최대 3개 이상을 넘지 않는 것을 권장

인자 = 함수에 인풋으로 들어온 데이터, 메서드가 호출될 때 전달되는 실제 값

함수 리터럴

JS 함수는 식별자 없이 함수 그 자체를 객체 타입의 값으로 (리터럴) 생성이 가능하다.

function(매개면수 목록){
	//코드 실행부
}

// 변수에 함수 리터럴 할당
var f = function add(x, y){
	return x + y;
}

함수 정의

함수 선언문

function add(x, y){
	return x + y;
}

// 함수 선언문은 표현식이 아닌 문이다.
// 콘솔에서 함수 선언문을 실행하면 완료 값 undefined가 생성된다.
// 만약 표현식이라면 undefined 대신 표현식이 평가되어 생성된 함수가 출력되어야 한다.

함수 표현식

// 함수 리터럴로 생성한 함수 객체를 변수에 할당
// 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적
var add = function (x, y){
	return x + y;
}

Function 생성자 함수

var add = new function ('x', 'y', return x+y);

화살표 함수(ES6)

var add = (x, y) => x + y;

화살표함수는 함수를 식별할 수 있는 식별자가 없으므로,

화살표 함수로 작성된 함수를 호출할 수 있는 함수 표현식 방법을 사용한다.

변수에 화살표 함수를 할당하기

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

// return 생략
const sum = (num1, num2) => num1 + num2;

// 객체를 반환하는 경우, 소괄호로 한번 감싸줘야 한다
const getObject = () => ({
	name: "철수",
	age: 20
})

// 전달할 매개변수가 1개일 때 (x) 괄호 생략 가능
const pow = x => x*x;

화살표 함수는 생성자 함수로 사용할 수 없으며 기존 함수와 this 바인딩 방식이 다르다.

화살표함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
화살표함수의 this는 언제나 상위 스콥의 this를 가리킨다. (lexical this)

표현식과 식별자의 미묘한 특징..

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

하지만 아래 예제는 함수 선언문이 변수에 할당되는 것처럼 보인다.

var add = function add(x, y){
	return x + y;
}

console.log(add(2, 5));

이유는

JS 엔진이 코드 문맥에 따라 함수 선언문 또는 함수 리터럴 표현식으로 해석될 가능성이 있기 때문이다.

뭐임?

함수를 호출할 때는 함수 이름이 아닌 함수 객체를 가리키는 식별자를 사용해야 한다.

함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 함수 이름으로 함수를 호출할 수 없다.

하지만 자바스크립트 엔진은 함수 선언문의 함수 이름으로 식별자를 암묵적으로 생성하고

생성된 함수 객체를 할당하므로 함수 표현식과 유사하게 동작할 수 있다.

함수 선언문은 “표현식이 아닌 문”이고 함수 표현식은 “표현식인 문”이다.

0개의 댓글