프로그램을 구성하는 주여 구성 요소이다.
함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러번 호출하여 사용이 가능 하다.
함수는 데이터이다.
function 키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 작성하여 함수 선언이 가능하다.
function name() {
// ...함수 본문...
}
작성한 function_name()을 사용하여 호출하면 함수 본문이 실행된다.
function showMessage() {
console.log('안녕하세요');
}
showMessage();
function showLocalVar() {
let message="123";
console.log(message);
}
showLocalVar();
// console.log(message); // message is not defined
let userName = 'Hun';
function showOuterVar() {
let message = 'Hello ' + userName;
console.log(message);
}
showOuterVar();
let editUserName = 'Hunn';
function showEditOuterVar() {
editUserName = 'Seung'; // 외부 변수를 수정
let message = 'Hello, ' + editUserName;
console.log(message);
}
console.log(editUserName); // 함수 호출 전이므로 'Hunn'이 출력
showEditOuterVar();
console.log(editUserName); // 함수에 의해 'Seung'으로 값이 바뀜
let localOuterUserName = 'Hunnn'; // 외부 변수 선언, 전역 변수라고도 하며 최소한으로만 쓰자
function showLocalOuter() {
let localOuterUserName = 'Seungg'; // 같은 이름을 가진 지역 변수 선언
let message = 'Hello, ' + localOuterUserName;
console.log(message);
}
// 함수는 내부 변수인 localOuterUserName만 사용한다.
showLocalOuter();
// 내부 변수 에서만 값이 바뀌었으므로 외부 변수의 값이 나온다.
console.log(localOuterUserName);
function showParameter(from, text) { // parameter: from, text
console.log(from + ': ' + text);
}
showParameter('Hun', 'Hello!'); // Hun: Hello!
showParameter('Hun', "What's up?"); // Hun: What's up?
위의 예시를 보면 함수를 호출할 때 함수에 전달된 인자들(arguments)은 parameter로 들어가게 된다.
매개 변수에 값을 전달하지 않으면 그 값은 undefined가 된다.
showParameter('Hun'); // Hun: undefined
매개 변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 '기본 값'을 설정 해주면 된다.
기본값을 설정하는 방법은 '매개 변수 = value' 형식으로 작성을 해주면 된다.
또 다른 방법으로 if문이나 논리 연산자, nullish를 사용하는 방법도 존재한다.
function showParameterValue(from, text="is my name") {
console.log(from + ": " + text);
}
showParameterValue('Hun'); // Hun: is my name
return은 반환 값으로 불리며 함수를 호출했을 때 함수를 호풀한 그곳에 특정 값을 반환하게 할 수 있다.
function sum(a, b) {
return a + b;
}
let result= sum(2, 3);
console.log(result); // 5
return은 함수 내 어디서든 사용이 가능하며 함수 실행 중 return을 만나게 되면 함수 실행이 return까지만 진행이 된 후 중단 되며 함수를 호출한 곳에 값을 반환하게 된다.
함수안에 아무것도 없거나 return만 있을 경우 undefined를 반환한다.
function doNothing() {
// 1. 아무것도 없거나
/* empty */
// 2. return만 있을 경우
return;
}
console.log(doNothing() === undefined); // true
return (
some + long + expression
+ or +
whatever * f(a) + f(b)
);
함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것이기 때문에 가능한 간결하고 명확해야 한다.
이름만 봐도 어떤 기능을 하는지 알 수 있게 해놔야 하며 함수는 동작 하나만 담당해야 한다.
showMessage(..) // 메시지를 보여줌
getAge(..) // 나이를 나타내는 값을 얻고 그 값을 반환함
calcSum(..) // 합계를 계산하고 그 결과를 반환함
createForm(..) // form을 생성하고 만들어진 form을 반환함
checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함