[JavaScript] 함수 (Function) 총정리 1탄 (함수선언문, 함수표현식, 매개변수, 인수, 기본값, 반환값, console.log와 return의 차이)

   

   목차 

1. 함수 선언문과 함수 표현식
2. 함수 이름 짓기
3. 매개변수(인자), 인수
4. 기본값 
5. 반환값 
6. console.log()와 return의 차이

 

 

 

함수를 적는 방식에는 함수 선언문과 함수 표현문 2가지가 있다.

 

 

 

 함수 선언문 

 

- function 키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 써준다.
- 매개변수가 없을 수도 있고, 만약 매개변수가 여러 개 있다면 각 매개변수를 콤마로 구분해준다.
- 이어서 함수를 구성하는 코드의 모임인 '함수 본문(body)'을 중괄호로 감싸 붙여준다.

 

function name(parameter1, parameter2, ... parameterN) {
// 함수 본문
}

function showMessage() {
alert( '안녕하세요!' );
}

// 위 함수는 showMessage라는 이름의 함수이고, 함수 본문은 '안녕하세요' 알람창이 뜨는 것이다.

 

-  function  ➔ 키워드
-  name 과  showMessage  ➔ 함수이름 
-  { alert( ‘안녕하세요!’ ); }  ➔ '함수 본문' (함수를 구성하는 코드의 모임)
-  (parameter1, parameter2, ... parameterN)  ➔ 매개변수

 

 

 

 함수 표현식 

 

- 함수를 생성하고 변수에 값을 할당하는 것처럼 함수를 변수에 할당한다.
- 함수가 어떤 방식으로 만들어졌는지에 관계없이 함수는 값이기 때문에, 변수에 할당할 수 있다. 

 

let sayHi = function() {
  alert( "Hi" );
};


const sayHello = function() {
  alert( "Hello" );
};

 

위 예시에선 함수가 변수 sayHi와 sayHello에 저장된 값이 되었다. 즉, 함수를 만들고 그 함수를 변수에 할당하였다.

 

 

 

 함수 선언문과 함수 표현식의 차이점 

 

-  함수선언문 : 선언 전에 윗줄에서도 함수 호출 가능 (함수자체가 올라가있는 상태라서)

-  함수표현식 : 선언 전에 윗줄에서 함수 호출 불가능 (변수만 올라가있는 상태라서)

 

 

 함수선언문 : 함수 자체가 메모리상으로 올라간다. (함수 본문이 통째로 올라감)

 // function a ( ) { } 

----------------------------------------

a ( )

function a ( ) {

}

 

 

 함수표현식 : 변수만 메모리 상으로 올라간다. 

 // b

----------------------------------------


b ( )

const b = function ( ) {

}

 

 

 

 객체환경과 선언환경 

 

 var과 let 

객체환경(var,일반함수)      선언환경(let, const)
   x: undefined                  y        

-------------------------------------------------------------

console.log(x)
var x = 1;    // undefined



cosole.log(y) 
let y = 2;    // Uncaught ReferenceError: y is not defined

 

 

 일반함수와 const 

    객체환경(var,일반함수)          선언환경(let,const)
 getNumber<function Object>          getNumber2       

------------------------------------------------------------------------------------

getNumber()

function getNumber() {   // 함수선언문은 함수자체가 메모리상으로 올라간다.
 return '1'   // 선언 전에 호출 가능한 것은, 이미 함수가 올라가있어서 언제든 호출이 가능하기 때문
 }



getNumber2() // Error

const getNumber2 = function(){   // 함수표현문은 변수만 메모리 상으로 올라간다
 return '1'
}

 

 

 

 객체 환경 (var, 일반함수) 

- window객체랑 묶어버림. window.x 나 window.getNumber( )가 이런 원리이다.
- var과 일반함수는 선언과 동시에 초기화(undefined)가 진행된다.
- 즉, undefined는 객체환경이 만들어준 것이다.

 

 

 선언환경 (let, const) 

- 선언만 하고 할당은 안해! (y랑 getNumber()가 이런 원리이다)
- let과 const로 선언된 변수는 호출 전에는 TDZ에 들어가 있다. (따라서 할당부를 만나기 전에 호출을 하면 에러가 뜬다.)
-할당 후에는 TDZ를 벗어나게 된다.

 

자세한 내용은 '호이스팅' 문서 참고 https://dev-ini.tistory.com/44

 

 

---

 

 

 함수 이름 짓기 

 

- 함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것이다. 따라서 함수의 이름은 대개 동사이다.
- 함수 이름은 가능한 한 간결하고 명확해야하고, 함수가 어떤 동작을 하는지 설명할 수 있어야 한다.
- 즉, 코드를 읽는 사람은 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.
- 함수가 어떤 동작을 하는지 축약해서 설명해 주는 동사를 접두어로 붙여 함수 이름을 만드는 것이 관습이다. (다만, 팀 내에서 그 뜻이 반드시 합의된 접두어만 사용해야 한다.)
- 함수는 동작 하나만 담당해야한다 

- "show..." ➔  무언가를 보여준다. (ex. showMessage(...) // 메시지를 보여줌)
- "calc..." ➔ 무언가를 계산한다. (ex. calcSum(...) // 합계를 계산하고 그 결과를 반환함)
- "create..." ➔ 무언가를 생성한다. (ex. createForm(...) // form을 생성하고 만들어진 form을 반환함)
- "check..." ➔ 무언가를 확인하고 불린값을 반환한다. (ex. checkPermission(...) // 승인 여부를 확인하고 true나 false를 반환함
- "get..." ➔ 값을 반환한다. (ex. getAge(...) // 나이를 나타내는 값을 얻고 그 값을 반환함)

 

 

---

 

 

 매개변수(인자), 인수 

 

 

 매개변수 (인자=parameter) 

- 함수를 위해 필요하다고 지정하는 값  (선언 시 쓰이는 용어)
- 함수를 실행하는 데 필요한 '입력'
- 함수 선언 방식 괄호 사이에 있는 변수
- 임의의 데이터를 함수 안에 전달함

 

 

 인수 (=argument) 

- 함수를 호출 할 때 매개변수에 전달되는 값 (호출 시 쓰이는 용어) 
- 함수를 실행하는 데 필요한 '입력' 

 

 

예시를 통해 살펴보자!

function showMessage(from, text) { // 인자: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello!  // 인수: 'Ann', 'Hello'
showMessage('Ann', "What's up?"); // Ann: What's up?  // 인수: 'Ann', 'What's up?'

(1) showMessage 라는 함수는 매개변수(인자) from 과 text를 가진다.
(2) 알람창에는 (from : text) 구조로 된 값이 나오게 한다.
(3) showMessage 함수를 호출하는데, 호출하면서 (’Ann’, ‘Hello!’)라는 두가지 인수를 써준다.
(4) 그러면 이 'Ann', 'Hello!' 인수는 각각 함수에 전달 되는데, 그 과정에서 from과 text 인자에 각각 복사된다.
(5) 따라서 Ann: Hello! 라고 알람창에 출력이 된다. 마찬가지로 Hello!를 바꿔서 ‘What’s up’으로 출력하면 Ann: What's up?이 나온다.

 

즉, 함수 선언 시 매개변수를 나열하게 되고, 함수를 호출할 땐 인수를 전달해 호출한다.
위 예에서 함수 showMessage는 from과 text라는 두 매개변수(인자)를 사용해 선언되었고, 그 후 호출 시엔 from, Hello라는 두 인수를 사용해 호출되었다.

 

 

---

 

 

 기본값 

- 함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined가 된다.
-  매개변수가 2개지만, 아래와 같이 인수를 하나만 넣어서 호출할 수 있다.

 

function showMessage(from, text) {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: undefiend

 

- 이렇게 코드를 작성해도 에러가 발생하지 않는다.
- 두 번째 매개변수에 값을 전달하지 않았기 때문에 text엔 undefined가 할당된다. 따라서 에러 없이 "Ann: undefined"가 출력된다.

 

매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면, 함수를 선언할 때 =를 사용해 '기본값(default value)'을 설정해주면 된다.

 

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

 

- text = “no text given” : 매개변수 text에 값이 없다면(값을 전달 받지 못한다면), "no text given"이라는 기본값을 대신 출력해달라
- 이제는 text가 값을 전달받지 못해도 undefined 대신 기본값 "no text given"이 할당된다.

 

 

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann", undefined); // Ann: no text given

 

- 매개변수에 값을 전달해도 그 값이 undefined와 엄격히 일치한다면 기본값이 할당된다.

 

 

---

 

 

 반환값 (return value) 

 

- 함수를 호출했을 때 함수를 호출한 그곳에 특정 값을 반환하게 할 수 있는데, 이때 이 특정 값을 반환 값(return value)이라고 부른다.
- return: 함수를 반환한다. (내보낸다) (=함수를 실행한 후 그 결과값을 함수 밖으로 넘기는 것)
- 반환하는 위치는 함수를 호출한 위치이다.
- 함수 결과값을 반환 할때는 return 예약어 다음에 넘겨줄 값이나 변수 또는 식을 지정한다.

 

 

 

 (1) 반환값을 변수에 할당하기 

 

function sum(a, b) {
  return a + b;
}

let result = sum(1, 2);
alert( result ); // 3

 

- sum이라는 이름의 함수는 매개변수 a, b를 지니고 a+b를 반환하는 함수이다.
- 매개변수에 인수(값)을 전달한다. (a=1, b=2를 전달)
- return 예약어 다음에 있는 식이 a+b니까 1+2이 되어서 3이 return된다.
- return된 값인 3은 변수 result에 할당된다. 
- alert를 통해 변수 result를 호출하면 "3"이 알람창에 뜬다.

 

 

 

 (2) 함수에 여러개의 return 써보기 

 

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}

let age = prompt('나이를 알려주세요', 18);

if ( checkAge(age) ) {
  alert( '접속 허용' );
} else {
  alert( '접속 차단' );
}

 

 Case1) 18 이상을 입력한 경우 //  '접속 허용' 

(1) 18 이상을 입력하면, 상단의 if절의 조건인 (age >= 18)이 true가 된다.
(2) if 절이 실행돼서  return으로 true가 반환된다.
(3) 하단의 if절의 조건인, ( checkAge(age) ) 가 true가 된다. (2번에서의 반환값인 true가 들어가기때문에)
(4) if절의 조건 ( checkAge(age) )가  true가 되니까 if절인 { alert( '접속 허용' ) } 이 실행된다.

 

 

 

 Case2) 18 미만을 입력하고 보호자 동의 질문에서 '확인'을 눌렀을 경우 //  '접속 허용'

(1) 18 미만을 입력하면, 상단의 if절의 조건인 (age >= 18)이 false가 된다.
(2) else 절이 실행돼서  return으로 confirm 함수가 실행된다
(3) confirm 함수가 실행 됐을 때 '확인' 버튼을 누르면  return으로 true가 반환된다.
(3) 하단의 if절의 조건인, ( checkAge(age) ) 가 true가 된다. (2번에서의 반환값인 true가 들어가기때문에)
(4) if절의 조건 ( checkAge(age) )가  true가 되니까 if절인 { alert( '접속 허용' ) } 이 실행된다.

 

 

 Case3) 18 미만을 입력하고 보호자 동의 질문에서 '취소'을 눌렀을 경우 //  '접속 차단'

(1) 18 미만을 입력하면, 상단의 if절의 조건인 (age >= 18)이 false가 된다.
(2) else 절이 실행돼서  return으로 confirm 함수가 실행된다
(3) confirm 함수가 실행 됐을 때 '취소' 버튼을 누르면  return으로 false가 반환된다.
(3) 하단의 if절의 조건인, ( checkAge(age) ) 가 false가 된다. (2번에서의 반환값인 false가 들어가기때문에)
(4) if절의 조건 ( checkAge(age) )가  false가 되니까 if절인 { alert( '접속 차단' ) } 이 실행된다.

 

 

 

 (3) 지시자 return만 써서 함수를 종료하기 

 

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}

let age = prompt('나이를 알려주세요', 18);


function showMovie(age) {
  if ( !checkAge(age) ) {
    return;
  } 
   console.log( "영화 상영" );
  }

 showMovie(age); // 영화 상영

 

 

 Case1) 18 이상을 입력한 경우  //  '영화 상영'

(1) 18 이상을 입력하면, 상단의 if절의 조건인 (age >= 18)이 true가 된다.
(2) if절이 실행돼서  return으로 true가 반환된다.
(3) 하단의 if절의 조건인, ( !checkAge(age) ) 가 false가 된다. (2번에서의 반환값인 true에 !가 붙어서 false로 바뀌기 때문에)
(4) if절이 실행되지 않으므로, console.log("영화상영")이 출력된다. 

 

 

 Case2) 18 미만을 입력하고 보호자 동의 질문에서 '확인'을 눌렀을 경우  // '영화 상영' 

(1) 18 미만을 입력하면, 상단의 if절의 조건인 (age >= 18)이 false가 된다.
(2) else절이 실행돼서  return으로 confirm 함수가 실행된다
(3) confirm 함수가 실행 됐을 때 '확인' 버튼을 누르면  return으로 true가 반환된다.
(4) 하단의 if절의 조건인, ( !checkAge(age) ) 가 false가 된다. (2번에서의 반환값인 true에 !가 붙어서 false로 바뀌기 때문에)
(5) if절이 실행되지 않으므로, console.log("영화상영")이 출력된다. 

 

 

 Case3) 18 미만을 입력하고 보호자 동의 질문에서 '취소'을 눌렀을 경우  // 아무것도 뜨지 않는다. 

(1) 18 미만을 입력하면, 상단의 if절의 조건인 (age >= 18)이 false가 된다.
(2) else절이 실행돼서  return으로 confirm 함수가 실행된다
(3) confirm 함수가 실행 됐을 때 '취소' 버튼을 누르면  return으로 false가 반환된다.
(4) 하단의 if절의 조건인, ( !checkAge(age) ) 가 true가 된다. (2번에서의 반환값인 false에 !가 붙어서 true로 바뀌기 때문에)
(6) if절이 실행돼서 return이 된다. (함수 종료!)

 

 

---

 

 

 console.log와 return의 차이 

 

 

 console.log( ) 

- window객체의 console객체의 log메서드이다. ➔ window.console.log( )
- 눈으로 볼 수 있게 출력하는 것 
- 함수 내용물의 결과를 확인하는 용도

 

 return 

- 값을 내뱉는 것 → 내뱉은 값을 다른데에 쓸 수 있다. (다른 변수에 할당)
- return은 그 함수의 반환값 (어딘가에 담길 수 있는 '값')
- 반환값을 쓰고싶으면 변수에 담아야한다.
- 함수를 통해 값을 set 하는 애들은 설정만 하고 끝남. return이 없음
- 함수를 통해 값을 get(얻고자) 하는 애들은 값을 뱉어야함. return 있음
- return을 사용하지 않을때 함수를 실행하면 undefiend가 반환된다.

 

 

 

 예시 1 

 

함수 내부에 console.log를 사용하여 작성

function aa(a,b,c,d){
console.log (a+b+c+d); 
}


let f1 = aa(1,2,3,4)  // 10

console.log( f1 + 100 ); //NaN 

// 함수는 실행하면 결과를 내뱉는데, 그게 undefined가 나옴 (return이 없기 때문에)
// 내부적으로 더해지긴했으나 값을 가지고만 있음 (안내보내고 갖고만 있음)

 

 

함수 내부에 return을 사용하여 작성

function aa(a,b,c,d){
return a+b+c+d; 
}

// 얘를 실행한 값을 가지고 다른 숫자랑 더하고싶어.

let f1 = aa(1,2,3,4) 

console.log( f1 + 100 ); // 110

 

 

 

 예시2 

 

함수 내부에 console.log를 사용하여 작성

function calculate(x,y){
    console.log((x*y));
}
let area1 = calculate(3,4); // 12
console.log('Area1:' + area1); // Area1:undefined

 

1) 콘솔에 x와 y를 곱한 값을 띄우게 하는 calculate라는 함수를 만든다. 
2) 변수 area1를 선언하고 변수에 calculate(3,4)를 호출한 것을 할당한다. (이때, 함수가 호출되면서 콘솔에 12가 뜬다)
3)  마지막 행에서 area1을 console.log하면 undefined가 뜬다. (이유는, calculate 함수에서 return된 값이 없기 때문에 area1에 아무런 값도 들어가지 않았기 때문이다.)

 

 

함수 내부에 return을 사용하여 작성

function calculate(x,y){
    return x*y;
}
let area2 = calculate(3,4);
console.log('Area2:' + area2); // Area2:12

 

 

 

함수 호출, 함수 복사, 내부변수, 외부변수, 화살표 함수에 관한 내용은 2탄에서 계속됩니다!
https://dev-ini.tistory.com/48

 

 

 

참고 자료

https://ko.javascript.info/function-expressions

https://ko.javascript.info/function-basics

https://developer.mozilla.org/ko/docs/Web/API/console/log

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return

https://developer.mozilla.org/ko/docs/Web/API/Window/confirm