[UI/UX]coding 기초 - javascript- 익명함수, 함수 스코프, 즉시 실행 함수, 재귀 함수, 화살표 함수

✔매개변수에 기본값 지정하기

---

함수에 매개변수를 선언할 때 기본값을 지정하려면 함수는 매개변수의 갯수와 인수의 갯수가 동일해야 한다.
만약 매개변수의 갯수와 인수의 갯수가 다르면 함수는 정상적으로 실행되지 않는다.
하지만 함수의 인수를 3개까지 보낼수 있는 함수에서 인수를 1개만 보내거나 2개만 보낼 경우 매개변수에 기본값을 지정해주면 함수를 안전하게 실행 가능하다.

[기본형]

function 함수명(매개변수1=값1,매개변수2=값,매개변수3=값3){
자바스크립트 코드
}

함수명(인수1);
함수명(인수1 인수2);
함수명(인수1 인수2 인수3);

📖 익명함수(함수표현식)

---

• 익명함수를 선언할 때에는 이름을 붙이지 않는다. 그래서 이 함수를 변수에 넣어두었다가 변수명을 이용하여 호출한다.
• 익명함수는 호이스팅 기술을 지원하지 않는다. 그래서 반드시 함수를 먼저 만든 후에 호출해야 한다.

[기본형]

let 변수명 = function(){코드}

변수명(); -> 익명 함수 호출문

✔함수에서 return문의 역할

---

return문은 함수에서 결과값을 반환하는 역할을 한다.
그리고 함수에서 return문이 등장하면 반복문의 break문과 비슷하게 코드가 강제 종료된다. 즉, 함수의 결괏값을 반환하면서 강제 종료 시키는 문장이다.

[기본형]

1. 일반함수 정의문
 --------------------------
 function 함수명(){
 자바스크립트코드1;

 return 데이터(값) -> 데이터 값을 반환하고 종료

 자바스크립트코드2; -> 실행하지 않고 무시됨
 }

 2. 익명함수(함수표현식)
 ---------------------------
 let 변수 = function(){
 자바스크립트코드1;

 return 데이터(값) -> 데이터 값을 반환하고 종료

 자바스크립트코드2; -> 실행하지 않고 무시됨
 }

📖 함수 스코프

---

함수 스코프란 함수가 선언된 위치에 따라 달라지는 '유효범위'를 의미한다. 함수안에는 또 다른 함수를 넣을 수 있다.

이때 안에 있는 함수를 '지역함수',지역함수를 감싸고 있는
스크립트영역에 선언된 함수를 '전역함수'라고 한다.

만약 한 프로젝트 안에 같은 이름의 전역 변수나 전역 함수를 사용하면 충돌이 발생한다.이럴 때 지역함수를 이용하면 자신의 코드를 안전하게 지킬수 있음.

[기본형]

📖즉시 실행 함수

---

• 즉시 실행 함수는 함수를 정의하면서 동시에 실행할 수 있다.
• 즉시 실행 함수를 사용하면 브라우저가 로딩되는 순간 바로실행한다.
• 기본형에서 function(){}()마지막에 붙은 소괄호는 함수 호출문이다.
• 즉시 실핼 함수는 익명함수의 형태를 가지고 있다.
• 함수 표현식이다. 그렇기 때문에 ()뒤에 세미콜롬을 붙여야 한다.

[기본형]

  (function(매개변수){
  자바스크립트 코드
  }(호출문));
  
  or

  (function(매개변수){
  자바스크립트 코드
  })(호출문);

ex)

📖재귀 함수 호출

---

함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 '재귀 함수 호출'이라고 한다.
재귀 함수 호출을 사용하면 반복문처럼 여러 번 함수를 호출 할 수 있다.

[기본형]

function 함수명(){
 자바스크립트 코드;

 함수명(); -> 재귀함수호출. 위쪽의 코드를 실행한후 또 함수를 호출함
}

 함수명();

📖화살표 함수

---

ES6 버전부터는 익명함수를 표기할 때 좀 더 쉽고 직관적으로 만들수 있는 '화살표 함수'가 생겼다.

[기본형]

  let 변수 = (매개변수) => {코드};

  1.let 변수 = () => {코드};
  매개변수가 없을 경우 매개변수 자리에 ()를 작성한다.
  

  2. let 변수 = 매개변수 => {return코드};
  매개변수가 1개인 경우 ()생략할 수 있다.
  

  3. let 변수 = 매개변수 => 코드;
  매개변수가 1개이면서 실핼시킬 코드가 1줄인 경우 매개변수의
  ()도 생략 할 수 있고, 코드자리의 {}도 생략할 수 있다.
  이때 return도 생략 된걸로 간주한다.


  4. let 변수 = (매개변수1, 매개변수2) => {코드};
  : 매개변수가 2개 이상인 경우 ()를 꼭 작성하고 콤마(,)로 구분한다.
  
  
  5. let 변수 = 매개변수 => {코드1; 코드2; return 데이터;}
  : 작성할 코드가 2줄 이상인 경우 {}를 써야하고 만약 값을 반환해야
  할 경우 return도 작성한다.

❗ 화살표 함수를 이용하여 사용자의 이름을 묻고 환영문구를 화면에 출력하기