[JS] JS에서 함수(function)란?

 

 

 

0. 자바스크립트에서 함수란?

 

 

• 득정 작업을 수행하기 위해 독립적으로 설계된 코드들의 집합
• 명령어의 묶음
• 재사용 가능한 영역을 정의
• 코드를 캡슐화하는 데에 도움이 됨
• 일반적으로 '입력(input) → 함수 → return문 → 출력(output)' 순으로 구성

 

• 함수 정의 : 함수를 "생성"
• 함수 호출 : 함수를 "사용"

 

 

 

 

[ 특징 ]

 

• 함수 = 객체
• function이라는 키워드로 정의 / 생성하며 출력이 가능
• 객체이기 때문에 함수를 변수나 배열에 저장 가능
• 다른 함수 호출 시 인자를 넘겨줄 수 있음
• 동일한 작업을 반복 (반복 작업을 줄이며 코드 재사용성 ↑)
• 유지보수 편리

 

 

 

---

 

 

 

 

1. 함수의 종류

 

 

1.1  내장 함수

 

• 이미 언어에서 자주 쓰이는 기능을 만들어 놓은 함수
• ex. alert ( ), confirm ( ), prompt ( ),... 

 

 

 

1.2 사용자 정의 함수

 

• 개발자가 함수를 커스터마이징 하여 직접 작성한 함수
• 개발할 때 작성하는 코드라고 생각하면 간단하다.

 

 

 

 

---

 

 

 

 

2. 선언 방식

 

 

함수를 선언하기 위해서는 작성해야하는 요소들이 있다.

 

• keyword
• name (함수 이름) : 일반적으로 camelCase 방식으로 작성
• parameter : 함수를 선언할 때 매개변수 (인자)를 받는 부분
• body (block) : 함수가 실행되는 Scope라고도 부름

 

 

// Keyword    -> function
// Name       -> hello
// Paramenter -> ()
// Body       -> {}

function hello() {

}

 

 

 

 

 

 

 

2.1  명시적 함수 선언

 

 

 

// 명시적 함수 선언
function helloWorld() {
  // return 키워드 생략 가능
  console.log('Hello World ! ');
}

// 함수 호출, 해당 함수를 찾아가서 함수 실행
helloWorld();

function helloWorld2() {
  // return (반환값) : 함수 내부 코드의 최종 결과 값을 저장, 보관하기 위한 키워드
  // return 키워드를 만나면 함수 실행 중단 (return 뒤에 코드 작성해도 의미 X)
  return 'Hello World 2! ';
}

console.log(helloWorld2());

 

 

코드 출력 결과

 

 

// 매개변수가 있는 함수

function hello1(text) {
  return text;
}
console.log(hello1('hi hello'));

const apple = 'apple is fruit';
console.log(hello1(apple));

// 매개변수 2개
function hello2(text, name) {
  return `${text} ${name}`;
}
console.log(hello2('hello', 'John'));
console.log(hello2('bye', 'Mike')); // 함수의 재사용

function hello3(text, name) {
  console.log(`${text} ${name}`);
}
hello3('nice to meet you', 'Sam');

 

 

매개변수 있는 함수 출력 결과

 

 

 

 

 

2.2 함수 표현식 (Function Expression)

 

• 변수에 함수를 저장하는 형태
• 함수 표현식으로 정의 시, 익명 함수로 작성하기도 함 ( 물론 함수의 이름 정의도 가능 !! )

 

 

// 함수 표현식
const helloWorld3 = function () {
  console.log('Hello World 3!');
};

helloWorld3();


const helloWorld4 = function () {
  return 'Hello World 4!';
};

console.log(helloWorld4());

// 재사용 가능
helloWorld3();
helloWorld3();
console.log(helloWorld4());
console.log(helloWorld4());
helloWorld3();

 

 

 

함수 표현식 출력 결과

 

 

 

 

 

2.3 화살표 함수 (arrow function)

 

• es6 이후로 많이 사용
• 함수 선언 문법이 간결하다는 특징
• body 내에서 return 구문만 있을 때 return문 생략 가능
• 코드가 길어진다면 return 명시해야 함

 

 

 

// 화살표 함수
const myFunc1 = (x) => x;
/*
function nyFunc1 (x) {
    return x;
}
*/

const mySum = (a, b) => a + b;
/*
function mySum (a, b) {
    return a + b;
}
*/
console.log(mySum(5, 2)); // 7 출력

const myMulti = (a, b) => {
  let result = a * b;
  return result; // 코드 길어짐에 따라 return문 명시
};
console.log(myMulti(3, 4)); // 12 출력

 

 

 

 

 

이렇게 함수 내부에 console.log () 가 있는지, return 문이 있는지에 따라

함수를 호출하는 코드에도 약간의 차이가 있다는 것을 확인할 수 있다.

 

 

 

 

 

---

 

 

 

3. 호이스팅 (hoisting)

 

 

• 사전적 의미 : 끌어올리다
• 함수에서의 의미 : 함수 선언문이 호이스팅의 대상이 됨
• 코드가 실행되기 전에 함수 선언을 최상단으로 끌어올리는 현상
• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
• 함수와 변수에 적용
  ★ 변수에서는 var이 호이스팅의 대상 (let, const는 호이스팅의 대상 X)

 

 

 

myHello();
function nyHello() {
  console.log('hello~~');	 // hello~~ 출력
}


myHello2();
const myHello2 = function () {
  console.log('hellooooo');		// error
};

 

 

 

함수 표현식으로 호이스팅 발생 시 에러

 

 

 

 

함수 표현식은 호이스팅의 대상이 될 수 없고,
함수 선언부보다 호출부가 먼저 나올 수 없다.