자바스크립트에서 함수는 기본 구성 블록중 하나로, 작업을 수행하거나 값을 계산하는 재사용가능한 문장 집합입니다.
함수도 일반 객체(데이터 타입)로, 이전 포스팅에서 작성했던 Object와 같은 개념입니다.
예를들어, 변수의 값을 화면에 출력할때 많이 사용하는 console.log도 console 객체에 들어있는 log 함수입니다.
console.log(console)
/*
실행 결과
-----------------------------------
Object [console] {
log: [Function: log],
warn: [Function: warn],
dir: [Function: dir],
time: [Function: time],
timeEnd: [Function: timeEnd],
timeLog: [Function: timeLog],
trace: [Function: trace],
assert: [Function: assert],
clear: [Function: clear],
count: [Function: count],
countReset: [Function: countReset],
group: [Function: group],
groupEnd: [Function: groupEnd],
table: [Function: table],
debug: [Function: debug],
info: [Function: info],
dirxml: [Function: dirxml],
error: [Function: error],
groupCollapsed: [Function: groupCollapsed],
Console: [Function: Console],
profile: [Function: profile],
profileEnd: [Function: profileEnd],
timeStamp: [Function: timeStamp],
context: [Function: context]
}
-----------------------------------
*/console.log와 같은 객체함수를 만들어봅시다.
1. Basic function 만들기
함수를 생성할때는 아래와 같은 문법을 지켜줘야합니다.
아래 예제는 Hello World! 를 콘솔에 출력하는 간단한 함수입니다.
function 함수명 (인자값) {
실행문;
}
function sampleFunc() {
console.log('hello world!');
}
sampleFunc();
// 출력 결과
// hello world!
2. 인자(argument) 를 받을 수 있는 function 만들기
인자(argument)는 파라메터(parameter)라고도 합니다.
console.log를 예로 들면, 사용할때 출력하고자 하는 문자를 넣죠,
console.log("helloworld") 여기에서는 helloworld가 인자입니다.
우리의 함수도 인자를 받을 수 있게 해봅시다.
function sampleFunc(arg1, arg2) {
console.log(arg1, arg2);
}
sampleFunc(1, "hello!");
//출력 결과
//1 hello!여기에서 arg1, arg2가 인자가 됩니다.
인자란, 다시말하자면, 외부에서 주는 데이터를 함수 내부에서 사용할 수 있도록 해주는 입구같은 역할을 합니다.
자, 그런데 이제 문제가 하나 있습니다.
함수를 통해 나온 결과값이 다른 변수로 들어가려고 할때, undefined 상태, 즉 아무런 데이터가 없는 상태가 됩니다.
function sampleFunc(arg1, arg2) {
console.log(arg1, arg2);
}
const result = sampleFunc(1, "hello!");
console.log("result 변수의 값: ",result);
// 실행 결과
// 1 hello!
// result 변수의 값: undefined이유는, 함수에 return값이 없기 때문입니다.
console.log는 값을 콘솔 화면에 출력해주는 역할을 합니다. 우리의 함수 안에는 console.log가 실행되도록 되어있으니, 당연히 콘솔화면에서는 결과가 확인 되지만, return이라는 변수에 담긴 값은 undefined 즉! 아무것도 없는것이죠. 다음 단계에서 return을 추가해줍시다.
3. return값이 있는 function 만들기
이제 함수에서 정의된 실행문이 모두 끝나고, 결과값을 돌려줄 수 있도록 return을 넣습니다.
backtick(`)를 사용했는데, 처음보시는분은 아래 더보기를 활성화 해서 내용을 확인해주세요!
백틱(backtick)/백쿼트(backquote) ` 란?
자바스크립트에서 `를 사용하여 표현된것은 템플릿 리터럴(Template literals) 이라고 합니다.
줄바꿈을 편하게 하고, 문자열 내부에 인자값을 편하게 받을 수 있다는 장점이 있습니다.
아래 출력되는 1, 2, 3 모두 결과는 같습니다.
하지만 인수를 활용하는 편의성을 보면 훨씬 편리하죠. 중간중간에 + , 와 같은 문자를 넣지 않아도 됩니다.
그리고 띄어쓰기도 가능해서 아주 편리하게 쓸 수 있습니다!!
function backtickSample(email,num) {
console.log("1. 이메일과 전화번호를 확인해주세요. *이메일:", email, "*전화변호:",num);
console.log("2. 이메일과 전화번호를 확인해주세요. *이메일: " + email + " *전화변호: " + num);
console.log(`3. 이메일과 전화번호를 확인해주세요. *이메일: ${email} *전화변호: ${num}`);
}
backtickSample("test@test.com","010-1123-1112");
// 출력 결과
// 1. 이메일과 전화번호를 확인해주세요. *이메일: test@test.com *전화변호: 010-1123-1112
// 2. 이메일과 전화번호를 확인해주세요. *이메일: test@test.com *전화변호: 010-1123-1112
// 3. 이메일과 전화번호를 확인해주세요. *이메일: test@test.com *전화변호: 010-1123-1112function sampleFunc(arg1, arg2) {
return `${arg1}, ${arg2}`;
}
const result = sampleFunc(1, "hello!");
console.log("result 변수의 값: ",result);
// 출력 결과
// result 변수의 값: 1, hello!자, 이제 result 변수에도 값이 잘 들어갔네요!
4. 사칙연산 function 만들고 결과 출력하기
console.log와 같이 사용할 수 있는 객체 함수를 만들어봅시다.
const calculator = {
plus: function(a, b) {
return a+b
},
minus: function(a, b) {
return a-b
},
multiply: function(a, b) {
return a*b
},
devide: function(a, b) {
return a/b
}
}
const plusResult = calculator.plus(1,2);
const minusResult = calculator.minus(20,2);
console.log(plusResult);
console.log(minusResult);
// 출력 결과
// 3
// 18이제 console.log처럼 calculator.plus를 사용할수 있게 되었습니다!!!