01. 함수 알아보기

01. 함수 호출

• 함수를 선언은 함수 본문 내부 코드를 실행하도록 요청하는 기능은 하지 않고 함수의 존재를 선언합니다. 함수 내부의 코드는 함수가 "호출 될 때만 실행 됩니다."
• 코드에서 함수를 호출 하려면 함수 이름과 괄호를 입력하면 됩니다!

• 함수가 실행되는 순서를 한번 봅시다..!

  

  1. 함수를 선언한다.
  2. 함수를 실행하기 위해선 호출을 한다.
  3. 실행이 되면서 함수 안에 있는 내용들이 실행된다.
  4. 더 실행하고 싶다면 호출을 한번 더 작성한다.

02. 매개 변수와 인수

• 함수를 선언할 때 매개 변수를 지정할 수 있습니다. 매개 변수를 통해서 함수는 입력을 받아들이고 입력을 사용하여 작업을 수행할 수 있습니다.

  

  함수의 매개 변수를 함수 안에서 사용

• 인수는 "값 또는 변수"로 함수에 전달 될 수 있습니다.

• 매개 변수가 있는 함수를 "호출"할 때 괄호 안에 값을 지정합니다. 호출 될 때 함수에 전달되는 값을 "인수 (arguments)" 라고 합니다.

  

  위에 그림처럼 "인수는 값 혹은 변수"로 함수에게 전달이 가능합니다.

  03. 지역 변수와 외부 변수

  - 지역 변수

  • 함수 내에서 선언한 변수(지역변수, local variable)는 함수 안에서만 접근할 수 있습니다.

        function showMessage() {
        	let message = '안녕하세요!' //지역변수
        	alert(message);
        }
        showMessage()// 안녕하세요!
        console.log(message) //Error: 함수 내에 선언된 변수는 지역 변수이기 때문에 밖에서 접근이 불가하다.

    - 외부 변수

  • 함수 내부에서 함수 외부의 변수에 접근할 수 있습니다.

      let userName = 'John';
      
      function showMessage() {
      	let message = 'hello' + userName;
      	console.log(message);
      }
      showMessage(); //hello John

  • 함수 내부에서 외부의 변수에 접근하는 것뿐만 아니라, 수정도 할 수 있습니다.

      let userName = 'john' //외부 변수
      
      function showMessage() {
      	userName = 'Bob'; //(1)외부 변수를 함수 안에서 수정
      
      	let message = 'Hello' + userName;
      	alert(message);
      }
      alert(userName); //함수 호출 전이므로 john 이 출력됨
      showMessage();
      console.log(userName); // 함수에의해 Bob으로 값이 변경

  • 외부 변수는 "지역 변수가 없는 경우에만 사용됩니다."

  • 함수 내부에서 외부 변수와 동일한 이름을 가진 변수가 선언되면, "내부 변수는 외부 변수를 가립니다."

      let userName = 'john';
      
      function showMessage() {
      	let userName = 'Bob';//같은 이름을 가진 지역변수 선
      	
      	let message = 'Hello' + userName; //Bob;
      	console.log(message) //'Hello Bob'
      }
      //함수는 내부 변수인 userName만 사용;
      showMessage();
      
      // 함수는 외부변수에 접근 불가 따라서 값은 'john'
      console.log(userName) 
      
      

  • 위 예시의 userName 처럼, 함수 외부에 선언된 변수는 전역변수라고 부릅니다.

• 전역 변수는(같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면) 모든 함수에서 접근할 수 있습니다.

• 변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋습니다. 변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋습니다.

  ES6 에서 추가된 기능

• 기존에는 함수 매개 변수에서 기초적인 것만 입력 하였다면, es6로 들어 오면서 매개 변수 안에 값을 할당을 해 줄 수 있다.
  

            function greeting (name = 'stranger') {
              console.log(`Hello, ${name}!`)
            }
            
            greeting('Nick') // Output: Hello, Nick!
            greeting() // Output: Hello, stranger!

• 코드에서 보듯이 인수 값을 지정하게 되면 인수 값이 전달되어 변경된 값이 나오고, 인수 없이 호출 했다면 기존에 매개 변수에서 할당한 값이 실행된다.