혼공스(챕터5) 함수

함수

[프로그래밍 언어의 함수 : 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행단위로 정의한 것]

함수를 사용하는 이유(In 모던자바스크립트)
1. 코드의 재사용성 → 유지보수의 편의성 증가(모듈화)
2. 코드의 신뢰성을 증대
3. 코드의 가독성을 향상
     ☞ 정의에서 말하는 실행단위라는 것은 정의하는 함수명으로 그 실행단위를 설명할 수 있도록 하는 것을 포함

+ @@ 함수 내에서 작업하였을 때 좋은 점
4. 모듈화를 통한 정보은닉(캡슐화의 장점)
    ☞ 클로저를 통해 함수의 변수에 대한 캡슐화가 보장됨.(공식문서)
5. 코드의 생명주기를 부여함으로써 성능 향상(전역에서 작업하게 되었을 때에는 생명주기가 길어 성능면에서 떨어진다.)
6. 스코프 체인을 생각해봤을 때에 함수 안에서 선언하여 작업을 하였을 경우 필요한 변수를 찾는 것이 빠르다.
(렉시컬 스코프 → 전역 스코프로 변수를 찾아갈 때에 전역 스코프는 스코프 체인의 가장 종점에 위치함.)

* 클로저 : 함수와 함수가 선언된 렉시컬 환경과의 조합(공식문서) 
      → 렉시컬 스코프란? 그냥 그 함수가 어디에 정의되어 있는지를 말한다고 보면 된다.(정적 스코프 개념)

기본적으로 함수에 대해서 공부하기에 앞서 함수란? 결국 객체이다.

함수를 선언하고 함수를 드릴링 해보면 이자식도 키와 값으로 이루어진 객체라는 것을 알 수 있다.(아래 사진 참조)

(아, 함수를 선언하면서 저기에서 내가 사용할 것들을 js가 담아서 객체로 만들어주는구나 생각하면 된다.)

함수 선언방법에 따른 함수 생성 시점
1. 함수 선언문 : 함수 정의 자체가 호이스팅 됨.(어디에서든 함수가 호출될 수 있음.)
     ☞ 함수 호이스팅
2. 함수 표현식 : 변수 호이스팅으로 작동하여 식별자는 생성되지만 함수 자체가 호이스팅 되지 않음. 즉, 함수 표현식까지 코드실행이 되고서야 함수가 정상적으로 작동이 된다는 것.(그 전에는 undefined가 나옴)

★ JSON 창안자(더글라스 크락포드) 권장은 함수 표현식을 사용해라.
   why? 함수 호이스팅은 함수를 호출하기 전에 함수가 선언되어야 한다는 기본적인 규칙을 어기게 되기 때문.
<함수 표현식이 const a= ()=>{} 이런식으로 변수에 함수를 넣어주는 방법을 이야기 함.>

함수의 선언은 여러가지가 있을 수 있다. 결국 본인한테 맞는 것을 사용하면 된다!

나는 this 객체 때문인지 화살표함수가 좋다. 이놈에 JS에서 함수에서 this를 쓰다보면 머리가 아프다.

왜냐면 JS 설계상 오류로 인해서 this가 전역에서 놀기 때문이다.

그럼 화살표 함수는 무엇이 다르냐고? 화살표 함수는 내부에 this라는 놈이 없다. 
JS 특성에 따라서 이놈한테 없기 때문에 바로 위에 놈한테 찾게된다.

화살표 함수는 ES6에서 개선된 사항인데 이 방법은 객체 생성자 함수로 사용하지만 않으면 문제는 없다.

---

매개변수

매개변수란 함수를 선언할 때에 () 안에 들어가는 친구들을 이야기 한다.

함수 안에서 어떠한 값을 사용해야할 때에 그 스코프 안으로 정해진 변수를 던져주는 역할이라고 생각하면 될 것 같다.

보통 어떠한 예제들이나 구현된 프로젝트들을 보다 보면 함수화 된 작업들이 많다. 왜일까?
const 함수 = ()=>{const 변수 = 값}

---

결론은 협업에 있어서 또는 내가 할 수 있는 변수 선언과 같은 기본적인 작업들에 대한 실수를 방지할 수 있기 때문이라고 생각이 들었다. 특히나 협업 작업을 할때에 내가 작업해놓은 것들이 호이스팅 과정에서 조작되지 않게 분리해놓기가 블록(함수) 안에서 작업함으로써 유용하다고 생각이 들었다.

매개변수로 값을 넘겨주는 것 있어서 JS의 장점이자 단점인 '자유로움'이 어떠한 면에서 단점으로 작용할 수 있다고 생각이 된다. 이러한 부분들에 대한 유효성 검사가 바로 개발자로서 고민해야되는 것이라고 생각이 된다.

아주 쉽게 예를 들면 어느 함수설명에서도 나오는 더하기 함수를 보면 된다.
const add=(a,b)=>a+b
라고 했을때 내가 의도하는 것은 더하기이나 a와 b에 문자를 넣어도 결과가 리턴 된다.

add(a,b) // ab
이러한 것을 함수 내부적으로 유효성검사하도록 하는 것이 개발자가 할 일이라고 생각한다.
★별표 백만개 : 내가 생각한 입력이 내가 생각한 출력이 나오도록 하는 것!

---

나머지 연산자와 전개 연산자

나머지 연산자 : 여러개의 값을 배열에 담는 것

전개 연산자 : 배열을 요소별로 전개시키는 것(배열을 복사할 때에 많이 사용함 / 구조상 원본과 다른 새로운 저장소를 만듬.)

 

공식문서 : 함수

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions#:~:text=%ED%95%A8%EC%88%98%EB%8A%94%20JavaScript%EC%97%90%EC%84%9C%20%EA%B8%B0%EB%B3%B8%EC%A0%81%EC%9D%B8,%ED%95%A8%EC%88%98%EB%A5%BC%20%EC%A0%95%EC%9D%98%ED%95%B4%EC%95%BC%EB%A7%8C%20%ED%95%A9%EB%8B%88%EB%8B%A4.

함수 - JavaScript | MDN