TIL ⎮JavaScript_기초4_함수(Function)

> 함수의 추상화 감상하기

• 위에 있는 이미지는 함수를 아주 간략하게 추상화(abstraction) 시킨 것이다.
• 그렇다. 함수는
  • 내가 주는게 있으면(input)
  • 받은 것에 뭔가 기능을 해서(function)
  • 뱉어내는(output) 3단계의 과정을 거친다.(입, 소화기관, ㄸㄲ..)
• 그럼 앞으로 함수에게 어떻게 주고, 기능이란게 무엇이고, 어떤것을 뱉어내는지 알아보겠다.

🤗 내가 얻은 조언 중 손에 꼽는 한 가지가 바로 추상화 시켜라 라는 말이다.
함수를 코드로 처음 접했을 때 나는 1센티도 이해가 가지 않았다.
저 그림도 봤었지만 똑같았다.
하지만 추상화가 무엇인지 알고부터는 조금 달라졌다.
"뭐 어쩌라는거야?"라고 생각들던 저 그림이 무엇을 뜻하는지도 바로 알 수 있었다.
복잡한 가지를 다 쳐내고 일단 본질만 추려내는 것이 추상화의 의미였다.
음 그냥 돌머리인것 같기도 하다.

---

> 함수는 어떻게 동작하는가

▶︎ 함수의 선언과 호출

추상화에서 봤다시피 함수는 어떤 특정한 기능을 한다.
맞다. 그렇다면 가장 첫번째로 어떤 기능을 할 것인가 정해야 한다.

나는 함수로 김치찌개를 끓여보겠다.

Function: 그렇다면 함수는 찌개를 완성해야하므로 찌개를 만드는 기능이 들어간 찌개함수를 만들어 보겠다.

function 찌개함수 (퐁당) {
  console.log(퐁당 + "찌개");
}

• 우리는 이것을 함수 선언(정의)이라고 부르면 된다.
• 함수 선언의 역할은 바로 함수의 기능(function)을 담당하는 것이다.

Input: 그럼 재료를 넣어야겠고 간단한 예를 위해서 김치만 있으면 김치찌개가 된다고 가정하고 김치를 넣겠다.

찌개함수("김치");

• 우리는 이것을 함수 호출(실행)이라고 부르면 된다.
• 함수 호출의 역할은 바로 선언한 함수를 실행시키는 것이며, 또한 동시에 데이터를 주는(Input) 일을 한다.
  (🤗 어렵게 생각할 것 없이 변수를 선언한 후 변수에 담긴 데이터를 사용할 때는 그 변수명을 통해 가져오는 과정과 같으며, 기능과 데이터를 주고받을 수 있다는 점만 추가된 것이 함수다.

Output : 위에 두 과정을 거쳐서 맛있는 김치찌개가 나왔다.

함수의 output은 값이다.
아래에서 다시 설명하겠지만 참고로 위의 예시는 최대한 간단하게 설명하기 위해 가장 간단한 코드를 사용한 것이고 실재로 console.log()는 값이 아니다.

❗️ 함수는 참조형 데이터 탑입이므로 모든 자료형을 사용할 수 있다.
❗️ 함수의 형태는 다양한데 function과 output만 있는 경우고 있고 input과 function만 있거나 심지어 function만 있는 경우까지 있다. 그만큼 배우기 어렵지만 동시에 쓰이는 용도도 다양하고 가능성도 활짝 열려있는 멋진 도구다.(🤗 하지만 당연히 기본 원리와 형태를 알아야 쉽게 접근하고 배울 수 있으니 현재에 집중하자.)

---

> Function & Output

위에서 보았듯이 함수는
2) 받은 값을 선언한 기능(function)에 따라 조물조물하여
3) 변화된 값을 뱉어낸다.
1) 이 과정은 호출을 통해서 시작된다.
함수는 호출한 곳에 데이터를 반환(return)해 준다.

▶︎ Function

function 찌개함수 (퐁당) {
  console.log(퐁당 + "찌개");
}

함수의 선언은 다음과 같이 만들 수 있다.

• 컴퓨터가 함수인 것을 알아차릴 수 있도록 function을 적는다.
• 기능을 나타내기 좋은 함수의 이름을 붙인다(찌개함수)
• 이어서 ()(소괄호)를 적는데, 함수를 호출할 때 넣은 데이터를 받는 역할을 하므로 받게될 데이터의 별명을 () 안에 써준다.((퐁당))
  ❗️함수를 호출하는 코드의 ()안에 있는 글자와 맞추는 것이 아니다.
• 기능할 코드를 넣을 코드블럭인 {}(대괄호)를 만들고 그 안에 코드를 적는다(console.log(퐁당 + "찌개");)
  ❗️ 함수 호출로부터 받은 데이터를 사용하려면 함수 선언문에 있는 ()와 {}안에 글자를 똑같이 적어야 한다.(🤗 ()안에 것을 {}로 가져온다고 생각해보자.)

▶︎ return

함수는 선언 시 return을 품고 있어야 값을 반환해 줄 수 있다.

function 찌개함수 (퐁당) {
  let 찌개완성 = 퐁당 + "찌개";
  return 찌개완성;
}

console.log(찌개함수("김치")); // "김치찌개"

❗️함수 안에서 return을 빼거나 return 뒤에 아무것도 쓰지 않으면 그 함수는 빈 값을 의미하는 undefined를 반환한다.
❗️그럼 처음 찌게함수에서는 왜 return을 넣지 않아도 왜 undefined가 뜨지 않고 김치찌개를 내놓으며 동작했냐고 의문이 들 수 있는데, 사실 찌개함수는 값을 return했다기보다는 console.log()가 콘솔창에 값을 표시한 것이라고 보는 것이 맞다.(🤗 처음 찌개함수의 기능은 값을 반환(return)한 것이 아니라 보여(view)준 것이라서 undefined가 뜨지 않는 것이 정상적인 결과라는 의미!)

return이 돌려주는 값은 호출만으로는 console창에 나오지 않으니 당황하지 말자.
그렇다고 함수가 값을 돌려주지 않은 것은 아니다.
console.log()를 통해 함수를 호출해보면 확인해 볼 수 있다.
(🤗 브라우저의 개발자 도구(F12 클릭)에 있는 console창 에 코드를 직접 입력하면 값이 나오긴 하지만 VScode와 같은 IDE(Integrated Development Environment, 통합 개발 환경)을 통해 개발을 할 경우 터미널(개발과 관련된 입출력 도구) 등에 따로 해당 함수의 값이 출력되거나 하지 않는다.("jsbin"과 같은 개발 관련 웹페이지에서도 확인 가능.))
(🤗 그래서 확인을 위한 용도로 ‘console.log()’를 자주 사용한다.)

또한 함수에서 return된 값은 변수의 값으로 할당 수 있다.

function 나는생각한다 () {
  return "고로 존재한다.";
}

나는생각한다(); // 무반응.

// 함수는 값을 return하고 있다.
console.log(나는생각한다()); // "고로 존재한다."


//----------


// 재미로 각각의 경우를 변수에 담아 다시 `console.log()`를 찍어보겠다.
let 함수만 = 나는생각한다();
let 함수랑콘솔로그 = console.log(나는생각한다());

// 함수의 return값은 변수의 값이 될 수 있다.
console.log(함수만); // "고로 존재한다."

// "고로 존재한다"와 undefined 두 개를 출력한다. 값으로 못쓰겠다.
// console.log()가 console창에 출력은 했으나 값은 없는 상태다.
console.log(함수랑콘솔로그); // "고로 존재한다." 그리고 undefined


//----------


// 그냥 변수에 바로 담아보자.
let 궁금한건못참지 = console.log();

// 결국 값이 되지 못한 console.log()
console.log(궁금한건못참지); // undefined

> Input

function 찌개함수 (퐁당) {...}를 선언한 후
우리는 찌개함수()에 데이터 "김치"를 넣어 찌개함수("김치")라고 호출했었다.

▶︎ 매개변수(parameter)와 인수(argument)

함수 선언에 있는 (퐁당)은 매개변수(인자, 파라미터(parameter)) 라고 한다.
(🤗 관련 자료를 찾다보면 대부분 혼용해서 쓰고 실재로 같은 뜻이기 때문에 묶어서 외워두자.)

함수 호출에 있는 ("김치")는 인수(argument) 라고 한다.

함수를 호출하면서 데이터를 주고받는 방법에 대한 세부 내용은 다음과 같다.

• 호출하고 싶은 함수의 이름을 적는다.(찌개함수)
• 이어서 데이터를 넣을 수 있는 ()(소괄호)를 붙이고 데이터를 넣는다(("김치"))

찌개함수("김치");

❗️ 함수 선언의 ()와 호출의 ()는 연결되어 데이터를 주고받을 수 있으며 각각의 () 안에 문자는 서로 달라도 된다.
     (🤗 함수 선언의 매개변수는 선언문의 코드블록({...}안쪽)에서 위치를 자유롭게 해도 된다.)
     (🤗 또 한가지 팁이라면 매개변수는 말 그대로 변수다. 변수의 이름은 내 마음대로 지을 수 있다는 것과 어디서든 쓸 수 있음을 떠올리면 더 외우기 쉽다!)
❗️ ()를 통해 선언과 호출이 서로 여러개의 데이터를 주고받고 싶으면 ,(콤마)로 데이터를 구분하고 왼쪽부터 순서대로 자릿수를 맞추어 주고받으면 된다.

// 함수 선언 부분(매개변수)
function sm엔터테인먼트 (가수1, 가수2, 가수3, 날짜, 국가) {
  // 매개변수의 위치는 코드블록 내에서 자유롭게 위치해서 사용할 수 있다.
  console.log(`
    sm 해외공연 스케줄
    *가수: ${가수3}, ${가수2}, ${가수1}
    *국가: ${국가}
    *날짜: ${날짜}
  `);
}
// 함수 호출 부분(인수)
sm엔터테인먼트("태연", "레드벨벳", "김희철", 20210918, "LA");
// 아래 결과와 같이 함수 선언의 ()속 별명들이 함수 호출의 ()속 데이터를 왼쪽에서 오른쪽 순서대로 받아온 것을 확인할 수 있다.
/*
sm 해외공연 스케줄
// 매개변수를 코드 내에서 가져다 쓸 때는 순서가 상관없다.
*가수: 김희철, 레드벨벳, 태연
*국가: LA
*날짜: 20210918
*/

---

> 함수의 재사용성

지겹겠지만 나는 또 찌개함수를 가져올 것이다.
또한 이렇게 소개할 기능이 많은게 함수의 매력 중 하나다.

한개의 함수는 무한히 재사용 할 수 있다.
호출 시 보내는 데이터(인수, argument)를 바꿔줌에 따라
선언 시 만든 기능을 토대로 관련된 값을 계속해서 얻어낼 수가 있다.

function 찌개함수 (퐁당) {
  let 찌개완성 = 퐁당 + "찌개";
  return 찌개완성;
}

console.log(찌개함수("된장")); // "된장찌개"
console.log(찌개함수("고추장")); // “고추장찌개”
console.log(찌개함수("어제먹다남은")); // “어제먹다남은찌개”

"찌개만 만들어서 뭐하냐!" 라며 뭔가 와닿는게 없을 수 있기에
조금 더 실생활에 유용한 함수를 만들어보자면 다음과 같다.

function 곱배기맨 (a, b) {
  return a * b
}

console.log(곱배기맨(2, 4)); // 8
console.log(곱배기맨(10, 10)); // 100
console.log(곱배기맨(3, 98498)); // 295493

---

> 함수와 변수

▶︎ 함수의 폐쇄성

함수 내부에서 선언한 변수/상수는 함수 밖에서 접근하지 못한다.
이것을 지역변수(local variabl)라고 부른다.

function 사랑받는_남자의_함수 () {
  var 역적 = "연정훈, 비";
  let 이쁨 = "수지";
  const 초이쁨 = "내껌딱지";
  return 초이쁨;
}

// "내껌딱지"만 리턴하는 사랑받는_남자의_함수.
console.log(사랑받는_남자의_함수()); // "내껌딱지"

// 역적, 이쁨, 초이쁨 변수들을 함수 밖에서 꺼내려 해도..
// 그들은 정의되어 있지 않다며 함수 밖을 나오지 못한다.
console.log(역적); // ReferenceError: 역적 is not defined
console.log(이쁨); // ReferenceError: 이쁨 is not defined
console.log(초이쁨); // ReferenceError: 초이쁨 is not defined

▶︎ 함수의 오지랖

반면에 함수 외부에서 선언한 변수/상수는 함수 내부에서 접근이 가능하다.
이것을 전역변수(gloval variabl)라고 부른다.

let 일절만하자 = "밖에 모르는 바보";

function 사랑받는_남자의_함수 () {
  const 초이쁨 = "내껌딱지";
  return 초이쁨 + 일절만하자;
}

// "내껌딱지"만 리턴하는 사랑받는_남자의_함수.
console.log(사랑받는_남자의_함수()); // "내껌딱지밖에 모르는 바보"

심지어 전역변수의 값을 바꿀 수도 있다.

❗️ 지역변수의 이름과 전역변수의 이름을 같게 짓고 지역변수는 변수 기호를 빼야한다.
❗️ 당연하게도 변하지 못하는 상수 const는 적용이 안된다.("TypeError: Assignment to constant variable. 에러 발생)

let 일절만하자 = "밖에 모르는 바보";

function 사랑받는_남자의_함수 () {
  const 초이쁨 = "내껌딱지";
  일절만하자 = "님 사..사...사는동안 많이버시오!!"
  return 초이쁨 + 일절만하자;
}

// 1. 일단 전역변수는 원래 있던 값을 반환한다.
console.log(일절만하자); // "밖에 모르는 바보"

// 2. 전역변수와 똑같은 이름으로 지역변수를 만들어 새로운 값을 대입하면 함수는 그 값을 사용하고
console.log(사랑받는_남자의_함수()); // "껌딱지님 사..사...사는동안 많이버시오!!"

// 3. 전역변수의 값도 함수의 지역변수의 값과 똑같이 바뀌게 된다.
console.log(일절만하자); // "님 사..사...사는동안 많이버시오!!"

---

🌈 작은 회고 🤔

금요일부터 쓴 글이 그 다음주 화요일 저녁이 되어서야 완성되었다.
항상 그렇듯 이번에도 완벽하게 마음에 들지 않지만
계속된 약간의 역경들에도 결국 글을 맺었다는 것에 결국 미소가 난다..후훟!

한 번에 글을 못쓰다보니 보고또보고의 연속이어서
능률로는 최악이었지만 덕분에 오타나 글을 다시 잡는데는 득이 되었다.
역시 마냥 나쁘기만 한 것은 없나보다.

나름대로 나의 시행착오와 에로사항들을 계속해서 떠올리며
코딩 초보인 누군가에게 세상가장 쉬운 글을 쓰기 위해 노력했는데
의도대로 잘 됐는지는 모르겠다.

아 물론 그러면서 내게 return되는 값어치들 또한 크다.

특히 난해하게 알고 지나갔던 것들이 제대로 정리되고 이해되었다!

일단 가장 쉽게 설명해주신다는 egoing님보다 더 쉽게 설명해보겠다는게 지금의 목표다.

10원 한 장 받지 않고 세상을 이롭게 하시는 너무 멋진 사람중 한 분이시기에 동경하는 마음으로 오늘도 나름의 노력을 해 본다.

역경은 지나가고 과정과 결과는 남는다.