함수
특정 작업을 수행하는 코드의 집합
함수는 프로그래밍에서 데이터를 입력 받아, 그 데이터를 처리하고,
결과를 출력하는 과정을 단순화하고, 코드의 재사용을 가능하게 함.
사전적 의미로는 '입력을 받아 그에 따른 출력을 반환하는 수학적 객체'
기본문법
function 함수이름(매개변수1, 매개변수2,... 매개변수N) { 함수가 수행할 작업; return 반환값; }
- function : 함수선언
- 함수 이름 : 함수를 정의할 때 사용하는 식별자. 함수 이름을 통해 함수를 호출할 수 있음.
새롭게 정의한 함수는 함수이름옆에 괄호를 붙여서 실행시킬수도 있음. ex) 함수이름()- 매개변수 : 함수에 전달되는 입력값. 괄호 () 안에 정의되며, 함수 내부에서 변수처럼 사용됨.
매개변수는 없을 수도 있고 하나 이상일 수도 있음.- 반환값 : return 키워드를 사용하여 함수의 결과를 호출한 곳으로 반환.
모든 함수가 return을 사용하는 것은 아니며, 반환값이 없을 수도 있음.
지역변수
해당 함수 내부에서만 접근할 수 있는 변수. 범위(scope)가 선언된 함수 내부로 제한
함수 내부에서 선언되며, 함수의 실행이 종료되면 이 변수는 소멸
function exampleFunction() {
let localVariable = "나는 지역변수입니다.";
console.log(localVariable);
}
exampleFunction(); // "나는 지역변수입니다."
console.log(localVariable); // Error전역(외부)변수
프로그램의 어느 곳에서나 접근할 수 있는 변수.
함수 외부에서 선언되며, 프로그램의 모든 부분에서 사용할 수 있음.
프로그램이 종료될 때까지 유지되며, 어떤 함수 내에서도 접근하고 수정가능.
let globalVariable = "나는 전역변수입니다.";
function exampleFunction() {
console.log(globalVariable);
}
exampleFunction(); // "나는 전역변수입니다."
console.log(globalVariable); // "나는 전역변수입니다."
전역변수가 편리할순 있지만, 지역변수를 쓸 수있는 상황이면 지역변수를 권장.
변수명 겹침상황, 메모리관리, 유지보수 측면에서 지역변수가 좋음.
밑에 두개 예시를 보자
let userName = 'John';
function showMessage() {
userName = "Bob"; //외부 변수userName를 수정함
let message = 'Hello, ' + userName;
console.log(message);
}
console.log( userName ); // John , showMessage()함수 호출전이라 John출력
showMessage(); // Hello, Bob , showMessage()함수호출
console.log( userName ); // Bob, showMessage()함수 호출후 전역변수userName가 Bob으로 바뀜.
//전역변수를 함수내부에서 변경할수 있지만 주의를 요함let userName = 'John';
function showMessage() {
let userName = "Bob"; //외부 변수userName수정이 아니라 함수내부에서 새로 지역변수userName를 선언함.
//이름은 같지만 상관없음. 함수내부에서만 쓰일거니까. 굳이 똑같이 쓸필요는 없음
let message = 'Hello, ' + userName;
console.log(message);
}
console.log( userName ); // John
showMessage(); // Hello, Bob
console.log( userName ); // John , showMessage()호출후에도 전역변수 userName가 출력됨.
//전역변수userName랑 지역변수userName랑은 별개기때문.매개변수
함수를 정의할 때 사용되는 변수. 인자(parameter)라고 불리기도함
함수가 호출될 때, 실제로 전달되는 값(인수argument)을 담기 위한 '통로' 역할을 함
이 매개변수를 통해 함수 외부에서 전달된 데이터를 함수 내부로 가져와서 사용할 수 있음.
기본문법
function 함수명(매개변수1, 매개변수2, 매개변수3, 매...) { 함수 내부 로직 }
function showMessage(from, text) {
from = '*' + from + '*'; // "from"을 좀 더 멋지게 꾸며줍니다.
console.log( from + ': ' + text );
}
let from = "Ann";
showMessage(from, "Hello"); // *Ann*: Hello
// 함수는 복사된 값을 사용하기 때문에 바깥의 "from"은 값이 변경되지 않습니다.
console.log( from ); // Annfrom이 너무 많아서 보는데 이해가 안갔다. 헷갈리지 않도록 살짝만 바꿔 보겠다.
두개는 같은코드다.
function showMessage(fromB, text) {
fromB = '*' + fromB + '*';
console.log( fromB + ': ' + text );
}
let from = "Ann";
showMessage(from, "Hello"); // *Ann*: Hello
console.log( from ); // AnnshowMessage함수에 매개변수로 fromB,text 로 명명하고 두개의 값을 받음.
매개변수 fromB 안에 별(*) 모양과 인수로 들어올 fromB값을 집어넣음.
그리고 console.log로 (fromB매개변수 : text)를 출력하게 만듬.
showMessage(from,"hello"); 함수에 값을 넣고 실행하면 from이 fromB의 인수로,
hello가 text인수로 들어가는것.
전역변수 from에는 "ann"이란 값이 들어가있기때문에
그래서 fromB : text >>> *Ann* : hello 가 찍힘.
기본값
매개변수 옆에 = 연산자를 사용하여 기본값을 설정할 수 있음.
기본값이 설정되어 있으면 그 기본값이 사용되고,
기본값이 설정되어 있지 않고 ,매개변수에 대한 인자를 제공하지 않으면 undefined
기본문법
function 함수이름(매개변수1=기본값1, 매개변수2=기본값2, ...) { 함수 본문 }
function showMessage(from, text = "no text given") {
console.log( from + ": " + text );
}
showMessage("Ann"); // Ann: no text given
showMessage(); // undefined: no text given
showMessage("","given"); //: given
showMessage("Ann","give"); // Ann: givefunction showMessage(from, text = anotherFunction()) {
// anotherFunction()은 text값이 없을 때만 호출됨
// anotherFunction()의 반환 값이 text의 값이 됨
}이런식으로 함수도 기본값으로 설정가능함. text값이 있을경우 그값이 호출되고
없을경우 showMessage함수 실행 될 때마다 anotherFunction함수도 계속 실행됨.
다른방식의 기본값 설정
function showMessage(from, text) {
if (text === undefined) {
text = 'no text given';
}
//만약 text매개변수로 들어오는 값이 undefined면 text 안에 'no text given'값을 넣겠다.
console.log( from + ": " + text );
}
showMessage("test"); //test: no text given또는
function showMessage(from, text) {
text = text || 'no text given'; //or논리연산자로 단락평가.왼쪽값이 참이면 그값을 반환
// 왼쪽값 text로 들어온 값이 없거나 falsy값으로 전달된경우 (undefined,""빈문자열,등등)
// 오른쪽값은 값이있음. true이므로 no text given 반환함.
...
}ES6전 기본값설정이 없던시절 기본값 설정방법.
nullish 병합 연산자(nullish coalescing operator) ???
변수의 값이 null이나 undefined일 때 오른쪽에 있는 값을 반환.
function showCount(count) {
console.log(count ?? "unknown");
}
showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown위에 || 연산자와 유사한점이있다.
다만 ||연산자는 falsy값으로 0,"" 빈문자열도 포함하기때문에 의도치 않은 결과가 나올수 있는데,
??연산자는 오로지 변수의 값이 null이나 undefined일 때만 오른쪽의 값을 반환하기때문에
0,false,"" 같은 값들을 유효한 값으로 취급하고 싶을 때 유용함
반환값
함수의 실행을 종료하고, 그 함수를 호출한 곳으로 특정 값을 반환하기 위해 사용
선택적으로 사용가능하며, 모든함수가 값을 반환할 필요는 없음.
그러나 값을 반환하는 함수를 작성할 때는 return 키워드를 사용하여 반환할 값을 지정해야 함
return문이 없거나 return 지시자만 있는 함수는 undefined를 반환
function add(a, b) {
return a + b; // a와 b의 합을 반환합니다.
}
const result = add(2, 3);
console.log(result); // 5add 함수는 두 개의 매개변수 a와 b를 받고, 이 둘의 합을 계산하고 그결과를 함수를 호출한 곳으로 반환. result변수에 저장되 콘솔에 출력됨.
주의사항 : return과 반환할려는 값사이에는 새 줄이 있으면 안됨.
return
(some + long + expression + or + whatever * f(a) + f(b))
//자바 스크립트는 return문 끝에 세미콜론을 자동으로 넣기 때문에
//return;
//(some + long + expression + or + whatever * f(a) + f(b)) 이렇게 해석되버림.
//반환값이 길어서 새줄로 넘겨야할경우
//return (
// some + long + expression
// + or +
// whatever * f(a) + f(b)
// ) 이런식으로반환값이 쓰이지 않는 경우
- 글로벌 상태 변경 : 함수가 외부의 변수나 데이터 구조를 변경하는 경우.
let count = 0;
function increaseCount() {
count += 1; // 외부 변수 count의 값을 변경
}- 입출력 작업 : 화면에 메시지를 출력하거나, 사용자로부터 입력을 받는 등의 입출력 작업.
function printHello() {
console.log("Hello"); // 콘솔에 텍스트 출력
}
- 네트워크 요청 : 서버에 데이터를 요청하거나 보내는 작업.
function fetchData() {
fetch('https://api.example.com/data'); // 네트워크 요청을 보냄
}
- 파일 시스템 작업 : 파일을 읽거나 쓰는 작업.
const fs = require('fs');
function writeFile() {
fs.writeFileSync('file.txt', 'Hello, world!'); // 파일에 데이터 쓰기
}
함수 이름짓기
함수 이름은 함수가 무엇을 하는지, 어떤 값을 반환하는지, 어떤 인자를 받는지 등을
명확하게 전달할 수 있어야 됨. (개인적으로 가장 잘 안되는 부분)
함수 그 자체로 주석 역할을 할수 있어야됨
- 동사 + 명사 형태 사용하기
- 명확하고 구체적인 이름 사용하기
- 줄임말 사용을 피하기
- 일관성 유지하기
예시)
-"show"로 시작하는 함수는 대개 무언가를 보여주는 함수.
-"get…" – 값을 반환함
-"calc…" – 무언가를 계산함
-"create…" – 무언가를 생성함
-"check…" – 무언가를 확인하고 불린값을 반환함
showMessage(..) // 메시지를 보여줌
getAge(..) // 나이를 나타내는 값을 얻고 그 값을 반환함
calcSum(..) // 합계를 계산하고 그 결과를 반환함
createForm(..) // form을 생성하고 만들어진 form을 반환함
checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함