JavaScript Fundamentals - javascript.info (5)

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다.

JavaScript Fundamentals 2.16 ~ 2.18

---

    2.16 함수 표현식    

선언문 방식(Function Declaration)

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

함수 표현식(Function Expression)

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

위 두 개의 함수 선언 방식 모두 동일한 역할을 한다.

 

콜백 함수

함수 매개변수로 다른 함수를 부를 때, 매개변수로 사용된 함수를 콜백 함수 또는콜백이라고 한다.

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

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

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

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

위의 코드에서 showOK, showCancle가 콜백 함수!

=> ask 함수의 question으로 물어본 값이 yes일 경우 yes() 실행, 아닌 경우 no() 실행됨. 

따라서, yes가 참일 경우, 실행 시 yes값으로 전달받은 showOk가, 아닌 경우 no값으로 전달받은 showCancel 이 실행됨.

 

함수 표현식 vs 함수 선언문

• 함수 생성 타이밍 차이

자바 스크립트의 내부 알고리즘을 통해, 스크립트 실행 전 준비단계에서 전역에 선언된 함수 선언문을 찾고 함수를 생성한다.

때문에 만약 특정 상황 이후에 생성되어야 하는 함수가 있는 경우에는 함수 표현식을 통해 선언해줄 필요가 있다.

=> 함수 표현식으로 정의한 함수는 함수가 선언되기 전에 접근 불가.

sayHi("John"); // error!

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

스코프 차이

함수 선언문은 함수가 선언된 코드 블록 안에서만 유효

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(); // 제대로 동작합니다.

물음표 연산자 사용해 단순화 가능.

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

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

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

따라서, 조건에 따라 함수를 선언해야 하는 등의 상황에서는 함수 표현식 사용. 아닌 경우, 함수 선언문을 사용하면 함수가 선언되기 전에도 호출가능하므로 코드 구성을 좀 더 자유롭게 할 수 있어서 좋음.

 

---

    2.17 화살표 함수 기본    

화살표 함수 : arrow function.

기존 함수 생성 방법

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

화살표 함수 생성 방법

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

인수가 하나일 경우 괄호 생략가능.

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6

인수가 없을경우 괄호를 비워 사용.

let sayHi = () => alert("안녕하세요!");

sayHi();

본문이 한 줄인 간단한 함수는 화살표 함수를 만들어 사용하는 것이 편리.

 

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

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

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

 

example

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

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

---

    2.18 기본 문법 요약   

코드 구조

코드는 세미콜론을 기준으로 나뉘고, 자바스크립트는 자동으로 세미콜론 삽입을 해준다. 하지만 간혹 세미콜론 자동 삽입이 동작하지 않을 경우가 있어, 가능하면 명시적으로 세미콜론을 사용해주는 것을 권장한다.

코드 불록이나 반복문과같이 코드 블록과 함께 구성되는 문법 끝에는 세미콜론을 붙이지 않아도 된다. 하지만, 세미콜론을 붙이더라도 무시되어 에러 발생하지 않으므로 쓰는 게 나을 듯.

 

엄격모드

'use strict'를 사용해 모던 자바스크립트에서 지원하는 모든 기능을 활성화할 수 있다. 

스크립트 최상단 또는 함수 본문 최상단에 있어야 한다. 사용하지 않아도 에러 나지 않음 단지 옛 방식으로 동작. 또한 모던 기능 중에 엄격모드를 자동 활성화 하는 기능들이 있음.

 

변수

- let, const, var를 통해 변수 선언가능.

- var은 deprecated, let사용할 것, 단 바꾸지 않을 상수는 const사용.

- typeof 연산자를 통해 자료형 반환가능. typeof null, function은 예외(null을 object라고 하고, function을 function이라고 반환)

자바스크립트에서는 동적 타이핑을 허용. 숫자형 자료를 담는 변수에 문자열을 저장가능.

자료형 : 숫자형, BigInt형, 문자형, 불린 형, null, undefined, 객체형, 심볼형.

 

상호작용

prompt(question, [default]) : 질문을 보여주고, 사용자가 확인 누를 시 사용자 입력값 반환, 취소 클릭 시 null 반환.

confirm(question) : 질문을 보여주고, 사용자가 확인 클릭 시 true, 취소 클릭시 false 반환

alert(message) : 메시지가 담긴 alert창 보여줌

 

연산자

산술 연산자 : +, -, /, *, %, **

할당 연산자 : =(할당 연산자), *=, -=, /=, %/, += (복합 할당 연산자)

비트 연산자 : &, |, ^, >>, <<,  >>> 

조건부 연산자 : cond ? resultA : resultB

논리 연산자 : &&, ||, !

nullish 병합 연산자 : '??', 만나는 값 중 첫 번째로 defined 된 값을 return.

비교연산자 : '==', '===', <, <=, >, >=, 등.

    *** null == undefined //true; null === undefined //false; 

    *** 문자열이 비교연산자의 피연산자로 들어올 경우 글자 단위로 비교 이뤄짐. 다른 타입의 값이 들어오면 숫자형으로 형 변환 후 비교. 

기타 연산자 : 쉼표 연산자 등.

 

반복문

while, do~while, for문.

*** for 문 안에 선언한 변수는 반복문 내에서만 사용가능. (또는 기존에 선언되어 있는 변수도 사용가능)

*** break, continue를 통해 반복문 전체 또는 해당 이터레이션 escape가능. 레이블을 사용해 특정 레이블을 가진 반복문 escape 가능.

 

switch문

if문과 비슷함. switch 조건문과 입력될 매개변수의 타입 매치 필요! 문자열과 숫자 비교 시 비교 못해줌.

 

함수

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를 반환하는 것!

---

 

자바스크립트 기본 2.1 ~ 2.18까지 완료!