[코드팩토리] 함수의 기본기 (Function Basics)

개념

개발자는 DRY의 원칙을 지키는 것이 좋다.

D : Don't

R : Repeat

Y : Yourself

즉 작업의 효율성을 떨어뜨리는 반복적인 작업은 하지 말라는 뜻이다.

 

function을 활용하면 반복적인 코드 입력을 개선할 수 있다.

일반함

function 함수명(){함수내용}

 

아래와 같은 상황이 있다고 가정해보자.

console.log((3 * 10 / 2 % 3).toSring());
console.log((2 * 10 / 2 % 3).toSring());

앞의 3과 2만 바뀌었을 뿐 나머지는 동일하다.

계속 반복해서 입력해야 하는 번거로움이 있다. 이럴 때 저 계산식 자체를 함수로 만들어주면 나중에는 함수만 호출해도 작동이 된다.

funtion calculate() {
	console.log((3 * 10 / 2 % 3).toSring());
};

calculate();

계산은 calculate();만 작성해서 바로 할 수 있어 간편해졌지만 여전히 2와 3은 바꾸어 주어야 한다.

이럴 땐 calculate() 이 소괄호 안에 parameter(파라미터)를 넣어주면 된다.

function calculate(number){
	console.log((number * 10 / 2 % 3).toSring());
};

calculate(4);

Parameter와 Argument

위에서 number라고 대명사를 지정한 것은 파라미터(parameter),

밑에서 실제 계산식에 4를 넣어준 것은 아규먼트(argument)이다.

여러개의 Parameter를 사용하기

파라미터에 콤마를 넣어주면 된다.

function multiply(x, y){
	console.log(x * y);
}

multiply(2, 4) // x는 2, y는 4

Default Parameter : 파라미터의 기본값 정하기

아규먼트를 입력하지 않으면 파라미터의 기본값을 정해놓고 싶을 때 사용한다.

function multiply(x, y = 10) {
	console.log(x * y);
}

multiply(2, 4); // 8
multiply(2); // 20, y를 지정하지 않았기 때문에 기본값인 y = 10으로 계산된다.

return : 아규먼트의 값을 외부에서 받아오기

위의 기본형들은 x와 y의 값을 내가 직접 지정해줘야 했다.

그런데 이것을 외부에서 값을 받아오고 싶을 때는 아래와 같이 사용한다.

function mulitply(x, y){
	return x * y;
}

const result1 = multiply(2, 4);
console.log(result1); // 8

Arrow 함수

기본형 : const 변수명 = (파라미터) => {함수body}

const multiply = (x, y) => {
	return x * y;
}

const multiply1 = (x, y) => x * y;

위 처럼 => 화살표로 함수를 표현한다.

일반형 함수랑 기능적으로 크게 다르지 않다. 같은 결과를 가져온다고 보면 된다.

그리고 위 코드박스의 두 함수는 모두 같은 함수다. 아래 함수가 위 Arrow 함수의 축약버전이다.

그리고 두 함수가 기능적으로 다른 것은 없고 그냥 편리해서 업데이트 된 것이다.

왜? 라는 의문을 던져서 좋을 것이 없다. '그냥' 편해서 만들어진 기능이다.

 

만약 위처럼 파라미터가 x, y 두 개가 아니라 하나라면 파라미터를 감싸고 있는 소괄호를 삭제해도 된다. 

const multiply = x => x * 2;

 

이 함수를 조금 복잡하게 응용하면 다음과 같은 함수를 작성할 수 있다.

// arrow 함수 버전
const multiply = x => y => z => `x: ${x} y: ${y} z:${z}`;
console.log(multiply(2)(5)(7));

// 일반형 함수 버전
function multiply(x){
	return function(y){
		return function(z){
			return `x: ${x} y:${y} z:${z}`
        }
    }
}
console.log(multiply(3)(4)(5));

// 위 두 함수는 모두 콘솔에 x : 3 y: 4 z: 5라는 값을 출력하는 같은 결과를 보인다.

위 함수 패턴들은 암기해야 하는 영역이다.

const multiplyThree = function(x, y, z){
	console.log(arguments); // arguments는 키워드임
	return x * y * z;
}

console.log(multiplyThree(4, 5, 6));

위의 코드를 실행하면 아래처럼 콘솔에 출력된다.

function에서 x는 array의 0번, y는 1번, z는 2번이다.

함수에 arguments라는 키워드를 사용하면 각 array에 맞는 값을 반환받을 수 있다.

 

 

출처 : https://www.youtube.com/watch?v=ZOVG7_41kJE&t=633s