반복적으로 필요한 코드를 하나의 덩어리로 묶어서 필요할 때마다 꺼내 쓸 수 있도록 한 것입니다.
function 나의시크릿라면레시피(){
let 라면그릇;
물 550ml를 끓인다;
면과 분말 스프, 후레이크를 같이 넣는다;
4분 40초간 더 끓인다;
라면그릇 = 맛있는라면;
return 라면그릇;
}
나의시크릿라면레시피();
함수는 기본적으로 아래의 형태를 가집니다.
function 함수이름(parameter1, parameter2...) { // 함수의 선언
// 실행코드...
return 반환값
}
함수이름(argument1, argument2...) // 함수의 호출
이를 그림으로 표현하자면 아래와 같은 형태일 것입니다.
용어 | 번역 | 의미 |
---|---|---|
Parameter | 매개변수 | 함수와 메서드에 입력 변수 이름 |
Argument | 전달인자, 인자, 인수 | 함수와 메서드에 실제 입력되는 값 |
파라미터(매개변수)와 아규먼트(전달인자)는 용어를 구분해야 합니다. 쉽게 **파선아실(파라미터는 선언, 아규먼트는 실제 값)**이라고 줄여 부르기도 합니다.
여기서 console.log와 return은 구분할 필요가 있습니다. console.log는 콘솔 창에 표시되는 단순 출력이며, return은 해당 함수가 실행되면 반환되는 값을 전달합니다. 또한 함수 내부에서 return 구문을 만나게 되면 해당 함수는 종료됩니다.
아래 1번, 2번, 3번, 4번 출력 결과를 각각 비교해보세요.
// 함수
// 읽어볼만한 문헌 : <https://ko.javascript.info/function-basics>
function sum(x, y) { // 함수의 선언
let z = x + y;
console.log(z) // 함수의 기능
return z
}
(sum(10, 20) + sum(10, 20)) * sum(1, 3) // 함수의 호출
////
function a(value){
console.log(value);
console.log('hello');
return 100;
}
a(1000) + a(1000)
////
function b(){
console.log('hello');
return 100;
}
b() + b()
////
function c(){
console.log('hello');
}
let test = c()
test
////
function d(){
console.log('hello');
return 'hello'
}
let test = d()
test
////
function e(){
console.log('hello');
return // return undefined
}
let test = e()
test
////
function f(){
console.log('hello1');
console.log('hello2');
return // return undefined
console.log('hello3');
console.log('hello4');
}
f()