함수 TIL(24)

오늘은 자바스크립트 중 많이 부족하다고 느꼈던 함수 부분을 공부했다.

원래 심화 자바스크립트 강의듣고 와..내가 진짜 아직 부족한 부분이 많구나 하고 식겁해서 다시 첨부터 공부하고 있다.

듣다보면 이건 아는건데? 하는부분도 있지만 그 사이사이에 아 이런 부분도 있었구나~ 하는게 많았다....ㅠㅠ 헛 공부한 느낌이야....

---

<기본>

일단 함수는 1.작은단위로 사용한다.

                  2.함수기능에 맞는 이름을 사용한다.

                  3.매개변수 이름도 그에 맞게 사용한다.

똥손에 고통받는 아이패드

저기 네모가 함수라고 생각하면 된다. input이 있으면 ouput이 있다.

 

여기서 중요한 점은 function add(a+b){return a+b};

이렇게 있다고 하자. 그럼 저기서 add는 함수를 참조 하고 있는 것이다. 즉, 주소값을 가지고 있다고 생각하면 된다.

예를들어서 let a =2; 일경우에 a는 2라는 직접적인 값을 가지고 있다.( 이걸보고 원시값이라고 한다)

그러나 함수는 직접적인 값이 아닌 위의 그림과 같이 주소를 가지고 그 정보를  땡겨온다? 그런 느낌으로 생각하면 된다.

그래서 function add(a+b){return a+b}; 여기서 만약 const sum = add;라고 할 경우 sum은 add와 같은 주소를 참조한다고 생각할 수 있다.

---

<parameter>

parameter: 매개변수

내가 이해하기 편하게 생각하자면 이 값은 밖에서부터 안으로 값을 들고 들어갈 수 있게 해주는 인자? 같은 느낌이다.

이 변수를 통해서 값들을 안에 넣고 함수로 들어갈 수 있는 그런 변수라고 이해하기 쉽게 생각할 수 있다.

function sum(a,b){
	console.log(a);
    console.log(b);
    console.log(arguments[0]);
    console.log(arguments[1]);
    
    return a+b;
    }
    
    add(1,2)

당연히 여기서 a=1, b=2 이다.

근데 arguments라는 부분을 잘 몰랐다. 알아보니 값을 인덱스에 매겨서 배열식으로 나오도록 해준다.

그래서 이걸 통해서 각각의 값에 접근이 가능하다.

콘솔창에 확인해보니 이렇게 나오는 것을 확인 할 수 있다.👆🏻

 

두번째 예시로

function sum(a,b,...numbers){
  console.log(a);    //1
  console.log(b);   //2
  console.log(numbers); //[3,4,5]
   
   sum (1,2,3,4,5)

numbers : 얼마나 많은 수가 들어올지 모를 경우에 저렇게 만들어서 매개변수로 사용할 수 있다.

                  콘솔로 확인해보면 배열로 나머지 숫자가 묶이는 것을 확인 할 수 있다.

 

---

<화살표함수>

:화살표함수ㅋㅋㅋ첨에 보고 이게 뭔가 했다....ㅎ 프로젝트랑 알고리즘하면서 만났던 친구인데 제대로 사용도 잘 못하고 써먹어보려니 얼마나 어렵던지 아직까지 눈에도 덜 읽어서 fucntion~이렇게 적혀있는 부분이 더 잘 읽히긴 한다. 그렇지만 확실히 코드가 깔끔해져서 계속해서 써보려고한다.

add=(a,b)=>{return a+b;}

여기서 만약 {}안에 아무런 식이 필요없고 바로 값만 출력할 경우 {}와 return을 없앨 수 있다.

==========

 add = (a,b)=> a+b;

==========

function add(a,b){

return a+b;

}

확실히 비교해보면 한 줄로 깔끔하게 적을 수 있다 당연히 값도 똑같이 출력이 된다.

---

<고차함수>

:사실 이 부분이 진짜 어려워서 몇번을 반복하면서 들었다. 근데도 아! 그렇쿠나! 하면서 딱 떨어지게 와닿는 부분은 없다...

이걸 어떻게 써야하나...이걸 실제로 내가 사용이나 할수있나..이런 생각이 든다...ㅎ

 

▷고차함수= higher-order function

1.인자를 함수로 받는 함수(=콜백함수)

2.return을 함수로 받는 함수

 

예시는)

const add= (a,b)=>a+b;

const multiply=(a,b) => a*b;

이렇게 더하기와 곱하기를 함수 두가지가 있다.

 

그럼 이 함수들을 사용하는 고차함수를 만들어보자면

function calculator(a,b,action){
  let result= action(a,b)
  console.log(result)
  return result;
}

 calculator(1,2,add)
 calculator(1,2,multiply)

이 위의 calculator함수는  action함수를 매개변수로 받는 고차함수이다.

그럼 여기서 action = 콜백함수이다.

사용자가 함수를 제어하는 것이 아닌 함수가 주어진 콜백함수를 제어하는 형식이다. 그래서 언제 이 함수가 호출될지 모르기 때문에 콜-백 함수라고 부른다고 한다. 

 

즉, 내가 이 calculator함수를 호출하지않으면 저 안의 콜백함수도 호출이 되지 않을 것이고,

 매개변수로 action을 호출 하지 않으면 함수가 시작하지 않으니 호출하면 나오는 함수라고 생각하면 될껏같다.

 

function calculator2(a,b,action){
	if(a<0||b<0){
    return    //a,b가 0이 안되면 그냥 끝내라
    }
}

calculator(-1,-2)

이렇게 예시를 들자면 일단 조건에서 음수이면 return(끝)이므로 함수가 호출되지 않는다. ==>콜백함수라고 한다.

---

<불변성>

객체를 주고 받을 때 값이 변경되지 않도록 하는 것은 중요하다✅

function testObj(obj){
 obj.name='bob';
 console.log(obj);
}

const myname = {name: 'puth'};
testObj(myname);
console.log(myname);

여기서 아주아주 잘못된것은 두번째 줄에  obj.name='bob'❌❌❌❌❌❌❌

아까 위에서 얘기했듯이 함수는 주소를 참조한다. (참조형)

그래서 myname 은 {name:'puth'}주소를 참조하고 있다.

근데 testObj함수로 myname을 들고 들어갔더니 name을 bob으로 하는 코드가 있다..

이러면 같은 주소를 참조 하고 있었는데 그 참조값을 bob으로 바꾸기 때문에 본래의 값이 변경 될 수가 있따.

 

이렇게 찍어보면

{name:'bob'}

{name:'bob'}

이라고 나오는 것을 확인 할 수 있다.

 

그래서 항상 본래의 값을 건드리지 않기 위해서 함수를 새로 만들거나 변수를 새로 만들어서 사용하는 습관을 만들어놔야한다.

---

오늘 함수에 대해서 뭔가 공부를 했는데 분명 잘 모르고 지나갔던 부분을 알 수 있었지만 

이것을 사용해보지 못한다면 말짱 도루묵일테니까 나중에 알고리즘 문제나, 프로젝트에 써보면서 그때그때 부족한 부분을 찾아서 정리하고 

사용해보면 확실히 더욱 더 내 공부가 될 수 있을 것 같다.

오늘의 TIL끝 😎