(React) 기초 - 함수 만들기

함수 선언

function logCompliment() {
	console.log("잘했어요!");
}

logCompliment();

 

함수 표현식

함수 표현식은 이름없는 함수를 만들며 변수에 값을 대입할 수 있다.

const logCompliment = function() {
	console.log("잘했어요!");
};
logCompliment();

 

함수 선언과 함수 표현식 중 어떤 쪽을 사용할지 결정할때 알아둬야 할 내용으로 함수 선언은 호이스팅되지만, 함수 표현식은 그렇지 않다는 점을 들 수 있다. 즉 함수 선언을 작성하기 전에 함수를 호출해도 된다. 하지만 함수 표현식에 의해 만들어진 함수를 함수 표현식이 실행되지 건에 호출할 수는 없다. 

 

인수넘기기

const logCompliment = function(firstName, message) {
	console.log('${firstName}: ${message}');
};

logCompliment("현석", "아주 멋져요");

 

값 반환하기

함수에 return 문을 추가하자

const createCompliment = function(firstName, message) {
	return '${firstName}: ${message}';
};

console.log(createCompliment("현석", "아주 멋져요"));

 

 

디폴트 파라미터

function log Activity(name='오성원', activity='테니스') {
	console.log('${name}은 ${activity}를 좋아합니다.');
}

 

문자열 뿐만아니라 어떤 타입의 값이라도 디폴트 값으로 사용할 수 있다.

const defaultPerson = {
	name: {
    	first: "성원",
        name: "오"
    },
    favActivity: "테니스"
};

function logActivity(p=defaultPerson) {
	console.log('${p.name.first}은 ${p.favAcitivity)를 좋아합니다.');
}

 

화살표 함수 

function 키워드 없이도 함수를 만들 수 있다. 화살표 함수에서는 return을 사용하지 않아도 식을 계산한 값이 자동으로 반환된다. 

const lordify = function(firstname) {
	return '캔터베리의 ${firstname}';
}

이것과 동일하게

const lordify = firstname => '캔터베리의 ${firstname}';

 

파라미터를 받는 경우, 그리고 결과를 계산하기 위해 여러 줄을 사용해야 한다면 중괄호로 함수 본문 전체를 둘러싸야 한다. 

const lordify = (firstName, land) => {
	if(!firstName) {
    	throw new Error('lordify 에게 이름을 넘겨야 합니다.');
    }
    if(!land) {
    	throw new Error('영주에게는 영지가 있어야 합니다.');
    }
    
    return '${land}의 ${firstName}';
}

console.log( lordify("이계영", "멜버른")); // 멜버른의 이계영
console.log( lordify("이계영") ); // 자바스크립트 오류

 

객체 반환하기

const person = (firstName, lastName) => ({
	first: firstName,
    last: lastName
});

console.log(person("현석", "오"));

괄호를 반드시 넣어야 한다. 자바스크립트나 리엑트 앱에서 괄호를 빼먹어서 오류가 생기는 경우가 아주 많다. 따라서 이 방법을 꼭 기억해야 한다. 

 

화살표 함수와 영역

일반 함수는 this를 새로 바인딩한다. 예를 들어 다음에서 this는 gangwon 객체가 아닌 그 어떤 것이다. 

const gangwon = {
	resorts: ["용평","평창","강촌","강릉","홍천"],
    print: function(delay=1000) {
    	setTimeout(function() {
        	console.log(this.resorts.join(","));
        }, delay);
    }
};

gangwon.print();  // Cannot read property 'join' of undefined 라는 오류 발생

 

이 오류는 this.resorts의 join 메서드를 호출하려고 시도했기 때문에 발생했다. 이 경우 다음과 같이 this를 콘솔에 찍어보면, this가 windows 객체임을 알 수 있다.

 

이 문제를 해결하기 위해, 화살표 함수를 사용하면 this의 영역이 제대로 유지된다.

var gangwon = {
	resorts: ["용평","평창","강촌","강릉","홍천"],
    print: function(delay=1000) {
    	setTimeout(() => {
        	console.log(this.resorts.join(","));
        }, delay);
    }
};

gangwon.print();  // 용평, 평창, 강촌, 강릉, 홍천

 

하지만 항상 영역을 염두에 둬야 한다는 점에 유의하자. 화살표 함수는 새로운 this 영역을 만들어내지 않는다. 

var gangwon = {
	resorts: ["용평","평창","강촌","강릉","홍천"],
    print: (delay=1000) => {
    	setTimeout(() => {
        	console.log(this.resorts.join(","));
        }, delay);
    }
};

gangwon.print();  // Cannot read property 'join' of undefined 라는 오류 발생