[자바스크립트] Day2 문법공부 - 함수(함수 선언문 / 함수 표현식 / 화살표 함수)

// 함수 선언문을 
let func = function (arg1, arg2, ...argN) {
	return expression;
}

// 함수 축약 버전으로
let func = (arg1, arg2, ...argN) => expression

// 인수가 하나 밖에 없다면 괄호 생략 가능
let double = n => n * 2;

// 인수가 하나도 없을 땐 괄호를 비워두되, 생략은 불가능
let sayHi = () => alert("안녕하세요!");
sayHi();

// 화살표 함수는 함수 표현식과 같은 방법으로도 사용 가능
let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
   () => alert('안녕') :
   () => alert('안녕하세요!');
   
welcome();

// 본문이 여러 줄인 화살표 함수
let sum = (a,b) => {	// 중괄호는 본문이 여러 줄로 구성되어 있음을 알게해준다
   let result = a + b;
   return result;	// 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 한다
}
alert( sum(1, 2) );	// 3

16. 함수

   * 지역변수 : 함수 내에서 선언한 변수인 지역 변수는 함수 안에서만 접근 가능

   * 전역변수 : 함수 내부에서 함수 밖에서 선언한 외부 변수에 접근 가능

   * 매개변수(parameter) : 인자라고도 부르며, 임의의 데이터를 함수 안에 전달

      - 함수 호출 시 매개변수가 들어있는 함수에 인수를 전달하지 않으면 그 값은 undefined가 됨

// 매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면
// 함수를 선언할 때 = 를 사용해 '기본값'을 설정
function showMessage(from, text = "hello") {
   alert(from + ": " + text);
}
showmessage("Ann");	// Ann: hello

function showMessage(from, text = anotherFunction() ){
   // anotherFunction()은 text값이 없을 때만 호출됨
   // anotherFunction()의 반환값이 text의 값이 됨
}

// 반환 값
// 함수를 호출했을 때 함수를 호출한 그곳에 특정 값을 반환되게 함. 
function sum(a, b) {
   return a+b;
}
let result = sum(1, 2);
alert(result);	// 3

// return문이 없거나 return 지시자만 있는 함수는 undefined를 반환
function doNothing() {}
alert( doNothing() === undefined );	// true

17. 함수 표현식 ( ⭐⭐⭐ 헷갈림..)

// 함수 선언문 방식 
// (끝에 세미콜론 X)

function sayHi() {
   alert("Hello");
}

// 함수 표현식 
// (끝에 세미콜론 O)

let sayHi = function() {	// 함수를 만들고 그 함수를 변수 sayHi에 할당하기
   alert("Hello");
};

// 주의
function sayHi() {
   alert("Hello");
}
alert( sayHi );	// sayHi()로 호출한게 아니라, 함수 실행이 아닌 함수 코드가 보임

let func = sayHi;

func();	//	Hello	--> sayHi() 정상 호출
sayHi();	// Hello	--> sayHi() 정상 호출


// 콜백 함수
// 사용법 : showOk와 showcancel가 ask함수의 인수로 전달됨
function ask(question, yes, no) {
   if (confirm(question)) {
      yes();
   } else {
      no();
   }
}
function showOk() {
   alert( "동의하셨습니다." );
}
function showCancel() {
   alert( "취소하셨습니다." );
}
ask("동의하십니까?", showOk, showCancel);

// 콜백 함수 짧은 예
ask(
   "동의하십니까?",
   function() { alert("동의하셨습니다.");},
   function() { alert("취소하셨습니다.");}
)

// 함수 선언문 vs 함수 표현식
// 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성
// 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용

// 함수 선언문은 스크립트 어디에 있느냐에 상관없이 어디에서든 사용 가능
// 즉, 자바스크립트는 스크립트 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성
// 스크립트가 진짜 실행되기 전 "초기화 단계"에서 함수 선언 방식으로 정의한 하수가 생성되는 것

// 세번째, 스코프
// 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근 가능. 
// 하지만 블록 밖에서는 함수에 접근하지 못함
// 떄문에 블록 내의 타이밍에 실행할 때에는 함수 표현식으로 선언

** 요약 **
1. 함수는 값. 따라서 함수도 값처럼 할당, 복사, 선언 가능
2. '함수 선언문'방식으로 함수를 생성시, 함수가 독립된 구문 형태로 존재
3. '함수 표현식'방식으로 함수 생성시, 함수가 표현식의 일부로 존재
4. 함수 선언문은 코드 블록이 실행되기도 전에 처리됨. 따라서 블록 내 어디서든 활용 가능
5. 함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어짐

** 함수를 선언해야 한다면, 선언 이전에도 함수를 활용할 수 있는 '함수 선언문'방식으로 사용하는게 적절함
     => 코드의 유연성, 가독성

18. 화살표 함수 기본

// 화살표 함수
let func = function(arg1, arg2, ...argN) {
   return expression;	
};

//위와 같은 함수 표현식을 아래와 같이 화살표 함수로 표현
let func = (arg1, arg2, ...argN) => expression

// 인수가 하나밖에 없다면 인수를 감싸는 괄호는 생략 가능
let double = n => n * 2;

alert(double(3) );	// 6

// 인수가 하나도 없을 땐, 괄호를 비워두되, 괄호는 생략 불가능
let sayHi = () => alert("안녕하세요!");
sayHi();

// 화살표 함수는 함수 표현식과 같은 방법으로 ㅏ용 가능
let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
   () => alert('안녕') :
   () => alert('안녕하세요!');
welcome();

// 본문이 여러 줄인 화살표 함수
let sum = (a, b) => {	// 중괄호는 본문 여러 줄로 구성되어 있음을 알 수 있음
   let result = a + b;
   return result;	// 중괄호를 사용하면, return 지시자로 결괏값 반환해줘야 함
};
alert( sum(1, 2) );	// 3

 

 

18. 기본 문법 요약

 생략!!!!