JS - 함수

이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다.

 

함수는 하나의 단위로 실행되는 문의 집합입니다. 모든 함수에는 바디가 있습니다. 함수 바디는 함수를 구성하는 문의 모음입니다.

 

함수선언

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

함수호출(실행)

sayHello();

반환값

함수 호출 또한 표현식이고 이는 값이 될 수 있다는 것을 의미합니다. 반환 값은 함수 호출의 값을 의미합니다. return 키워드는 함수를 즉시 종료하고 값을 반환합니다.

function getGreeting(){
	return "Hello world!";
}

getGreeting(); // "Hello, World!"

return을 명시적으로 호출하지 않으면 반환 값은 undefined가 됩니다.

호출과 참조

JS에서는 함수도 객체이기 때문에 다른 객체들처럼 넘기거나 할당, 즉 참조할 수 있습니다. 호출과 구별하는 방법은 괄호의 차이입니다.

getGreeting(); 	//"Hello World!"
getGreeting;	//function getGreeting()

매개변수

function avg(a, b){
	return (a + b)/2;
}

a와 b를 정해진 매개변수라고 합니다. 함수가 호출되면 값을 받아 실제 매개변수가 됩니다. 함수를 호출하면 함수 매개변수는 변수 자체가 아니라 그 값을 전달받습니다. 그렇기 때문에 함수 바깥에 있는 변수를 매개변수의 값으로 주어도 값을 전달받기 때문에 함수 바깥의 변수는 아무 영향이 없습니다. 그러나 객체 자체를 매개변수의 값으로 준다면 객체의 값은 참조 타입, 즉 주소를 값으로 주기 때문에 영향이 있습니다. "원시값은 불변이다"의 개념을 잘 보여주는 핵심적인 차이 입니다.

 

시그니쳐

자바스크립트에서는 매개변수는 시그니쳐에 포함되지 않습니다. 다른 의미로는 어떤 함수를 호출하든 그 함수에서 정해진 매개변수 숫자와 관계없이 몇 개의 매개변수를 전달해도 됩니다. 정해진 매개변수에 값을 제공하지 않으면 암시적으로 undefined가 할당됩니다.

 

매개변수 해체

전시간에 해체 할당에 관해 배웠듯 매개변수도 해체할 수 있습니다.

function getSentence({subject, verb, object}){
	return `${subject} ${verb} ${object}`;
}

const o = {
	subject: "I",
    verb: "love",
    object: "JavaScript",
};

getSentence(o);		// "I love JavaScript"

배열 또한 해체할 수 있습니다.

function getSentence([subject, verb, object]){
	return `${subject} ${verb} ${object}`;
}

const o = {
	subject: "I",
    verb: "love",
    object: "JavaScript",
};

getSentence(o);		// "I love JavaScript"

확산 연산자(...)를 써서 남는 매개변수를 이용할 수 있습니다. 확산 연산자는 반드시 마지막 매개변수여야 합니다.

function addPrefix(prefix, ...words){
	const prefixedWords = [];
	for(let i = 0l i < words.length; i++){
    	prefixedWords[i] = prefix + words[i];
    }
    return prefixedWords;
}

addPrefix("con", "verse", "vex");	//["converse", "convex"]

 

매개변수 기본값

ES6에서 매개변수에 기본값을 지정하는 기능이 추가되었습니다. 매개변수 선언부에 기본값을 지정해주면 됩니다.

 

메서드

객체의 프로퍼티인 함수를 메서드라고 부릅니다.

const o = {
	name: 'Wallance',
    back: function() {return 'Woof!';},
}

/*ES6*/
const o = {
	name: 'Wallance',
    back() {return 'Woof!';},
}

 

this

메서드를 호출하면 this는 호출한 메서드를 소유하는 객체가 됩니다. 중요한 부분은 this가 누구의 프로퍼티인지가 아니라 누가 메서드를 호출했냐입니다. (this는 객체지향 파트에 갔을 때 더 깊이 학습할 예정입니다.) 이 때문에 혼란스러운 부분이 많은 데 에를 들어 메서드 안에 보조함수를 선언하면 함수 내부의 this는 메서드를 보유하고 있는 객체를 가리키지 않습니다. 일반적으로 이를 해결하기 위해 메서드 내부에 변수에 this를 할당하는 방법을 사용합니다. (혹은 밑에서 서술한 화살표함수를 사용합니다.)

 

함수 표현식

이름이 없는 익명 함수를 만들 수 있다는 점과 표현식이 값이 될 수 있다는 점을 이용하여 함수 표현식을 만들 수 있습니다.

const f = function(){
	// ...
};

이름을 정하고 변수에 할당할 수도 있는데 함수 바깥에서는 변수이름을, 함수 내부에서는 함수이름을 사용합니다.

const g = function f() {
	// ...
}

 

화살표 표기법

ES6에서 새로 만든 화살표 표기법은 function 키워드와 중괄호 숫자를 줄이려고 만들어진 단축 문법입니다.

function을 생략해도 되고, 매개변수가 단 하나 뿐이면 괄호도 생략 가능하며,  바디가 표현식 하나라면 중괄호와 return 문도 생략할 수 있습니다.

const f1 = () => "hello!";
cosnt f2 = name => `Hello ${name}!`;
const f3 = (a,b) => a + b;

화살표 함수는 익명함수를 만들어 다른 곳에 전달하려 할 때 유용합니다.

 

화살표 함수와 일반 함수의 중요한 차이점은 this가 다른 변수와 마찬가지로 정적으로 묶인다는 점입니다. (다른 차이점으로는 arguments 변수를 사용할 수 없다는 것과 객체 생성자로 사용할 수 없다는 점 등이 있습니다.) 이를 통해 내부 함수(화살표함수) 안에서 this를 사용할 수 있습니다.

 

 

call, apply, bind

자바스크립트는 일반적인 방법 외에도 함수를 어디서 어떻게 호출했느냐에 관계없이 this가 무엇인지 지정할 수 있습니다.

 

call 메서드는 모든 함수에서 사용할 수 있으며 this를 특정 값으로 지정할 수 있습니다.

const bruce = { name: "Bruce"};
const madeline = { name: "Madeline"};

function greet(){
	return `Hello, I'm ${this.name}!`;
;

greet();	// Hello, I'm undefined!
greet.call(bruce);	// Hello, I'm Bruce!
greet.call(madeline);	// Hello, I'm Madeline!

call의 첫번째 매개변수는 this로 사용할 값이고 매개변수가 더 있으면 그 매개변수는 호출하는 함수로 전달됩니다.

함수를 호출하면서 call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있습니다.

 

 

apply는 매개변수를 배열로 받는다는 점을 제외하면 call과 일치합니다.

 

bind는 함수의 this값은 영구히 바꿀 수 있습니다.

bind에 매개변수를 넘기면 항상 그 매개변수를 받으면서 호출되는 새 함수를 만드는 효과가 있습니다.

const updateBruce1949 = update.bind(bruce, 1949); // 1949 고정
updateBruce1949("singer, songwriter");