javascript- 함수

Jeong·2022년 9월 22일
0
post-thumbnail
post-custom-banner

함수

함수는 세 가지 방법으로 함수를 만들 수 있음
1. 함수 선언문
2. 함수 표현식
3. 화살표 함수
함수는 항상 무언가를 반환하며, return이 없는 경우는 undefined를 반환함

function helloWorld(){
	alert("Hello World!");
}

함수는 값이기 때문에 alert를 이용하여 함수 코드를 출력할 수도 있음

alert(helloWorld) // helloWorld 뒤에 괄호가 없으므로 모달창에helloworld()코드가 그대로 보임

javascript에서 함수는 값이므로 위의 코드에선 함수 소스 코드가 문자형으로 바뀌어 출력되었음

함수의 본질은 값이므로 값에 할 수 있는 일을 함수에도 할 수 있음 예를들어

function helloWorld(){
	alert("Hello World!");
}

let func = helloworld // 함수 복사

func(); // Hello World!
Hello(); // Hello World!

이런 식으 사용할 수 있음

함수 선언문

함수 선언문에서 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재함
함수 선언문이 정의도디기 전에도 호출할 수 있음 그러므로 블록 내 어디서든 활용 가능함
함수표현식보다 가독성이 더 좋음

function helloWorld(){
	alert("Hello World!");
} // 함수선언(Function Declaration)문 방식

함수 표현식(Function Experssion)

함수 표현식에서 함수는 표현식이나 syntax construct 내부에 생성됨
실제 흐름이 해당 함수에 도달했을 때 함수를 생성함

let helloWorld = function() {
	alert("Hello World");
};

콜백 함수

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

or

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
); // 이렇게 함수 이름없이 선언한 함수는 익명함수라고 함

위의 코드에서 함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불림

함수선언문과 함수표현식 중 무엇을 사용하는게 더 좋을까요?
: 함수 선언문을 이용하는게 더 괞찬은듯?

화살표 함수

함수 표현식보다 단순하고 간결함

let sum = (a, b) => a + b;  //화살표 함수
//let sum = (a, b) => {a + b};

함수 func는 화살표 우측의 표현식을 평가하고, 평가 결과를 반환함
아래와 같음

let sum = function(a, b) {
  return a + b;
};
  • 인수가 하나밖에 없다면 괄호를 생략할 수 있음
let pow = n => n**2
//let pow = function(n) {return n**2} 과 거의 동일함
  • 인수가 없다면 괄호를 비워놓으면 됨 단, 이 때 괄호는 생략할 수 없음
let helloWorld = () => alert("Hello World!");

아래와 같이 사용함

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

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

welcome();
profile
화이팅!!
post-custom-banner

0개의 댓글