JavaScript 함수에 대해 알아보자

* 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다.

(섹션 2 : 23~25, 33)

 

 

---

 

 

함수

 

추후에 실행할 수 있는 코드를 정의하도록 해준다. (즉시 실행되는 것 X)

메모리에 저장해 두고 이후에 함수를 호출함으로써 함수 내의 코드를 실행시킨다.

 

 

함수 정의

function 키워드 원하는 함수 이름 (매개변수 선택) {

    실행하고자 하는 코드 (함수 본문)

}

 

* 함수 이름은 함수의 역할을 명확히 나타낼 수 있는 이름으로 정하는 것이 좋음

 

 

함수 호출

함수 이름(이 함수가 사용할 수 있는 값)

 

 

 

사용 예시

 

const defaultResult = 0;
let currentResult = defaultResult;
 
function add(num1, num2) {
  const result = num1 + num2;
  alert('The result ' + result);
}
 
add(1, 2);
 
let currentResult = defaultResult + 10 * 3 / 2 - 1
 
let calculationDescription = "(" + defaultResult + " + 10) * 3 / 2 - 1";
 
outputResult(currentResult, calculationDescription);

 

 

 

 

return 키워드

값을 반환할 때 사용하고, 반환하는 값이 아무 것도 없을 경우에는 함수를 종료시킬 경우 사용한다.

※ return문은 하나만 있어야한다. (return문 이후의 코드는 실행되지 않는다.)

 

함수를 참조하여 여러 번 실행해야 하는 경우, return 키워드를 사용하여 값을 반환함으로써 일부 기능을 아웃 소싱할 수 있는 기능을 가지는 함수를 만들어 사용하는 것이 좋다.

 

 

 

사용 예시

 

const defaultResult = 0;
let currentResult = defaultResult;

function add(num1, num2) {
  const result = num1 + num2;
  return result;
}

currentResult = add(1, 2);

let calculationDescription = "(" + defaultResult + " + 10) * 3 / 2 - 1";

outputResult(currentResult, calculationDescription);

 

위의 코드에서 add 함수에 alert() 함수 대신 result 값을 반환해주어 currentResult 변수에 대입하여 사용하는 모습이다.

 

 

 

 

 

함수 작성 위치

JavaScript는 실행 전에 파일 전체를 읽어 사용한 함수를 찾아낸 후 자동으로 함수들을 맨 위로 끌어오는 방식으로 작동하기 때문에 함수 정의를 script 시작 부분에 작성도 가능하고 script 끝에 작성하는 것도 가능하다. 하지만 일관성을 유지하는 것이 중요하다.

 

→ 함수 정의는 어디든지 상관 없음 (함수 호출보다 뒤에 있어도 됨)

 

 

 

 

코드 순서의 중요성

함수를 정의하는 위치는 어디든지 상관 없다고 하였는데 이와 달리 변수와 상수의 선언 위치는 순서가 중요하다.

변수와 상수는 사용을 하기 전에 반드시 먼저 선언을 해야 한다. 이때 선언이란 let이나 const로 변수를 생성하는 것을 의미한다. 그리고 같은 이름에 대한 선언은 한 번만 해야 한다. 초기화는 필수 사항이 아니다. 아래에서 변수에 값을 할당하고 있다면 초기화 없이 변수 선언만 해줘도 상관없다.

 

 

 

 

전역 & 로컬 범위

전역 : 함수 외부의 변수 또는 상수

로컬 : 함수 내부의 변수 또는 상수, 블록 스코프(block scope)라고도 한다.

 

 

함수 내부에 선언된 로컬/블록 스코프 변수는 외부에서 사용할 수 없지만 전역 변수는 함수 내부에서 사용할 수 있다. 하지만 전역 변수를 조작하는 함수가 있기 때문에 좋은 코드는 아니므로 함수 정의할 때 전역 변수를 사용하는 것보다는 로컬 변수를 생성하여 사용하는 것이 좋다. 

 

 

 

예시

 

전역 변수를 함수 내부에서 사용하는 모습 (가능하지만 좋은 코드는 X)

 

 

로컬 변수를 함수 외부에서 사용하는 모습 (불가능)