Javascript - Functions

Functions

Function Declarations (함수 선언)

function A () {}
함수를 생성하는 방법 중 하나

Calling a Function (함수 호출)

함수를 선언하는 것은 함수 자체를 정의하는 것이고, 함수를 불러내기 위해서는 함수를 호출하여야 한다

예를 들어,

function song() {
	console.log("Mr. Brightside");
 };
 
song(); // Output : Mr. Brightside 
song(); // Output : Mr. Brightside 
song(); // Output : Mr. Brightside 

(song function 을 declaration한 후, song(); 을 통해 call)

Parameters and Arguments (매개변수와 전달인자)

• parameter (매개변수) - 함수와 메서드 정의에서 나열되는 변수(Variable)
• argument (전달인자) - 함수와 메서드의 실제 입력 값(Value)

함수를 선언하고 정의할때 parameter이 사용되며,
함수를 호출할때 argument가 사용된다.

예를 들어,

function song(songName){
  console.log(`My favorite song is "${songName}".`);
};

song('Mr. Brightside');
// Output: My favorite song is "Mr. Brightside".

• function song을 declaration하고, songName 이라는 variable(parameter) 설정
• argument에 Mr. Brightside 을 부여하면 value 값인 argument가 적용된 코드가 실행 (함수가 호출될 때 제공되는 값)

Default Parameters

value가 없거나 undefined된 parameter 에 default 값을 부여해줄 수 있다

함수 선언 시 parameter 에 value 를 부여해주면, argument가 undefined 혹은 none value 일 때 default parameter가 출력된다

function song(songName = 'Fly Me to the Moon'){
  console.log(`My favorite song is "${songName}".`);
};

song();
// Output: My favorite song is "Fly Me to the Moon".
song('Mr. Brightside');
// Output: My favorite song is "Mr. Brightside".

(함수 선언 시 songName에 default 값인 'Fly Me to the Moon'을 부여해주어 argument가 없이 호출된 첫번째 song();에 default값이 부여)

Return

return

함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환
함수 내부에 return 코드를 작성하게 되면, 컴퓨터는 함수 내부의 코드를 실행하다가 return 코드를 만나게 됐을 때 중단을 하게 된다.
사전에 값을 지정했을 땐, 함수를 호출한 곳에 컴퓨터가 return 문에 있는 것을 반환하여 도출한 값을 출력하고,
사전에 값을 지정하지 않았을 땐, undefined 가 출력된다
(return 코드를 사용할 때에는 = 를 사용하지 않는다)

예를 들어,

function rectangleArea(width, height) {
  let area = width * height;
}
console.log(rectangleArea(5, 7)) // Prints undefined

(rectangleArea 함수 내부의 조건문을 만족하면 첫번째 return 문장이 출력되고,
만약 조건문이 충족되지 않으면 두번째 return 값이 출력된다.)

function basic1(a, b){
  let add1 = a+b;
  return add1
}
console.log(basic1(1,2)); // Output: 3

(basic1 함수 첫줄에 두 parameter을 더해주는 변수 add1을 설정하고,
두번째 줄에 return 문을 넣어주게 되면 함수를 호출할 시 사전 값(1,2)을 지정했기 때문에 return 코드에 있는 add1을 출력한다.)

Helper Functions

다른 함수 안에서 호출되는 함수

예를 들어,

function plusTen(a,b){
  return a+b+10;
}

function plusTenminusFive(a,b){
  return plusTen(a,b)-5;
}

let numbers = plusTenminusFive(1,2);

console.log(numbers); // Output: 8

위 코드열에서 plusTen 함수는 plusTenMinusFive 함수의 helper function이다.
순서대로 짚어보면,

1) console.log → numbers parameter 을 찾고
2) numbers → plusTenMinusFive(1,2) 를 찾고
3) plusTenMinusFive(1,2) → plusTen(1,2)-5 함수를 실행하고
4) plusTen(1,2) → 1+2+10 이라는 return 값 실행

Function Expressions (함수 표현)

variable을 사용해 함수를 선언하는 방법

• ES6 이후로 const 변수를 사용해 함수를 선언하는 것이 일반화
• 변수를 사용해 함수를 선언할 경우 별도의 함수명이 없다 (anonymus function 으로 지칭)

예를 들어, 아래 두 코드는 동일하다고 볼 수 있다.

const songQuiz = function(songName){
  if(songName === 'Fly Me To The Moon'){
    return 'You are right!'
  } else if(songName === 'Love Me Tender') {
    return 'That\'s my second favorite!'
  } else {
    return 'Guess again pal!'
  };
};

console.log(songQuiz('Fly Me To The Moon')) // Output: You are right!
console.log(songQuiz('Love Me Tender')) // Output: That's my second favorite!
console.log(songQuiz('Mr. Brightside')) // Output: Guess again pal!

//

function songQuiz(songName){
  if(songName === 'Fly Me To The Moon'){
    return 'You are right!'
  } else if(songName === 'Love Me Tender') {
    return 'That\'s my second favorite!'
  } else {
    return 'Guess again pal!'
  };
};

console.log(songQuiz('Fly Me To The Moon')) // Output: You are right!

Arrow Functions (화살표 함수)

=>

화살표를 사용해 함수를 표현하는 또 다른 방법
function 을 지우고 parameter 와 코드를 => 로 이어줄 수 있다.

예를 들어,
아래 두 코드는 같다고 볼 수 있다.

const songQuiz = function(song1, song2) {
};

// 

const songQuiz = (song1, song2) => {
};

Concise Body Arrow Functions (화살표 함수 활용)

function 의 parameter 개수에 따라 화살표 함수를 다르게 사용 가능

// Zero Parameter
const functionName = ( ) => { };

// Single Parameter
const functionName = paramOne => { };

// Two or More Parameter
const functionName = (paramOne, paramTwo) => { };

블럭 내부 코드가 한 줄일 경우에는 중괄호({ })도 생략 가능
아래 세 코드는 모두 동일하다

const squareNum = function(num) {
	return num * num;
};

//

const squareNum = (num) => {
	return num * num;
};

//

const squareNum = num => num * num;

Take Away

• return
  이거다..
  이틀동안 함수를 배우며 공부하던 나에게 내려온 한줄기 빛과 소금같은 존재..
  javascript를 배우면서 머릿속에서 맴돌았던, 정리되지 않았던 개념들이 return문을 통해 '어느정도는' 정립된 느낌이다.
  내가 왜 이런 기분을 느꼈는지, 나중에라도 찾아보기 위해서 아래와 같이 정리해본다.

// 1.
function test(a,b){
    a+b
};
console.log(test(1,2)); // Output: undefined


// 2.
function test(a, b){
    let add = a+b
};
console.log(test(1,2)); // Output: undefined


// 3. 
function test(a, b){
    let add = a+b
};
console.log(add(1,2)); // Output: referenceError


// 4. 
function test(a, b){
 	console.log(a+b);
};
test(1,2); // Output: 3


// 5. 
function test(a, b){
	let add = a+b;
  	return add;
}
console.log(test(1,2)); // Output: 3

만약 함수의 겉만 핥았던 어제의 내가 덧셈 함수를 선언하고 출력하고자 했으면 위 1,2,3번 정도 적으면서 헤매다가 4번을 만들었을 것이다.
우선 난 1) console.log() 를 제대로 이해하고 있지 못했으며, 2) 함수의 출력에 대해 제대로 이해를 하고 있지 못했다.
결국 function이란것의 수학적 의미에 갇혀있는게 문제였던 것이다.

함수란, 단순히 값의 연산을 이용하는 것이 아니라 "작업의 수행" 그 자체로도 기능을 하고 있는 것이다.

다시 각 코드로 돌아가보면..

1 → 함수를 선언은 했지만, 정확히 어떤식으로 parameter들이 정의되어야하는지 블록 내에 제대로 표현이 되지 못했다. 그러니 출력하려고 해도 컴퓨터는 알 수가 없는 것이다.
2 → 그래서 변수를 하나 만들어주고, 그 변수를 통해 parameter들이 어떻게 정의되는지 정했다. 하지만 여전히 변수가 어떻게 처리되어야하는지에 대한 코드는 없으므로 쓸모가 없는 것이다.
3 → 변수와 함수의 선후관계를 착각한 시도

4 → 이해를 하기 시작. parameter들이 어떻게 표현되어야하는지를 알려주었고, 이후에는 function을 호출하면 된다.
5 → return을 통해 함수 실행을 종료하고, 출력할 수 있게 해주었다. 이제서야 내가 원하는 것이 완성.

사실 각 코드를 해석하면서도 내가 이해한게 맞나 싶은 부분들이 있다. 솔직히 말하면 아직 누구에게 멋드러지게 설명할 자신은 없다.
하지만 내 머릿속의 풀리지 않았던 안개들이 약 10% 정도는 걷히는 기분이다.

나중에라도 이 코드들의 차이를 다시 제대로 설명할 수 있었으면 좋겠다.

• 재미
  뭔가 재밌다
  학부생때 CAD를 배울때와 같은 느낌이다. CAD의 경우도 내가 직접 도면을 설계하고, 그것이 화면에 바로바로 표시된다는게 재밌어서 수업에서 수석을 차지했었는데 지금 Javascript의 기초를 배울때도 동일한 기분이다.
  이러한 기분을 계속 이어나갔으면 좋겠다.