자바스크립트 (5)

Do_Doolly·2022년 7월 11일
0

자바스크립트 TIL

목록 보기
5/15
post-thumbnail
  • 글에 적은 내용 중 잘못된 부분은 댓글로 적어주시면 감사하겠습니다!

🔜 함수


중학교 수학 수업 때 함수라는 개념을 처음 들었다. 그 때 기억나는건 함수는 자판기와 같다는 선생님의 비유였다. 내가 원하는 상품의 버튼(Input)을 누르면 그에 맞는 상품이 나오는(Output) 자판기는 함수의 기본 개념이다.


그럼 프로그래밍 언어에서 함수는 어떤 의미와 용도일까?

개발 언어마다 작성하는 문법은 조금씩 다르지만, 가장 핵심적인 용도는 재사용이 가능한 코드의 집합이다. 클래스와 비슷한 성격을 지니지만, 클래스는 객체를 만드는 정적인 틀이라면 함수는 특정 동작을 실행하는 행동 지침서와 같다.

1) 다른 프로그래밍 언어의 함수

주로 쓰이는 자바나 C언어에서 함수는 별도의 표현식이 정해진게 아니다. 함수(메소드)를 정의하기 위해서 제한 범위, 반환 타입, 함수 이름, 파라미터를 작성하고, 그 안에 특정 동작이 되는 코드를 작성하면 끝이다. 아래 예시는 자바에서 쓰이는 함수(메소드)다.

📍 자바에서는 함수를 메소드라고 부른다.
  • Java
<public class Test {
	// 입력값을 두 배로 만들어 반환하는 함수
    public static int doublePower(int a) {
    	return a * 2;
    }
    
    // 메인
    public static void main(String[] args) {
    	for (int i = 1; i <= 5; i++) {
        	System.out.println(doublePower(i)); // 2, 4, 8, 16, 32 출력
        }
    }
}

2) 자바스크립트의 함수

자바스크립트는 다른 언어와 달리 함수를 정의하는 문법이 별도로 있다. 이름도 명시적으로 function이다.

function doublePower(a) {
  return a * 2;
}

어떤가?? 자바의 코드와 비교했을 때 상당히 짧고 간단하다! 이제 실제로 어떻게 함수를 사용하는지 알아보자


🧐 함수의 정의와 호출

1) 함수의 정의

function 이라는 글자 뒤에 함수의 이름을 입력하고 괄호에 파라미터를 넣을 수 있다.

function 함수명 (input_1, input_2, ...) {
    // 출력값 변수 선언 (미리 선언되어있지 않으면 문법 에러!)
    let output;
	// 실행 코드
    // ...
    return output;
}

입력값에는 별도의 타입 명시가 없고 바로 변수명을 넣으면 된다. 입력값이 필요 없는 경우 생략이 가능하다.

출력값을 설정하려면 return 을 작성하고 그 다음에 출력값을 입력하면 된다.

출력값도 별도의 타입 명시는 없으나, 변수명으로 반환할 경우 반드시 중괄호 내에 변수가 선언되어야 한다. 혹은 외부에 미리 선언된 변수라면 사용 가능하다.

2) 함수의 호출

함수를 사용하려면 함수명을 이용해서 호출하면 된다. 입력값은 default가 설정되어 있지 않는한 모두 기입해야 정상적으로 함수가 실행된다.

// 함수 정의
function doublePower(a) {
  return a * 2;
}

// 함소 호출
for (let i = 1; i <= 5; i++) {
  console.log(doublePower(i)); // 2, 4, 8, 16, 32 출력
}

함수가 호출되는 프로세스는 아래와 같다.

3) 함수 안에 함수

함수 내부에도 또 다른 함수를 정의할 수 있다. 이 경우 자바스크립트의 스코프때문에 함수를 호출할 수 있는 위치가 제한적이다.

그리고 자바스크립트에서 함수는 입력이나 출력에 사용할 수 있다. 아래 예시는 함수의 입력에 함수를 넣은 것이다.

// 세 수 중 가장 큰 수 출력
function getMaxNumber(a, b, c) {
  // 함수 내 함수 정의
  function compareNumber(num1, num2) {
   	if (num1 > num2) {
         return num1;
       } else {
         return num2;
       }
  }
  
  let result = 0;
  
  // 함수 입력에 함수 삽입
  result = compareNumber(a, compareNumber(b, c));
  
  return result;
}

🔚 또 다른 특징

함수의 기본적인 문법과 기능을 알아봤는데, 위와 같이 함수를 정의하는 것을 자바스크립트에서는 함수 선언이라고 한다. 함수 선언 외에 다른 방법이 또 있는데 그건 자바스크립트 만의 독특한 함수 표현법이다.

1) 익명 함수

위 예시는 모두 함수의 이름을 넣었다. 그런데 함수의 이름을 입력하지 않고도 함수를 정의할 수 있다 😦

이 경우 함수를 즉시 호출하여 실행하지 않을 경우, 프로그래머가 따로 호출할 수 있는 방법이 없다.

// 익명함수 만들기
function (a, b) {
  if (a > b) {
    return a;
  } else {
    return b;
  }
}

2) 함수 표현식

함수 선언과 비슷하나 변수를 선언하듯이 함수를 정의하는 방법이다. 보통 익명 함수로 함수 표현식을 많이 사용하나, 오류가 발생했을 때 스택의 추적을 위해 유명 함수로 작성할 때도 있다.

함수 선언과 가장 큰 특징은 호이스팅이 되지 않는다 이다! 호이스팅에 대해서는 나중에 다시 다뤄본다.

// 함수 표현식으로 함수 정의
const getMaxNumber = function (a, b) {
  if (a > b) {
    return a;
  } else {
    return b;
  }
// 함수 선언과 다르게 변수처럼 마지막에 ';'를 붙여주는 것도 잊지 말자!  
};

또한 자주 쓰이는 함수는 즉시 실행 함수 표현식으로 만들 수 있고, C언어의 포인터와 같이 생성기 함수 표현식도 있다! 궁금하면 이 내용은 MDN의 레퍼런스[1]를 참고하면 좋을 것 같다.



& 자바스크립트 참고 강의 링크

생활코딩 JavaScript
드림코딩 JavaScript 기초 강의


주석

[1] : MDN Function

profile
생각하면 복잡하니까 일단 해보자

0개의 댓글