230908 내일배움 사전캠프 10일차

javascript handbook 정리 ✏

 

Part 4. 함수

 

Ⅱ. 함수 표현식 

 

01. 함수 표현식(Function Expression)

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

-> 함수가 변수에 할당됨. 위 예시에서는 함수가 변수 sayHi에 저장된 값이 되었음. 함수는 값이고 변수에 할당될 수 있음.

 

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

alert( sayHi ); // 함수 코드가 보임

-> 마지막줄에서 sayHi 옆에 괄호가 없기 때문에 함수는 실행되지 않음. (어떤 언어에서는 괄호 없이 함수 이름만 있어도 함수가 실행될 수 있지만, JS에서는 괄호가 있어야만 함수가 호출됨)

함수는 본질적으로 '값'임. 따라서 변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해서 다른 변수에 할당할 수도 있음.

 

function sayHi() { // (1) 함수 생성
  alert( "Hello" );
}
let func = sayHi; // (2) 함수 복사

func(); // Hello // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!
sayHi(); // Hello // 본래 함수도 정상적으로 실행됩니다.

-> (2)에서 sayHi에 괄호가 없기 때문에 함수 그 자체가 복사될 수 있는 것. (괄호가 있었다면 함수호출결과=함수의 반환 값)이 func에 저장되었을 것임)

function sayHi() {
  // ...
}

let sayHi = function() {
  // ...
};

-> 함수 선언문엔 없는데, 함수 표현식을 사용하였을 때 세미콜론(;)이 붙는 이유 : 값으로 취급되어 변수에 할당되기 때문에. 구문의 끝이라 구문을 구분하기 위해 세미콜론을 붙임.(변수 할당할 때 세미 콜론 붙인다고 생각하면 됨)

 

02. 콜백 함수

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

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

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

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

-> (이 코드 살짝 이해가 안되긴 하지만) 함수 ask의 인수, showOK와 showCancel은 콜백 함수 또는 콜백임.

콜백 함수 : 함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 나중에 호출하는 것.

상단의 예시에서는 사용자가 "yes"라고 대답한 경우 showOk가 콜백되고, "no"라고 대답한 경우 showCancel이 콜백됨.

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

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

ask 함수 안에 다시 함수를 선언하여 표현 가능.(이름 없이 선언된 함수를 익명 함수-anonymous function-라고 부름)

함수는 ❗동작(action)❗ 을 나타내는 값. 문자열이나 숫자 등의 일반적인 값들은 데이터를 나타냄.

동작을 대변하는 값인 함수를 변수 간 전달하고, 동작이 필요할 때 이 값을 실행할 수 있음.

 

03. 함수 선언문 vs 함수 표현식

⑴ 함수 선언문과 함수 표현식

// 함수 선언문
function sum(a, b) {
return a + b;
}

-> 함수 선언문 : 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재

⑶ 

// 함수 표현식
let sum = function(a, b) {
return a + b;
};

-> 함수 표현식 : 함수는 표현식이나 구문 구성(syntax contruct) 내부에 생성됨.

 

⑵ 함수 호출 타이밍

sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

-> 함수 선언문 : JS에서 함수 선언문이 정의되기 전에도 호출 가능. 스크립트가 진짜 실행되기 전 초기화 단계에서 이미 함수가 생성됨.

sayHi("John"); // error!

let sayHi = function(name) { // (*) 마술은 일어나지 않습니다.
  alert( `Hello, ${name}` );
};

-> 함수 표현식 : JS에서 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성. 실행 흐름이 함수에 도달했을 때부터 해당 함수 사용 가능. 함수가 선언되기 전 접근하는 것 불가능.

 

⑶ 스코프

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

// 조건에 따라 함수를 선언함
if (age < 18) {
  function welcome() {
    alert("안녕!");
  }
} else {
  function welcome() {
    alert("안녕하세요!");
  }
}
// 함수를 나중에 호출합니다.
welcome(); // Error: welcome is not defined

-> 함수 선언문은 함수가 선언된 코드 블록 안에서만 유효하기 때문에 에러 발생.

 

let age = 16; // 16을 저장했다 가정합시다.

if (age < 18) {
  welcome();                          // \ (실행)           
                                              // |
  function welcome() {            // |
    alert("안녕!");                     // | 함수 선언문은 함수가 선언된 블록 내
  }                                           // | 어디에서든 유효합니다
                                              // |
  welcome();                          // / (실행)
} else {
  function welcome() {
    alert("안녕하세요!");
  }
}
// 여기는 중괄호 밖이기 때문에
// 중괄호 안에서 선언한 함수 선언문은 호출할 수 없습니다.
welcome(); // Error: welcome is not defined

-> 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수를 블록 내 어디서든 접근 가능하나, 블록 밖에서는 함수에 접근 불가.

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

let welcome;
if (age < 18) {
  welcome = function() {
    alert("안녕!");
  };
} else {
  welcome = function() {
    alert("안녕하세요!");
  };
}

welcome(); // 제대로 동작합니다.

-> 함수 표현식을 사용하면 if문 밖에 선언한 변수welcome에 함수를 할당하게 되므로 의도한 대로 코드 동작.

 

함수 선언문을 이용하여 함수를 만드는 것이 더 좋음. 함수가 선언되기 전에 호출할 수 있어서 코드 구성이 자유로워지고 가독성도 좋음. 하지만 함수 표현식이 적절할 때는 표현식을 사용하도록 !

 

Ⅲ. 화살표 함수 기본

 

01. 화살표 함수(arrow function)

let func = (arg1, arg2, ...argN) => expression

-> 인자 arg1...argN을 받는 함수

화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환함.

 

일반 함수로 표현한다면 아래와 같음.

let func = function(arg1, arg2, ...argN) {
  return expression;
};

let sum = (a, b) => a + b;
/* 위 화살표 함수는 아래 함수의 축약 버전입니다.
let sum = function(a, b) {
  return a + b;
}; */
alert( sum(1, 2) ); // 3

-> (a, b) => a + b 는 실행되는 순간 표현식 a + b를 평가하고 그 결과를 반환함.

(인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있음. 인수가 없을 땐 괄호 비워놓을 수 있으나 괄호 생략은 불가능)

let age = prompt("나이를 알려주세요.", 18);
let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");
welcome();

-> 화살표 함수는 함수 표현식과 같은 방법으로 사용 가능.

화살표 함수는 처음 봤을 때 가독성이 떨어지지만 익숙해진 후 함수 본문이 한 줄인 간단한 함수는 표현하기 편해짐 !

 

02. 본문이 여러 줄인 화살표 함수

let sum = (a, b) => { // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};
alert( sum(1, 2) ); // 3

-> 본문이 여러줄일경우 중괄호 안에 코드를 넣어주고 명시적으로 결과값을 반환하기 위해 반드시 return 사용.

 

Ⅳ. 나머지 매개변수와 스프레드 문법

 

---

9/8 ⭐사전캠프 특별세션 튜터님 연대기⭐

 

▼ 구독하면 좋은 메일링 서비스

StackShare Weekly

노마드코더

Jon Calhoun

SDS Yamm

 

html.css.js -> react -> 타입스크립트 -> next.js -> 서버 -> node.js(클론코딩 시작)

(마지막엔 서버 배포까지)

 

---