자바스크립트 구성요소 ~ 함수-재사용 가능한 블록

함수 vs 메소드

• 메소드(Methods)

  • Built-in browser functions
  • String의 replace, split, Math의 pow, random , Array의 join 등과 같은 빌트인 함수들
  • Object 안에 정의된 functions

• 함수(functions)

  • 일반적으로 생각하는 function

---

사용자 정의 함수

• 예시

  function draw() {

  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (var i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }

  }

  function random(number) {

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

  }

---

익명 함수

• 이름이 없는 함수로, 주로 이벤트 핸들러와 사용한다.

  var myButton = document.querySelector('button');
  myButton.onclick = function() {
    alert('hello');
  }

  • 이벤트 발생에 따른 수많은 코드를 사용시키기 위해 주로 쓰임

• 변수 속의 익명함수와 호출 방법

  var myGreeting() = function() {
    alert('hello');
  }
  
  myGreeting(); // 호출 방법

  • 하지만, 위의 경우가 많아질수록 헷갈리기 때문에 쓰지 않음.

---

매개변수

• argument, properties, attributes, parameter 라고 불림

---

함수 스코프와 충돌

• 변수 및 함수 내 정의된 코드들은 그들만의 스코프 안에 자리한다. 즉, 다른 함수의 내부나 외부 함수의 코드가 접근할 수 없는 그들만의 구획에 갇혀있다는 말
• 함수 바깥에 선언된 가장 상위 레벨의 스코프를 전역 스코프(global scope)라고 부름

• JavaScripte는 안정성과 구조 떄문에 스코프를 사용

• 예시

  <!-- Excerpt from my HTML -->
  <script src="first.js"></script>
  <script src="second.js"></script>
  <script>
    greeting();
  </script>
  // first.js
  var name = 'Chris';
  function greeting() {
    alert('Hello ' + name + ': welcome to our company.');
  }
  // second.js
  var name = 'Zaptec';
  function greeting() {
    alert('Our company is called ' + name + '.');
  }

  • 두 함수 모두 greeting()라고 불리지만, second.js 파일의 greeting() 함수에만 접근 가능
  • HTML 소스 코드 상 후자이므로, 그 파일의 변수와 기능이 first.js의 것을 덮어쓴다.