함수

함수

@2024.04.02

함수

💡

특정 코드를 하나의 명령으로 실행할 수 있게 해주는 기능

• 파라미터(매개변수) : 함수에서 어떤 값을 받아올지 정해주는 것

• 자바스크립트의 함수는 일급 객체로 취급된다 ⇒ 함수도 타입이 될 수 있다.

  const fucn1 = fucntion(){
  	console.log("일급 객체다!");
  };

  • 함수의 매개변수로 함수를 받을 수 있다.

  // 함수의 매개변수로 다른 함수를 받는 예시
  function processFunction(input, callback) {
      // 입력(input)에 대한 처리
      let result = input * 2;
  
      // 콜백(callback) 함수 실행 => printResult(result) 실행
      callback(result);
  }
  
  // 위에서 정의한 processFunction을 사용하는 예시
  function printResult(result) {
      console.log("결과는:", result);
  }
  
  // processFunction 호출
  processFunction(5, printResult); // 10

• 함수는 중복 정의 및 호이스트가 가능
  • 중복 정의가 되었을 때는 가장 마지막에 정의된 함수가 실행된다.
  • 이를 방지하기 위해 fuction이 아닌 const를 사용하여, const func1로 사용

함수 선언 방식

함수 선언문

// function 키워드를 사용하여 함수의 이름을 지정하여 정의 
function myFunction() {
}

• 함수 호이스팅이 가능

  hello(); 
  hello2();
  
  function hello1() {
    console.log('Hello, world!');
  }
  var hello2 = function() 
    console.log('Hello, world!');
  };

함수 표현식(익명 함수)

// function 키워드를 사용하여 함수를 변수에 할당
var myFunction = function() {
};

• 변수에 함수를 할당하는 것이므로, 변수의 스코프 규칙을 따른다.

• 함수 끝에 세미콜론을 붙인다.

화살표 함수

//ES6에서 추가된 함수로, 간단하고 간결하게 함수를 선언
// =>를 사용하여 함수의 본문을 정의 
var myFunction = () => {
};

• 함수 끝에 세미콜론을 붙인다.

• this 동작 방식이 다른 함수와 다르다. ⇒ 콜백 함수, 짧은 익명 함수에 많이 사용
  • 일반 함수의 this 동작 방식
    • 함수가 어디에서 호출되었는지에 따라 this가 바인딩 된다.
    • 예를 들어, 메서드로 호출되면 해당 메서드가 속한 객체를 가리키고,
      일반 함수가 호출되면, 전역 객체를 가리킨다.
      

    const obj = {
      name: 'Alice',
      greet: function() {
        console.log('Hello, ' + this.name);
      }
    };
    
    obj.greet(); // 출력: Hello, Alice
    

  • 화살표 함수의 this 동작 방식
    • 화살표 함수 내부에서 this는 화살표 함수가 정의된 스코프의 this를 그대로 가리킨다.
    • 외부에서 this의 값은 변하지 않는다
    • 즉 일반 함수는 호출될 때마다 this가 바뀔 수 있지만, 화살표 함수는 정의될 때의 스코프에서의 this를 그대로 사용
      
      

    const obj = {
      name: 'Alice',
      greet: () => {
        console.log('Hello, ' + this.name);
      }
    };
    
    obj.greet(); // 출력: Hello, undefined
    

특징

자바스크립트 함수는 일급 객체다!

• 함수의 매개변수로 전달 가능

  function wrapperFunction(func) {
    console.log('Before calling the passed function');
    func(); // 전달된 함수 실행
    console.log('After calling the passed function');
  }
  
  // wrapperFunction 실행
  wrapperFunction(() => {
    console.log('Hello from passed function!');
  }); 
  // 출력:
  // Before calling the passed function
  // Hello from passed function!
  // After calling the passed function

• 함수의 반환 값으로 사용 가능

  function createGreetingFunction() {
    return function() {
      console.log('Hello from returned function!');
    };
  }
  
  const greetingFunction = createGreetingFunction();
  // 반환받은 함수 실행
  greetingFunction(); // Hello from returned function!
  

• 함수 속성 추가 가능
  • const로 선언된 함수에도 속성을 추가할 수 있다.
  • const는 함수를 가리키는 변수의 재할당을 방지하나, 함수 객체 자체에 대한 변경을 막지 않기 때문이다.

  // 함수를 동적으로 생성하여 변수에 할당
  const dynamicFunc = function() {
    console.log('Hello from dynamic function!');
  };
  
  // 동적으로 생성된 함수 실행
  dynamicFunc(); // Hello from dynamic function!
  
  // message라는 함수 속성 추가
  dynamicFunc.message = 'This is a dynamic function';
  console.log(dynamicFunc.message); // 출력: This is a dynamic function
  

메서드가 오버 로딩 되지 않는다!

• 자바스크립트에는 오버 로딩이 존재하지 않는다.

• 인자의 개수를 다르게 함수를 선언해도, 나중에 선언된 함수만 실행된다.

function num(){
	console.log("숫자 1"); 
	}
function num(){
	console.log("숫자 2"); 
	}
num(); //숫자 2 출력

자바스크립트 함수는 인자가 중요하지 않다!

• add 함수는 2개의 인자 값을 받는 것으로 설정되었으나, 실제로 함수를 실행할 때 여러 인자를 넘겨주어도 오류가 나지 않는다.

• 사용자가 넘겨준 인자는 다 버리는 것이 아닌 arguments라는 객체에 담아서 보관 중이다.
  • arguments : 함수 내에서 사용되는 모든 인자들의 컬렉션을 나타낸다.

function add(a,b){
    for(let i =0; i<arguments.length;i++){
        console.log("히"); // 인자의 개수만큼 히 출력
    }
    return a+b;
	}

alert(add(3,4)); //7
alert(add(3)); //NaN
alert(add(1,2,3,4)); //3

add와 add()의 차이

add() 실행 결과

add 실행 결과

function add(a,b){
	return a + b; 
	}
	console.log(add); // 함수 자체를 출력
	console.log(add()); // 함수를 실행하여 반환된 결과