자바스크립트 함수(정의, 호출, 배열 객체, 이벤트)

함수

• 특정 기능을 하는 구문(알고리즘,로직)을 독립된 형태로 만드는 것
• 변수에 저장할 수 있는 한가지 자료형

함수 구조 형식

var {함수명}=function(){//저장할 코드 }
- 축약 형식 : function{함수명}(){//저장할 코드 }

함수 실행

• {함수명}()로 저장된 코드를 실행

var sayHello = function() {
  condole.log('Hello~');
}
sayHello();

//같은 코드
function sayHello(){
  console.log('Hello~');
}

함수에 값 전달하기

• 함수에 저장된 코드를 실행할 때 값을 전달할 수 있음
• 매개변수 사용 함수 형식
  function{함수명}(값1,값2,…){}
• 값1,값2,…매개변수라고 함
• 코드 블럭 안에서 전달 받은 값 사용 가능
• 함수에 전달하는 값을 함수 인자라고 함

function square(x){
  console.log(x*x);
}

square(2);
square(5);
square(0.1);

출력:
4
25
0.010000000000000002

왜 0.1*0.1한 값이 0.010000000000000002일까?
: 컴퓨터는 10진수를 2진수로 저장하기 때문에 0.1은 2진수로 딱 떨어지지 않는 무한소수이므로 소수 계산에서 오차 발생함

값을 반환하는 함수

• 함수의 실행 결과를 반환

• 함수 코드 블록 안에서 return{값}형식 사용

• 함수 형식

  function{함수명}(값1,값2,…){
  ....
  return{값}
  }

• 반환된 값은 다른 표현식들과 같은 취급

함수를 인자로 전달받는 함수

• 함수의 인자로 함수명을 전달
• 함수 내부에서 전달받은 함수를 실행

function operator(x, y, func) {
  return func(x, y);

function add(a, b) { return a+b )
function subtract(a, b) { return a-b }

condole.log(operator(4, 2, add)); // 6출력
condole.log(operator(4, 2, subtract)); // 2출력

---

setTimeout

• 형식
  setTimeout(함수,지연 시간);
• 특정 시간이 흐른 후 코드를 실행하고 싶을 때 사용
• 첫번째 인자로 실행할 함수를 받고 두번째 인자로 지연될 시간을 밀
  리초(1/1000) 단위로 받음

Array 객체의 함수

함수명	설명
Array.forEach	배열의 요소를 인자로 전달받은 함수를 배열의 길이만큼 호출
Array.map	forEach와 비슷하지만 전달받은 함수의 반환 결과들로 이루어진새 배열을 반환
Array.filter	forEach와 비슷하지만 전달받은 함수의 반환 결과가 참인 요소들로만 이루어진 새 배열을 반환

---

자바스크립트 이벤트

• 사용자의 입력을 처리
• HTML태그 마다 다양한 이벤트가 발생됨
• click,focus,blur등
• 이벤트 처리기는 이벤트 발생 시 실행할 함수를 전달받음

이벤트 처리기 등록

• 자바스크립트로 html요소를 선택한 뒤 addEventListener 함수를 호출
• 형식
  • addEventListner(이벤트이름,실행할 함수)
  • 첫 번째 인자: 이벤트의 이름
  • 두 번째 인자: 이벤트가 발생했을 때 실행할 함수

Click이벤트

• HTML 요소를 마우스로 클릭하거나 터치 디바이스에서 터치시 발생
• 마우스 이벤트 중 하나로 mousedown,mouseup 이벤트 발생 후에 발생됨
• 버튼 뿐만 아니라 모든 HTML요소에서 이벤트가 발생되고 이벤트 처리기를 등록할 수 있음