javascript 3 - 함수와 이벤트

박준영·2024년 12월 2일

함수와 이벤트

 함수

  • 함수란 프로그래밍 소스 안에서 일정한 동작을 수행하는 코드들을 의미한다.
  • 각 명령의 시작과 끝을 명확하게 구별할 수 있고, 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.

javascript에서의 함수

  • 함수 선언 및 호출
    • function 예약어를 사용하고, {} 안에 실행할 명령을 작성한다.
     // 함수 예약어 함수명 (매개변수/파라미터) { 실행할 코드 }
     function addNumber (a, b) {
         return a + b;
     }
    • 호출시 함수 이름을 사용한다.
      let sum = addNumber(10, 20);
      console.log("sum : ", sum);	// sum : 30
    • 선언된 함수는 호이스팅이 된다.
  • 매개변수(parameter)
    • 함수를 실행하기 위해 필요하다고 지정하는 값.
    • 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음
  • 인수(argument)
    • 함수를 실행할 때 매개변수로 넘겨주는 값
  • return 문
    • 함수를 실행한 결과값을 호출 위치로 넘겨주는 문.
  • 스코프(scope)
    • 변수와 함수가 접근 가능한 범위
    • 전역 스코프 (global variable)
      • 스크립트 소스 전체에서 사용할 수 있는 변수
    • 지역 스코프 (local variable)
      • 특정 부분에서만 접근 가능한 변수. 함수 내부에서 선언된 변수는 그 함수 내부에서만 접근이 가능하다. 이를 함수 스코프라고도 한다.
    • 블록 레벨 스코프 (block level scope)
      • 해당 변수가 선언된 블록 (중괄호 안)에서만 접근 가능
      • let과 const 변수는 블록 레벨 스코프를 가진다.
  • 호이스팅 (hoisting)
    • 변수(혹은 함수)의 메모리 공간을 선언 전에 미리 할당하는 것이다. 즉, 선언과 동시에 메모리에 해당 변수(함수)를 위한 공간을 할당하고, 값을 초기화 하는 것이다.
    • var 호이스팅
      • 메모리에 변수 선언 + 'undefined'로 초기화
    • let/const 호이스팅
      • 메모리에 변수 선언. 단, TDZ(Temporal Dead Zone) 지역에 있어 선언한 코드 줄을 지나야 접근 이 가능하기에 초기화 전에는 사용이 불가능하다.
    • 함수 호이스팅
      • 함수 선언식 (function func()과 같은 경우)은 코드의 최상단으로 호이스팅 된다.
      • 함수 표현식 (let func = functin()과 같은 경우)는 변수 호이스팅과 같은 규칙을 따른다.

익명 함수와 즉시 실행 함수

  • 익명 함수 (무명 함수, anonymous function)

    • 이름이 없는 함수.
    • 즉, 함수라는 정의만 하고 해당 함수의 이름을 정의하지 않는 함수이다.
    • 함수 자체가 '식(Expression)'이기 때문에 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수 있다.
    • 익명 함수는 호이스팅이 일어나지 않고 실행할 때만 메모리에 올라가는 함수이다. 따라서 일회성 함수에서 많이 쓰이는 형태이다.
  • 즉시 실행 함수

    • 함수를 정의함과 동시에 실행하는 함수
    • 즉시 실행 함수는 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있다.
    • 기본 형태 (function() { 실행할 코드 }) ();

이벤트

  • 이벤트 (event)
    • 웹 브라우저나 사용자가 행하는 동작
    • 사용자가 웹 문서 영역을 벗어나 하는 행동은 이벤트가 아니다.
  • 종류
    • 마우스 이벤트
      • click, doubleclick, mouseover, mouseout 등...
    • 키보드 이벤트
      • keypress, keydown, keyup 등...
    • 폼 이벤트
      • blur, change, focus 등...
    • 문서 로딩 이벤트
      • load, error, scroll 등...

0개의 댓글