본문 바로가기

웹/JavaScript

[JS] 7. 기초 문법: 함수

프로그래밍을 하다보면 똑같은 동작을 하는 코드들을 여러 번 사용해야 하는 경우가 많습니다.

이렇게 중복되는 코드들을 하나로 묶어 함수로 정의하여 사용할 수 있습니다. 함수를 사용하면 똑같은 코드를 계속해서 중복 작성하지 않고 훨씬 더 간결하면서 효율적인 코드를 작성할 수 있습니다. 

 

 

[함수 선언] : function 키워드 

function 함수이름(매개변수)  {함수의 기능}
  • return 키워드를 사용하면 함수의 결과 값(반환 값)을 대입 연산자를 이용해 변수에 할당할 수 있습니다.  
  • 함수 내부에서 선언한 변수나 상수는 그 함수에서만 사용 가능한 지역 변수로서 함수 외부에서는 접근할 수 없습니다. 반대로 함수 외부에서 선언한 변수는 전역 변수로서 함수 내부에서 접근이 가능합니다.

 

[함수 호출]

함수이름 (매개변수);

 

 

 

/* <직사각형의 넓이를 구하는 함수> */

//함수 선언식, 함수 선언 방식의 함수 생성
function getArea(width, height) {
  let area = width * height;   //함수 내에서만 사용 가능한 지역 변수

  console.log(area);
}

// 함수 호출
getArea(10, 20); //200 출력
getArea(10, 30); //300 출력
getArea(100, 100); //10000 출력

 

/* <직사각형의 넓이를 구하는 함수 - return 키워드 이용> */

//함수 선언식, 함수 선언 방식의 함수 생성
function getArea(width, height) {
  let area = width * height;

  return area;  //함수가 반환하는 값
}

// 함수 호출
let area1 = getArea(10, 20);   //함수의 반환 값을 변수 'area1'에 대입
console.log(area1);  //200 출력

 

위 코드의 함수 동작은 다음과 같습니다. 

먼저 함수 선언 시에 함수가 생성됩니다. (이때 함수가 실행되는 것은 아닙니다.) 이후 함수가 호출되면 함수의 명령 실행부인 중괄호 안으로 넘어와 함수의 기능을 실행하고 반환 값을 반환합니다. 반환 값이 변수 'area1'에 할당되고 화면에 area1의 값인 200이 출력됩니다.