자바스크립트-nullish 병합 연산자 ??, 반복문, 함수

nullish 병합 연산자 '??'

-a ?? b

만약 a가 null, undefined 둘 다 아니면 a이고, null이나 undefined이면 b이다.

=>??를 사용하면 값이 할당된 변수를 빠르게 찾을 수 있다. 대부분 변수에 기본값을 할당하는 용도로 사용한다.

 

-x = a ?? b

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

이 코드는 x = a ?? b와 같은 코드이다.

 

-사용자가 아무런 정보도 입력하지 않는 케이스

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

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

?? 연산자를 사용하면 값이 정해진 변수를 간편하게 찾을 수 있다.

 

-??와 ||의 차이

let height = 0;

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

||는 0이 falsy로 취급해서 100이 나온다. 

??는 height가 null이나 undefined인 경우에만 100이 나온다.

 

-연산자 우선순위

let height = null;
let width = null;

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

alert(area); // 5000

??의 우선순위는 5로 꽤 낮다. 따라서 ??를 사용하여 값을 선택할 땐 괄호를 추가해야 한다.

하지만 ?와 = 보다는 높다.

 

• 안정성 이슈로 ??는 괄호 없이 &&이나 ||과 함께 사용하지 못한다.

//에러
let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'

//올바른 표현
let x = (1 && 2) ?? 3; // 제대로 동작합니다.

alert(x); // 2

제약을 피하려면 괄호를 사용한다.

 

반복문

-레이블(label)

labelName: for (...) {
  ...
}

레이블은 반복문 앞에 콜론과 같이 쓰는 식별자이다.

 

outer: 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('완료!');

break outer는 outer라는 레이블이 붙은 반복문을 찾아 빠져나오게 한다. 

레이블은 continue와도 같이 사용이 가능하다.

 

-switch문

let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("표현식 +a는 1, 표현식 b+1는 1이므로 이 코드가 실행됩니다.");
    break;

  default:
    alert("이 코드는 실행되지 않습니다.");
}

a는 1로 평가된다. 그리고 b+1은 a와 같아져서 코드가 실행된다.

 

함수

• return문이 없거나 return 지시자만 있는 함수는 undefined 반환

-함수 이름짓기

showMessage(..)     // 메시지를 보여줌
getAge(..)          // 나이를 나타내는 값을 얻고 그 값을 반환함
calcSum(..)         // 합계를 계산하고 그 결과를 반환함
createForm(..)      // form을 생성하고 만들어진 form을 반환함
checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함

get: 값을 반환

calc: 무언가 계산

create: 무언가를 생성

check: 무언가를 확인하고 불린값 반환

 

-함수는 동작 하나만 담당

함수는 이름에 언급되어 있는 동작만 정확히 수행해야한다. 독립적인 두 개의 동작은 독립된 함수 두 개에 나눠서 수행해야 한다. 함수가 길어지면 함수를 잘게 쪼갤 때가 되었다는 신호이다.

 

-예제

function checkAge(age) {
  if (age > 18) {
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}

이 코드를

1. 물음표 연산자 ?를 사용하여 본문을 작성
2. OR 연산자 ||를 사용하여 본문을 작성

function checkAge(age){
    return (age > 18) ? true:confirm('보호자의 동의를 받으셨나요?');
}

function checkAge(age){
    return (age > 18) || confirm('보호자의 동의를 받으셨나요?');
}

이렇게 만들 수 있다.

 

함수 표현식

-함수 코드를 보는법

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

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

 

-함수 복사

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

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

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

이런식으로 복사해도 잘 실행된다.

 

• 함수 표현식의 끝엔 세미 콜론이 있어야한다.

function sayHi() {
  // ...
}

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

 

-콜백 함수

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

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

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

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

컨펌창을 띄워 질문을 던지고 답변을 받으면 간단한 설문조사를 진행할 수 있다.

 

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

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

위 함수의 요약 코드이다. 이름 없이 선언한 함수를 익명 함수라고 한다.

 

-함수 표현식 vs 함수 선언문

1. 문법

함수 표현식

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

 

함수 선언문

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

2. 언제 함수를 생성하는지

함수 표현식: 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성

sayHi("John"); // error!

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

 

함수 선언문: 함수 선언문이 정의되기 전에도 호출할 수 있다.

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

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

 

• 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 접근 가능하지만 블록 밖에서는 함수에 접근하지 못한다.

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

let welcome;

if (age < 18) {

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

} else {

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

}

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

let welcome; 덕분에 밖에서도 접근 가능하다.

 

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

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

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

? 연산자를 사용하면 코드를 단순화할 수 있다.

 

화살표 함수 기본

함수 표현식보다 단순하고 간결한 문법으로 함수를 만드는 것이 화살표 함수이다.

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

이 코드를 아래 코드로 축약할 수 있다.

 

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

이 코드는 인자 arg1부터 argN까지 인자로 받는 함수 func가 만들어진다. 함수 func는 화살표 우측의 표현식(expression)을 평가하고 결과를 반환한다.

 

-예시

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

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

이런식으로 축약할 수 있다.

 

-인수가 하나인 경우

let double = n => n * 2;
// let double = function(n) { return 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

중괄호는 본문이 여러 줄이란 의미이다. 그리고 중괄호를 사용했으면 return으로 결과를 반환해야한다.

 

-예제

화살표 함수로 바꾸기

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

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

 

답

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

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