함수란?
프로그래밍을 하다보면 유사한 동작을 하는 코드가 여러 곳에 필요한 경우가 있다.
프로그램을 구성하는 기본적인 구성 요소(building block)
subProgram이라고도 불리며 여러번 재사용 가능하다는 장점.😍
대체적으로 한 가지의 일을 수행하거나 어떤 값을 계산 하기 위해 사용한다.
JavaScript는 절차지향적 언어 중 하나라고 볼 수 있다.
하나의 함수는 하나의 기능을 하도록 만드는 것이 좋고,
함수는 object라서 변수에도 할당할 수 있고, param으로 전달할 수 있고 함수를 return할 수도 있다.
함수 선언문(Function Declaration)
함수 선언은 지정된 매개변수를 갖는 함수를 정의합니다.
함수 선언문은 코드 블록이 실행되기도 전에 처리되기 때문에, 블록 내 어디서든 활용 가능하다.
function hoistedPrint() {
console.log("hoisted print");
}함수 표현식(Function Expression)
function 키워드는 어떤 표현식(expression) 내에서 함수를 정의하는 데 사용될 수 있습니다.
함수를 생성하고 변수에 값을 할당하는 것처럼 함수를 변수에 할당할 수 있다.
함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어지기 때문에 해당 흐름 이후부터 사용 가능하다.
const print = function () {
console.log("print");
};함수 선언문 vs 함수 표현식
1. 문법 차이
function print() { // 함수 선언문
console.log("print");
}
const print = function () { // 함수 표현식
console.log("print");
};2. JavaScript 엔진이 언제 함수를 생성하는지에 차이가 있다.
함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다.
따라서 해당 흐름 이후부터 함수를 호출할 수 있지만 함수 선언을 이용할 경우,
호이스팅에 의해 함수 선언문은 정의되기 전에도 호출할 수 있다.
JS는 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 함수를 생성한다.
3. Scope 차이
strict 모드에서 함수 선언문이 코드 블록 내에 위치하면
해당 함수는 블록 내 어디서든 접근할 수 있지만 블록 밖에서는 접근하지 못한다.
밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다.🔲🔳
let age = prompt("나이를 알려주세요", 18);
if (age < 18) {
function welcome() {
alert("안녕!");
}
} else {
function welcome() {
alert("안녕하세요!");
}
}
welcome(); // Error : welcome is not defined함수 선언문과 함수 표현식 중 무엇을 선택하는가?
➡ 함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는게 좋다.
함수 선언되기 전에 호출할 수 있어 코드 구성을 좀더 자유롭게 할 수 있고 가독성 🔼.
단, 어떤 이유로 적합하지 않거나 조건에 따라 함수를 선언해야 한다면 표현식 사용❗❕
매개변수(Parameter)
매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다.
premitive params(원시형 매개변수) : passed by value
object params(객체형 매개변수) : passed by reference
function changeName(obj) {
obj.name = "coder";
}
const velog = { name: "velog" }; // 메모리에는 obj가 만들어진 reference가 들어가게 된다.
// 이 ref는 바로 이 obj를 메모리 어딘가에 가르키고 있다.
changeName(velog);
console.log(velog);
Rest Parameter
Rest Parameter는 정해지지 않은 수를 배열로 나타낼 수 있게 합니다.
함수의 마지막 파라미터의 앞에 ...를 붙여 나머지 인수를 자바스크립트 배열로 대체합니다.
마지막 파라미터만 Rest Parameter가 될 수 있습니다.
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a); // a, one
console.log("b", b); // b, two
console.log("manyMoreArgs", manyMoreArgs); // manyMoreArgs, [three, four, five, six]
}
myFun("one", "two", "three", "four", "five", "six");
기본 값
매개변수에 값을 전달하지 않으면 그 값은 undefined가 됩니다.
따라서 undefined가 되지 않게 하려면 default value(기본 값)을 설정해주어야 합니다.
function showMessage(message, from) {
console.log(`${message} by ${from} `);
}
function showMessage2(message, from = "velog") {
console.log(`${message} by ${from} `);
}
showMessage("Hello!"); // message by undefined
showMessage("Hello!"); // message by velog
반환 값
함수를 호출했을 때 함수를 호출한 곳에 특정 값을 반환하게 할 수 있다.
어디에서나 반환할 수 있고 여러개의 return문을 사용할 수 도 있다.
return문이 없거나 return 지시자만 있을 경우 함수는
undefined를 반환합니다.
