221123_TIL

삼항 연산자

구문 : condition ? exprIfTrue : exprIfFalse

• 매개변수

1. condition
   • 조건문으로 사용되는 표현식
2. exprIfTrue
   • condition이 True일 경우 실행되는 표현식. (true와 같거나 true로 치환될 수 있는 값)
3. exprIfFalse
   • condition이 False일 경우 실행되는 표현식. (False와 같거나 False로 치환될 수 있는 값)

• 예제

let age = 26;
let beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"

화살표 함수

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

이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어진다. 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다.

• 예제

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

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

welcome();

typeof

• typeof 연산자는 해당 값의 자료형을 반환해준다.

상호작용

• prompt(question, [dafault])
  - 프롬프트 창에 매개변수로 받은 question을 넣어 사용자에게 보여줍니다. ‘확인’ 버튼을 눌렀을 땐 사용자가 입력한 값을 반환해주고, ‘취소’ 버튼을 눌렀을 땐 null을 반환합니다.
• comfirm(question)
  - 컨펌 대화상자에 매개변수로 받은 question을 넣어 사용자에게 보여줍니다. 사용자가 ‘확인’ 버튼을 누르면 true를, 그 외의 경우는 false를 반환합니다.
• alert(message)
  - message가 담긴 얼럿 창을 보여줍니다.
  

세 함수는 모두 모달 창을 띄워주는데, 모달 창이 닫히기 전까지 코드 실행이 중지됩니다. 사용자는 모달 창 외에 페이지에 있는 그 무엇과도 상호작용할 수 없습니다.

• 예시

let userName = prompt("이름을 알려주세요.", "영희");
let isTeaWanted = confirm("차 한 잔 드릴까요?");

alert( "방문객: " + userName ); // 영희
alert( "차 주문 여부: " + isTeaWanted ); // true

함수

세 가지 방법으로 함수를 만들 수 있습니다.

1. 함수 선언문: 주요 코드 흐름을 차지하는 방식

function sum(a, b) {
  let result = a + b;

  return result;
}

2. 함수 표현식: 표현식 형태로 선언된 함수

let sum = function(a, b) {
  let result = a + b;

  return result;
};

3. 화살표 함수:

// 화살표(=>) 우측엔 표현식이 있음
let sum = (a, b) => a + b;

// 대괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있음. return문이 꼭 있어야 함.
let sum = (a, b) => {
  // ...
  return a + b;
}

// 인수가 없는 경우
let sayHi = () => alert("Hello");

// 인수가 하나인 경우
let double = n => n * 2;
함수는 지역 변수를 가질 수 있습니다. 지역 변수는 함수의 본문에 선언된 변수로, 함수 내부에서만 접근할 수 있습니다.
매개변수에 기본값을 설정할 수 있습니다. 문법은 다음과 같습니다. function sum(a = 1, b = 2) {...}
함수는 항상 무언가를 반환합니다. return문이 없는 경우는 undefined를 반환합니다.

debugger 명령어

스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 봅니다.

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- 여기서 실행이 멈춥니다.

  say(phrase);
}

• debugger 명령어를 사용하면 브라우저를 켜 개발자 도구를 열고 소스 코드 영역을 띄워 중단점을 설정하는 수고를 하지 않아도 됩니다. 에디터를 떠나지 않고도 중단점을 설정할 수 있기 때문에 편리하죠.