함수
함수는 특정 일을 하는 코드 묶음
함수의 특징
함수는 재사용 가능한 코드 덩어리
입력(매개변수) 을 받고 출력(결과) 을 돌려줌
함수를 정의(만들고) 한 다음 호출(사용) 해야 함
같은 스코프(범위) 안에서만 사용 가능
함수와 프로시저
프로시저는 단순히 명령문의 집합이지만, 함수로 쓰이려면 반드시 입력(매개변수)을 받고, 그 입력과 명확히 대응되는 출력(반환값)을 제공해야 함.
📌 프로시저 (procedure)
입력이나 출력이 명확하지 않고, 단순히 동작만 수행함.
조금 와닿지 않아서 예제도 살펴보았다.
function greet() {
console.log("Hello!");
}
greet(); // 출력: Hello!=> 입력이 없고, 반환값도 없다.
📌 함수 (function)
입력을 받아, 그 입력과 명확한 관계가 있는 결과값을 반환함.
// 제곱을 계산하는 함수
function square(number) {
return number * number;
}
console.log(square(5)); // 출력: 25함수 선언
JavaScript에서 함수를 정의할 때는 다음 4가지 요소가 필요함.
- function 키워드 - 함수임을 선언
- 함수 이름 - 함수를 식별하는 이름
- 매개변수 - 괄호 () 안에 쉼표로 구분된 입력값들
- 함수 본문 - 중괄호 {} 안에 실행할 JavaScript 코드
function square(number) {
return number * number;
}- 매개변수(number)를 입력 받아서 처리하고, return 문으로 명확한 결과값(제곱)을 반환하는 구조의 함수선언문 예제
함수 매개변수 전달 방식
JavaScript는 사실상 모든 매개변수를 값에 의한 전달(pass by value)로 처리함.
=> 차이는 "그 값이 원시 값이냐, 참조 값이냐"에 따라 달라지는 것.
(1) 원시 값(숫자, 문자열, 불리언 등) → 함수에 전달되면 값 복사본만 넘어갑니다. 함수 안에서 바꿔도 바깥에는 영향 없음.
// (1) 원시 값 - 복사본 전달
function changeValue(num) {
num = 100; // 복사본(num)만 바뀜
}
let x = 50;
changeValue(x);
console.log(x); // 50 (원본 x는 그대로)
// (2) 객체 - 참조 전달
function changeObject(obj) {
obj.value = 100; // 실제 객체 내부 값 변경
}
let myObj = { value: 50 };
changeObject(myObj);
console.log(myObj.value); // 100 (원본 객체가 바뀜)
(2) 객체/배열 → 함수에 전달되면 참조(reference)가 넘어감. 즉, 같은 객체를 가리키므로 함수 안에서 속성을 바꾸면 바깥에서도 바뀐 게 보임.
function changeObject(obj) {
// 함수에 전달된 객체(obj)의 value 속성을 100으로 바꿈
obj.value = 100;
}
let myObj = { value: 50 };
// 객체 생성. 현재 상태는 { value: 50 }
changeObject(myObj);
// myObj를 changeObject 함수에 넘김
// 함수 안에서 obj는 myObj를 참조하고 있으므로
// myObj.value가 100으로 바뀐다.
console.log(myObj.value);
// 최종적으로 myObj.value는 100이 되었으므로 출력값: 100
함수 표현식 (익명함수)
변수에 함수를 할당하는 방식으로 함수를 정의하는 방법. 함수 이름 없이 생성되어 익명함수(Anonymous Function)라고도 불림.
- 물론, 함수 이름 지정도 가능함.
// square 변수에 함수(익명)를 할당
const square = function (num) {
return num * num;
};
console.log(square(4)); // 16
// sqaure 변수에 이름이 있는 함수 할당
const factorial = function fac(n) {
return n < 2 ? 1 : n * fac(n - 1);
};
console.log(factorial(3));
함수 표현식은 함수를 다른 함수의 매개변수로 전달할 때 편리함.
// 함수는 함수 표현식으로 정의된 함수를 받고 두 번째 인수로 전달된 배열의 각 요소에 대해 함수를 호출.
function map(fn, arr) {
const result = new Array(arr.length);
for (let i = 0; i < arr.length; i++) {
result[i] = fn(arr[i]);
}
return result;
}
const fn = function (x) {
return x * x * x;
};
const numbers = [0, 1, 2, 5, 10];
const cube = map(fn, numbers);
console.log(cube);조건에 따른 함수 정의
이런게... 있었다...!
함수가 객체 처럼 다룰 수 있는 일급 객체(First-class citizen)
인 언어 (JavaScript, Python, Ruby) 는 조건에 따른 함수 정의가 가능하다
let myFunc;
if (num === 0) {
myFunc = function (theObject) {
theObject.make = "Toyota";
};
}함수 호출
괄호 ()를 붙여 실행 → 인수 전달 → 실행 결과(반환값)를 돌려줌.
- 함수의 인수(파라미터)는 문자열, 숫자뿐 아니라 객체도 전달 가능.
- 함수는 자기 자신을 다시 호출(재귀) 할 수 있음 → 대표 예: 팩토리얼 계산.
- 함수는 단순 실행 단위가 아니라, 객체(Function 객체)이기도 함.
→ 따라서 메서드를 가짐 (apply(), call() 등).
함수 호이스팅
함수선언을 최상단으로 끌어올림.
함수 호이스팅은 함수 선언에만 적용됩니다. 함수 표현식에선 쓸 수 없습니다. 아래의 코드는 실행되지 않습니다.
