한빛미디어의 <러닝리액트>를 공부하며 작성하는 글입니다.

함수 만들기

함수 선언

• 함수 선언 또는 함수 정의는 function 키워드로 시작
• 함수에 속한 자바스크립트 문장은 중괄호({}) 사이에 들어감

// 함수 선언
function logCompliment() {
  console.log("하이");
}
// 선언한 함수 호출
logCompliment();
// 출력 : 하이

함수 표현식

• 함수 표현식은 (이름 없는) 함수를 만들며, 변수에 값을 대입할 수 있음

const logCompliment = function() {
  console.log("하이");
}
// 선언한 함수 호출
logCompliment();
// 출력 : 하이

함수 선언과 함수 표현식

• 함수 선언은 호이스팅되지만, 함수 표현식은 그렇지 않음.
  • 즉 함수 선언을 작성하기 전에 함수 호출 가능
  • 함수 표현식에 의해 만들어진 함수를 함수 표현식이 실행되기 전에 호출할 수 없음

함수 선언

// 선언하기 전에 함수 호출
hey();

// 함수 선언
function hey() {
  alert("hey");
}
// 잘 작동함

• 함수가 호이스팅, 즉 함수가 파일의 맨 앞에 정의된 것처럼 처리되므로 코드가 제대로 작동한다.

함수 표현식

// 선언하기 전에 함수 호출
hey();

// 함수 표현식
const hey = function(){
  alert("hey");
}
// error : hey is not a function

• 호이스팅이 발생하지 않으므로 함수 표현식에 대해 적용하면 오류가 발생한다.

인수 넘기기

• 함수가 사용하는 변수에 대해 동적으로 값을 제공받고 싶다면, 함수 이름 뒤의 괄호 안에 파라미터 이름을 추가해서 함수를 선언하면 된다.

const logCompliment = function(firstName) {
  console.log(`잘했어요, ${firstName}`);
}

logCompliment("말감");
// 출력 : 잘했어요, 말감

• 하드코딩 하지 않고 파라미터를 통해 값을 동적으로 전달할 수 있다.

값 반환하기

• return 문을 이용하여 함수가 반환할 값을 지정하기

const logCompliment = function(firstName) {
  return(`잘했어요, ${firstName}`);
}

console.log(logCompliment("말감"));
// 출력 : 잘했어요, 말감
// logCompliment에서 return 받은 값을 콘솔로그에 출력

디폴트 파라미터

• 함수를 호출하면서 인자값을 지정하지 않으면 디폴트 값이 쓰인다.

function logActivity(name="말감", activity="테니스") {
  console.log(`${name}은 ${activity}를 좋아해.`);
}
logActivity();
// 출력 : 말감은 테니스를 좋아해.

const defaultPerson = {
  name : {
  	first : "말감",
    last : "이"
  },
  favActivity : "테니스"
}

function logActivity(p = defaultPerson) {
  console.log(`${p.name.first}은 ${p.favActivity}를 좋아해.`);
}
logActivity();
// 출력 : 말감은 테니스를 좋아해.

• logActivity 함수를 호출하면서 아무 인자를 지정하지 않아도 디폴트 값을 이용해 함수가 정상적으로 실행됨.
• 문자열 뿐만 아니라, 어떤 타입의 값이라도 디폴트 값으로 사용할 수 있음

화살표 함수

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

함수 표현식

const lordify = function(firstname) {
	return `베리베리의 ${firstname}라고?!`;
}
console.log(lordify('연호')); 
// 베리베리의 연호라고?!

화살표 함수

const lordify = (firstname) => `베리베리의 ${firstname}라고?!`;

console.log(lordify('연호')); 
// 베리베리의 연호라고?!

• 파라미터를 하나만 받는 경우 파라미터 주변의 괄호를 생략해도 됨
• 결과를 계산하기 위해 여러 줄을 사용한다면 중괄호로 함수 본문 전체를 둘러싸야 함.

객체 반환하기

• 객체를 반환하고 싶다면, 반환하려는 객체를 괄호로 둘러싸야 한다.

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

console.log(person("말감", "이"));

화살표 함수와 영역

const gangwon = {
	resort : ["용평", "평창", "강릉"],
  	print : function(delay = 1000) { // 여기서 this는 gangwon
    	setTimeout(function() { // 하지만 여기서 this는 window
        	console.log(this.resorts.join(","));
        }, delay)
    }
}

gangwon.print();
// error : Cannot read property 'join' of undefined

• this.resorts 의 join 메서드를 호출하려고 시도했기 때문에 발생
  -> this를 콘솔에 찍어보면 this가 window 객체임을 알 수 있다.

console.log(this); // window{}

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

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

gangwon.print(); //"용평", "평창", "강릉"