seacode 님의 블로그

사용법

- 함수 표현식을 축약해서 쓰는 것.

let func = (arg1, arg2, ...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

- 본문이 여러 줄인 경우에는 => 옆의 expression 을 { } 로 감싸주면 된다.

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

alert( sum(1, 2) ); // 3

특징

1. 인수가 하나라면 괄호를 생략할 수 있다. (let doub = n => n*2; )

2. 인수가 없다면 괄호를 비워둘 수 있다. (단, 생략은 안된다)

3. 함수 표현식을 축약한 것이다. 따라서 비슷하게 응용할 수 있다.

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

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

welcome();

함수 표현식

- JS는 함수도 '값'으로 취급하므로, 함수 표현식이란걸 통해서 함수를 만들 수 있다.

- 함수 표현식의 끝에 세미콜론은 구문의 끝이므로 붙은 것.

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

function sayHi() {   // (1) 함수 생성
  alert( "Hello" );
}

let func = sayHi;    // (2) 함수 복사

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

- 함수는 '값' 이므로, 위처럼 함수를 복사해 다른 변수에 할당할 수 있다.

- 함수 복사 시, sayHi(); 가 아니라 함수 이름만 넘겨준 것을 주목하라. 괄호가 있었다면 함수가 아니라 함수 반환 값이 func 에 저장된다.

콜백 함수

- 함수를 함수의 인수로 전달하고, 필요시 인수로 전달한 그 함수를 나중에 호출하는 것.

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

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

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

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

- 위 예시에선, 사용자가 yes라고 하면 showOk가 콜백함수가 되고, no는 showCancel이 콜백이 된다.

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

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

- ask 함수 처럼, 이름 없이 선언된 함수는 익명함수라고 부름.

- 익명 함수는 외부에서 접근 안됨.

함수 표현식 vs 함수 선언문

차이

- 1. 자바스크립트 엔진의 함수 생성 시점

• 함수 표현식: 실제 실행 흐름이 해당 함수에 도달 했을 때 함수 생성.
• 함수 선언문: 선언문이 정의 되기도 전에 호출 가능.
• JS는 스크립트 실행 전, 전역에 선언된 함수 선언문을 찾고 -> 해당 함수를 생성하기 때문.

- 2. 스코프

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

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

if 문 밖에서 함수를 호출하려면 함수 표현식을 사용하면 된다.

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

let welcome;

if (age < 18) {

  welcome = function() {
    alert("안녕!");
  };

} else {

  welcome = function() {
    alert("안녕하세요!");
  };

}

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

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

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

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

함수 선언 방법

- function 함수명(파라미터1, 파라미터2, ...) { 본문 }

- 함수는 이름만 보고도 무슨 역할을 하는지 알 수 있는 "자기 설명적(self-describing)" 코드로 작성해야한다.

지역 변수

- 함수 내에서 선언한 변수

- 함수 내에서만 접근 가능함

외부 변수

- 전역 변수

- 함수 내부에서 함수 외부에 선언된 외부 변수(outer variable) 접근 가능함. (수정도 가능)

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) 외부 변수를 수정함

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // 함수 호출 전이므로 John 이 출력됨

showMessage();

alert( userName ); // 함수에 의해 Bob 으로 값이 바뀜

- 지역 변수가 없는 경우에만 사용 가능

• 만약 동일한 이름의 변수가 내외부에 있다면, 내부 변수가 외부 변수를 가리게 됨
• 즉, 같은 이름을 가진 지역 변수에 의해 가려지지 않는다면 모든 함수에서 접근 가능함. (따라서 사용이 권장되지 않고, 최소화 해서 사용하는게 권장됨)

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // 같은 이름을 가진 지역 변수를 선언합니다.

  let message = 'Hello, ' + userName; // Bob
  alert(message);
}

// 함수는 내부 변수인 userName만 사용합니다,
showMessage();

alert( userName ); // 함수는 외부 변수에 접근하지 않습니다. 따라서 값이 변경되지 않고, John이 출력됩니다.

매개 변수

- 파라미터, 인수

- 매개변수 : 함수 선언 방식 괄호 사이에 있는 변수 (선언 시 파라미터를 부르는 용어)

- 인수 : 함수 호출 시 매개변수에 전달되는 값 (호출 시 파라미터를 부르는 용어)

기본값

- 함수 호출 시 매개변수를 전달하지 않으면 undefined 가 default 로 들어간다.

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

혹은

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

- JS 는 파라미터 개수에 맞춰 전달되지 않아도 에러는 안 일으키고, undefined 가 전달됨.

• 따라서 undefined 가 되지 않게 하려면 위와 같이 기본 값 default value 를 파라미터에 fix 해둘 수 있음.

- 기본값 평가 시점은 함수 호출이 될 때 마다 일어난다.

- 옛날 JS 에는 위처럼 기본값 설정을 할 수 없었으므로, 아래와 같이 처리한 흔적을 볼 수 있다. 참고할 것.

function showMessage(from, text) {
  if (text === undefined) {
    text = 'no text given';
  }

  alert( from + ": " + text );
}

혹은

// 매개변수가 생략되었거나 빈 문자열("")이 넘어오면 변수에 '빈 문자열'이 할당됩니다.
function showMessage(text) {
  text = text || '빈 문자열';
  ...
}

혹은

// 매개변수 'count'가 `undefined` 또는 `null`이면 'unknown'을 출력해주는 함수
function showCount(count) {
  alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown

반환 값

- function 함수명(arg1, arg2, ...) { ... return 반환할 값;}

- return 문이 없거나, return; 으로 끝나게 되면 함수는 undefined 를 반환한다.

- JS는 return 끝에 자동으로 ; 를 넣어버리므로, return 문 내부에 줄 삽입을 해선 안된다. 만약 return 값이 길어질 경우 아래와 같이 괄호로 씌워줘야한다.

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )

- for, while, do - while.. 사용법은 C++과 동일하다. 특이한 부분만 살펴보자.

1. ? 오른쪽에 break, continue 는 금물

(i > 5) ? alert(i) : continue; // error!

2. break, continue 그리고 label

- 이중 반복문을 탈출하고 싶을 때, 안 쪽 반복문에 break를 써도 바깥 쪽 반복문은 탈출할 수 없다.

- 이럴 때 레이블을 사용한다.

레이블 : 반복문 앞에서 labelName: for(...) { ... } 로 쓰이는 식별자.

outer: //< for 앞에 붙여서 써도 된다.
for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    let input = prompt(`(${i},${j})의 값`, '');

    // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.
    if (!input) break outer; // (*)

    // 입력받은 값을 가지고 무언가를 함
  }
}
alert('완료!');

1. nullish 병합 연산자

- a ?? b : a가 null 혹은 undefined 라면 b를 반환한다. 그 외엔 a를 반환.

x = (a !== null && a !== undefined) ? a : b; // x = a ?? b

- 주로 값이 정해져있는 변수를 쉽게 찾기위해 사용된다.

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

2. ?? vs ||

- || 는 첫 번째 참을 반환한다.

- ??는 첫 번째 정의된 값을 반환한다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

- height || 100 은 height = 0 이지만, 0 은 false 이므로 null 이나 undefined 를 할당한 것과 같다. 따라서 100.

- height ?? 100 은 height 가 명확하게 null or undefined 일 때만 100이 되므로 0.

- 즉, 높이처럼 0이 할당될 수 있는 변수에는 || 보단 ?? 를 쓴다.

3. 낮은 우선순위

- ?? 는 =와 ? 보다는 먼저, 나머지 연산자보다는 뒤에 평가됨.

- 따라서 괄호를 써주는게 이해하기 쉬움.

- 또한 && 와 || 랑 함께 사용할 수 없도록 되어있음 (안정성 이슈때문. 같이 쓰려면 괄호가 필수)

let height = null;
let width = null;

// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000