[JavaScript] 기초 - 함수

🖥️ Udemy의 "JavaScript 완벽 가이드" 강의를 보고 정리한 내용입니다.

---

함수(Function)

• 추후에 실행할 수 있는 코드를 정의한다.

JavaScript에서의 함수 정의

function 키워드를 사용하고 원하는 함수 이름을 적는다.
함수는 매개변수를 가질 수 있다.

function functionName(params) {
  /** 함수 본문
   * 실행하고자 하는 코드
   */
}

 

• JavaScript는 함수가 정의되면 즉시 실행시키지 않고 메모리에 저장을 해둔다.
• 함수가 호출되었을 때, 함수 내의 코드를 실행한다.
  • 함수 이름과 괄호를 추가하여 호출할 수 있다.
  • 한 번 정의된 함수는 원하는 만큼 원하는 위치에서 호출해서 사용할 수 있다.
• JavaScript는 실행 전에 파일 전체를 읽어 자동으로 함수를 맨 위로 끌어오는 방식으로 작동된다.
• 때문에 함수 정의의 호출 위치에 관계없이 실행할 수 있다.
• 함수의 매개변수는 함수 본문에서 사용된다. 매개변수는 키워드로 정의되지 않고, 함수 내부에서만 사용할 수 있다.
• 함수 내에서 상수를 정의할 수 있다. 정의된 상수는 함수 내부에서만 사용할 수 있다.
• 함수 본문은 두 칸 또는 네 칸, 공백과 탭을 사용한 들여 쓰기와 함께 작성한다. 원하는 방식을 선택해 일관성을 유지해 코드를 작성하면 된다.

함수 값 반환 return

• return 키워드를 사용해 값을 반환한다.
• 함수를 호출하면 값이 도출되고 그 값을 변수로 저장해서 사용할 수 있다.

const의 사용

새로운 값을 할당하지 않으며, 이 값은 절대 변하지 않는다는 표시를 위해 사용

다른 사람이 코드를 이해하기 쉽게 만든다.

예시

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

const additionResult = add(1, 2);

• return문은 함수 실행을 종료한다.
• 이후에 오는 코드가 실행되지 않도록 한다.
• 반환 값 없이 사용할 수 있다.
• return 문은 하나만 있어야 한다.
  • 두 개 이상을 만들 수도 있지만, 첫 번째 return 문에서 함수 실행이 종료되기 때문에 뒤의 return은 실행되지 않는다.
  • 따라서 하나 이상을 반환할 수 없다.

---

전역 & 로컬

• 함수는 전역 변수에 액세스할 수 있고, 다른 함수에도 액세스 할 수 있다. 즉, 함수는 주변의 모든 컨텍스트에 액세스가 가능하다.
• 로컬 / 블록 스코프(block scope)
  • 함수 내부에 상수나 변수를 정의하는 것
  • 해당 블록 내에서만 사용이 가능하다.
  • 함수 내부에 선언된 변수를 외부에서 사용할 수 없다.

순수 함수: 전역적인 것을 아무것도 사용하지 않고 내부 데이터로만 작동해 값을 반환하는 함수

입력을 받아 출력을 반환한다.

 

---

그림자(shadow) 변수

• 함수의 변수는 자체 범위를 갖는다.
• 전역 변수와 같은 이름의 변수를 생성하면 JavaScript는 Shadowing을 수행한다.
  • 다른 범위에 새 변수를 생성한다.
  • 이 변수는 전역 변수를 덮어쓰거나 제거하지 않는다.
• JavaScript는 해당 지역변수가 존재하지 않는 경우에만 전역 변수로 fallback 한다. (항상 로컬 섀도우 변수를 우선 참조한다.)

---

함수를 간접적으로 실행하기

// html 버튼 요소
const addBtn = document.getElementById("btn-add");
addBtn.addEventListener("click", add);

• 버튼과 상호작용 
  • addEventListener(리스닝 하고자하는 이벤트를 식별하는 문자열, 실행할 함수)그러나 addBtn.addEventListener("click", add());와 같이 작성하게 되면, 구문 해석 시 함수를 실행한다. 이 경우 클릭 이벤트가 발생하면 브라우저는 해당 함수를 찾아 실행할 수 있다.
  • 함수를 바로 실행하지 않고 원하는 시점에 실행되도록 하고 싶을 때, 직접 호출하는 것이 아니라 함수 이름을 전달한다.
  • 이름으로 정의된 함수를 호출하려면 괄호를 추가해서 작성하고, JavaScript는 그 함수를 실행한다.

코드의 어딘가에 함수 이름만 추가한다면?

 

아무 효과가 없다. JavaScript는 함수의 이름만 보고 무엇을 해야 할지 알지 못하고, 결과적으로 그 문장은 무시된다.

함수에 대한 추가 사항

• 함수에서 내부 상수와 외부 전역 값을 섞어서 사용하는 것은 좋지 않다.
• 하지만 전역 값만을 이용해서 이벤트 리스너로 작동하는 확실한 함수의 경우에는 괜찮다.
• 즉, 전역 상수나 변수로 작동할 수 있는 명확한 함수를 생성하되, 내부 데이터나 일부 반환값들과 과도하게 혼합을 해서 사용하면 안 된다.
• 또한 일반적인 규칙으로 함수가 일부 전역 변수를 조작하는 것은 괜찮지만, 이러한 함수가 무언가를 반환해서는 안된다.
• 특정 작업을 수행한 결과를 내고 그 외의 작업은 하지 않는다.

---