https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions

재사용 가능한 코드 블록

기능은 어디에서 찾을 수 있습니까?

내장 브라우저 기능

함수 대 방법

우리가 지금까지 사용한 내장 코드는 함수 와 메서드의 두 가지 형태로 제공됩니다 .
=> 함수 형태와 메서드의 구별이 어떻게 되는거지?

https://ryublock.tistory.com/49

=> 정의의 차이인데 함수는 메소드를 포함한 더 포괄적인 개념. 또 메소드는 객체 안에서 작동된다.

=> 실습 코드 중 canvas를 이용하는데 예전에 k-mooc에서 canvas를 다양하게 활용한 적이 있었다. 그래서 언젠가는 개발에 분명 활용해봐야겠다고 생각을 했는데 내일 할당량에서 해당 공식문서를 공부하고 당장 지금 개발하고 있는 Helngers의 모달창 배경에 반영해보아야겠다! 일단은 동그라미로 해보고 나중에 헬로를 넣어보는걸로 ㅋㅋ

https://developer.mozilla.org/ko/docs/Web/API/HTMLCanvasElement/getContext

실습 코드 중 생소했던 메소드들

const ctx = canvas.getContext('2d');

let WIDTH = document.documentElement.clientWidth;

    function random(number) {

      return Math.floor(Math.random()*number);

    }

=> 사용자정의 함수인 random에서 왜 Math.random()*number 이게 들어가는지 사실 아직도 모르겠음 ;

=> 코치님한테 여쭤보다가 깨달음 ;;
number로 들어오는 인자의 값은 100%라고 보면 됨
왜냐하면 documentElement의 전체 가로, 높이를 가져왔기 때문에 그렇기에 0~1 사이의 십진수를 가져오는 값을 곱해줌으로 0~100 사이의 값을 임의로 지정할 수 있게 한다.

오케바리

함수 호출

익명 기능

그러나 이름이 없는 함수를 만들 수도 있습니다.
이것을 익명 함수 라고 합니다 . 이름이 없습니다! 또한 자체적으로 아무것도 하지 않습니다. 일반적으로 이벤트 핸들러와 함께 익명 함수를 사용합니다. 예를 들어 다음은 연결된 버튼을 클릭할 때마다 함수 내부의 코드를 실행합니다.

const myButton = document.querySelector('button');

myButton.onclick = function() {
  alert('hello');
}

기능 매개변수

함수 범위 및 충돌

=> 동물원을 예시로 들었는데 재밌게 읽었다.

능동적 학습: 범위 활용

함수 안의 함수

https://github.com/2taesung/JSOfficialDoc

생각

함수의 활용은 무궁무진한 것 같다.
알고리즘 풀면서 var를 무의식적으로 때려박았는데 그것은 사실 스코프에 문제가 생길 두려움 때문이였다.
앞으로 함수 블록을 잘 생각하면서 let을 사용해야겠다.

앞으로 이벤트 등을 작동 시킬때 그 안에 전역 함수를 이용하면 무척 편리할 것 같다.

또한 js 단위로 코드를 빼놓는 것 역시 충분히 시도해볼만 하다 생각.