Front-end/JS

자바스크립트 함수

조 수빈 2022. 7. 6. 18:07

🔍 함수

변수에는 데이터만 저장할 수 있지만 코드는 저장할 수 없음
함수를 사용하면 코드를 메모리에 저장해두고 필요할 때마다 호출하여 사용 가능


☁ 기본 함수 정의문

//일반 함수 정의 방식
function 함수명(){
  자바스크립트 코드;
}

//익명 함수 선언 참조 방식
참조 변수 = function(){
  자바스크립트 코드;
}

일반 함수 정의 방식은 호이스팅(hoisting) 기술을 지원함,
함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출함!!

익명 함수 선언 참조 방식은 X, 오류 발생


☁ 매개변수가 있는 함수 정의문

function 함수명(매개변수 1, 매개변수 2, ... 매개변수 n){
  자바스크립트 코드;
}

함수명(데이터 1, 데이터 2, ... 데이터 n);

☁ 매개변수 없이 함수에 전달된 값 받아오기

매개변수 없이 함수 호출문에 전달된 값들은 배열로 저장됨
arguments를 사용하여 값을 받아올 수 있음

function 함수명(){
  arguments;
}

함수명(데이터 1, 데이터 2, 데이터 3);

☁ 함수 스코프

전역 변수와 지역 변수 개념

  • 즉시 실행 함수

    • 지역 함수 선언에 사용하면 효과적임(함수 충돌 문제 해결 방안)
    • 함수 선언과 동시에 함수 호출 가능
    (function() {
      자바스크립트 코드;
    }());
    
    (function() {
      var 변수명; //지역 변수
    
      function 함수명() { //지역 함수
        자바스크립트 코드;
      }
    }());

☁ 객체 생성자 함수

function 함수명(매개변수1, 매개변수2, ..., 매개변수n) { //객체 생성자 함수
  this.속성명 = 새 값;
  this.함수명 = function(){
    자바스크립트 코드;
  }
}

var 참조 변수(인스턴스 네임) = new 함수명();  //객체 생성

var 참조 변수 = {속성 : 새 값, 함수명 : function() { ... }}
  • 프로토타입 사용

    • 객체 생성자 함수에 프로토타입을 사용하여 함수를 등록하면 메모리 낭비 줄일 수 있음
      1234
      프로토타입을 사용하여 등록한 함수는 원형에서 생성된 객체를 공유할 수 있음
      = 여러 개의 함수를 등록할 필요 없음

      function 함수명(매개변수1, 매개변수2, ..., 매개변수n) {
        this.속성명 = 새 값;
      }
      
      함수명.prototype.함수명 = function() {
        자바스크립트 코드;
      }
      
      var 참조 변수(인스턴스 네임) = new 함수명();

☁ 자바스크립트 내장 함수

자바스크립트 엔진에 내장된 함수, 바로 호출 가능
자주 사용되는 함수 위주로 추후 수정