Javascript 함수

함수를 사용하는 이유

불필요한 반복 작업을 피하기 위해

 

함수를 정의하는 방법

1. function이라는 예약어를 작성한다.

2. 예약어 옆에 함수의 이름을 정의한다.

3. 함수의 이름에 소괄호를 열고 닫고 코드 블럭을 열고 닫는다.

4. 코드 블럭 안에 내가 실행하고 싶은 코드를 작성한다.

예약어 함수이름(소괄호) {코드블럭
	실행하고 싶은 코드
}

위의 경우를 그대로 코드로 작성한다면

function add() {
	code
}

변수를 선언해도 콘솔창에 바로 볼 수 없듯이 함수도 정의하고 사용하려면 함수를 호출해야 한다. 다만 함수를 호출한다고 해서 콘솔창에 바로 볼 수는 없다. 함수를 호출할 때 콘솔 창에서 바로 확인하려면 함수 안의 코드에 console.log() 함수를 사용하는 방법도 있고 호출하면서 console.log함수를 사용하는 방법이 있다. 

 

주의사항으로는 함수 이름을 작명할 때 이름이 길어진다면 카멜케이스 작명법을 사용할 것과 예약어로 작명해서는 안된다는 점이다.

1. 카멜케이스는 이런 것을 말한다.

→ newNumber

우리가 영어를 작성할때 띄워쓰기를 표시하는 것처럼 하는 것이 아니라 띄어쓰기가 들어가는 곳에 대문자로 표시한다.

2. 예약어로 작명하는 것은 이런 것을 말한다. 예시처럼 하면 안된다는 말이다.

→ return, const, let 등 예약어에 대해서 검색해보자.

함수를 호출하는 방법

1. 함수 이름을 적는다.

2. 함수 이름 옆에 소괄호를 열고 닫는다.

3. 함수를 호출하는 문은 표현식이기 때문에 세미콜론을 붙인다.

함수이름();

↓

add();

이것을 정리하면 함수를 사용할 때는 먼저 정의를 하고 호출하는 것이다.

// 함수의 정의
function add() {
	code
}

// 함수의 호출
add();

parameter와 argument

매개변수(parameter) : 함수에 전달 받을 데이터

인자(argument) : 함수에 전달 할 데이터

 

위에서 설명했듯이 함수를 정의하고 호출할때는 항상 함수이름 옆에 소괄호를 열고 닫는다. 이 소괄호 안에는 어떤 값이 들어가는 것일까

그것은 함수를 정의할 때는 parameter가 위치하게 되고 함수를 호출할 때는 argument가 위치하게 된다. 코드로 설명하자면...

예약어 함수이름(매개변수) {
	return 매개변수;
}

함수이름(인자);

function add(number) {
	return number;
}

add(1);

주의사항으로는 함수를 변수에 저장해서 사용할 때다. 변수의 식별자로 매개변수를 받으면 안된다. 코드로 설명하면..

function add(number) {
	const number = 1 + 2;
    return number;
}

함수는 여러개의 인자를 받을 수 있다.

위에서는 매개변수의 인자로 1개만 받은 예제를 설명했다. 함수의 인자는 당연히 1개만 넣을 수 있는게 아니다. 많은 수의 인자를 넣을 수 있지만 권장으로는 3개까지만 넣는 것이 좋다.

예약어 함수이름(매개변수1, 매개변수2, 매개변수3) {
	return 매개변수1 + 매개변수2 + 매개변수3
}

함수이름(인자1, 인자2, 인자3);

↓

function add(num1, num2, num3) {
	return num1 + num2 + num3;
}

add(1, 2, 3); // 6

정의된 함수에서 다른 정의된 함수를 사용할 수 있다.

1. halfAndAddNumber 함수의 인자로 40이라는 데이터를 halfAndAddNumber 함수에 전달한다.

2. halfAndAddNumber 함수에 40이라는 데이터를 전달받게 되면서 result 변수를 반환한다.

  2-1 result 변수를 반환하지만 그전에 변수 선언문이 있었고 그 변수 선언문 안에는 halfNumber 함수 호출문이 있다.

  2-2 halfNumber 함수를 호출했기 때문에 halfNumber 함수가 실행되며 40이라는 값을 전달받는다.

  2-3 halfNumber 함수는 40 / 2 = 20 이라는 값을 반환한다. 어디에? 변수 result에 함수가 호출된 자리에

  2-4 변수 result는 20 + 1의 값 21이 할당되어 반환된다.

function halfNumber(number) {
  return number / 2;
}

function halfAndAddNumber(number) {
  const result = halfNumber(number) + 1;
  return result;
}

console.log(halfAndAddNumber(40)); // 21

함수에 인자를 3개 전달하고 인자를 3개를 전달했을 때 반환하고 인자를 2개 전달했을 때 반환, 1개를 전달했을 때 반환하게 하려면 어떻게 해야할까?

여기서 중요한 포인트는 리턴이라는 예약어에 대해 잘 알고 있느냐다. 함수가 return을 만나면 어떻게 되지? 함수는 return이라는 예약어를 발견하면 다음에 코드가 있더라도 그 즉시 종료한다. 함수 안에는 조건문을 넣을 수 있는데 조건문의 조건에 해당할 때 return을 한다면? 조건은 역순으로 작성해야한다. 역순이 아니면 어떻게 될까?

 

function addThird(num1, num2, num3) {
	if (num1, num2, num3) {  // 인자를 3개 받았을 때 불린 값이 true
    	const result1 = num1 + " " + num2 + " " + num3 + " ";
        return result1;
    }
    else if (num1, num2) {   // 인자를 2개 받았을 때 불린 값이 true
    	const result2 = num1 + " " + num2 + " ";
        return result2;
    }
    else if (num1) {   // 인자를 1개 받았을 때 불린 값이 true
    	const result3 = num1;
        return result3;
    }
}

addThird(1, 2, 3);  // 1 2 3
addThird(1, 2); // 1 2
addThird(1); // 1