자바스크립트의 함수

자바스크립트 함수는 객체이다.

자바스크립트에서는 함수도 객체이기 때문에 다른 객체처럼 변수에 할당할 수 있고, 함수에 매개변수로 넘길 수도 있다.

따라서 함수도 호이스팅(Hoisting)의 대상이다. 

 

함수를 나타내는 방법 - 함수 선언문 vs 함수표현식

1. 함수 선언문

보통 다른 언어에서 쓰는 것 처럼 쓰는 방식.

함수 선언문이 호이스팅의 대상이다. ('선언'이기 때문이라고 생각하면 이해가 쉽다.)

function sayHello() {
	console.log("Hello world!");
}

2. 함수 표현식

변수에 (익명)함수를 할당하는 방식

함수표현식의 장점으로는 콜백으로 사용할 수 있다는 점과 클로져로 사용할 수 있다는 점이 있다.

const sayHello = () => {
	console.log("Hello world!");
}

const sayHi = function () {
	console.log("Hi world!");
}

콜백으로 사용

setTimeout(() => {
	console.log("비동기 호출입니다...")
}, 500)

//() => {console.log("비동기 호출입니다...")} 가 함수표현식으로 사용된 것

 

함수의 매개변수와 반환값

자바스크립트의 함수는 정의된 매개변수의 개수와 호출할 때의 인수의 개수가 일치하지 않아도 된다.

또한 매개변수의 자료형이 미리 정해지지 않는다.

자바스크립트에는 void 자료형이 없기 때문에 리턴이 없는 경우 undefined를 반환한다.

파라미터 개수보다 인수의 개수가 작을 경우 -> undefined라는 값을 갖게 된다.

const example1 = (a, b, c, d) => {
	console.log(a, b, c, d)
}
example1("hi", 2, [1, 2])

//콘솔에는 hi 2 [1, 2] undefined 라고 찍힙니다.

 

파라미터 개수보다 인수의 개수가 많을 경우 -> 초과된 인수는 무시된다.

const addAll = (a, b, c, d) => {
    console.log(a+b+c+d)
}
addAll(1, 2, 3, 4, 5, 6, 7)

//콘솔엔 10이 찍힌다. (1+2+3+4)

 

함수가 실행되면 arguments 라는 특별한 지역 객체가 만들어진다.

(화살표 함수에는 arguments가 없음)

function addAll(a, b, c, d){
    console.log(arguments)
}

addAll(1, 2, 3, 4, 5, 6, 7)

위와 같이 콘솔에 출력된다.

function addAll(a, b){
    console.log(arguments[0])
    console.log(arguments[1])
    console.log(arguments[2])
    console.log(arguments[5])
}

addAll(1, 2, 3)

//콘솔엔 1, 2, 3, undefined 가 출력된다.

 

arguments 는 배열처럼 생겼지만 배열은 아니고 배열처럼 생긴 객체이다.

따라서 length를 제외하고는 배열과 관련된 메소드를 쓸 수 없다.

 

ES6 문법에서는 레스트 문법이 있기 때문에 이를 이용할 수 있다.

(* 레스트 문법 : ...를 이용해서 여러 원소를 하나의 원소로 압축한다)

const students = ["깽", "야리니", "연", "광", "로"]
const [a, b, ...c] = students;
console.log(c)

//콘솔에 ['연', '광', '로'] 가 출력된다.

const getStudents = (...args) => {
    console.log(typeof args)
    console.log(args[0])
    console.log(args[5])
}

/*콘솔에 차례대로
 object
 깽
 undefined 
 가 출력된다. */