[JAVASCRIPT.INFO] 1. 소개 / 2. 자바스크립트 기본

모던 자바스크립트 문법 톺아보기 (단, 완벽히 아는 내용은 정리하지 않고 문서 읽는 것으로 끝냄)

소개

1. 자바스크립트란 ?

...

스크립트 파일을 별도로 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능 상 이점이 있다. 여러 페이지에 동일한 스크립트 파일을 사용하는 경우 페이지가 바뀔 때ㄷ마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.

자바스크립트 기본

3. 엄격모드

• "use strict" 를 사용하여 엄격모드 활성화
• ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 가능성이 있다. 변경 사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었다.
• "use strict"라는 지시자를 통해 엄격모드 활성화 했을 경우만 이러한 변경사항이 활성화된다.
• 클래스와 모듈 구조를 사용하게 되면 엄격모드는 자동으로 적용된다.

5. 자료형

• 숫자형, BigInt, 문자형, 불린형, null, undefined, 객체, 심볼

  객체를 제외한 다른 형은 원시형이라고 부름

• typeof 를 통해서 자료형 확인 가능

  number, bigint, string, boolean, object, undefined, function (null은 object로 나오지만 이는 언어 자체의 오류)

9. 비교연산자

• 다른형을 가진 값 간의 비교

  문자형은 숫자형으로 변환한 뒤 비교

  불린형은 0/1로 변환한 뒤 비교

• 일치연산자

  형변환없이 값을 비교할 수 있음

• null / undefined의 비교

  • null === undefined

    false :: 형이 다르기 때문에 false 반환

  • null == undefined

    true

  • 산술 연산자의 경우

    null -> 0 으로, undefiend -> NaN으로 변환한 뒤 비교

    null == 0 // false :: 동등연산자에서는 null이 0으로 변환되지 않음

    undefined 는 다른 값들과 비교되지 않음 (전부 false)

  일치 연산자를 제외하고, 산술연산자 및 비교연산자에는 null/undefined가 오지 않도록 한다. (예외상황이 있음)

10. if와 '?'을 사용한 조건처리

• 0, "", null, undefined, NaN은 불린형으로 변환 시 모두 false가 된다. 이런 값들은 'falsy'값이라고 부른다. (반대는 truthy)

12. nullish 병합 연산자 '??'

최근 추가된 스펙

• x = a ?? b

  a가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b

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

let firstName = null;
let lastName = null;
let nickName = 'Violet';

//null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "anonymous"); // Violet

• '??'와 '||'의 차이

  ||는 첫 번째 truthy 값을 반환한다.

  ??는 첫 번째 정의된(defined)값을 반환한다.

  height = height ?? 100; // 100

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

• 괄호 없이 ??을 ||나 &&와 사용하는 것은 금지

13. while과 for 반복문

• break/continue와 레이블

  여러 개의 중첩 반복문을 한 번에 빠져나와야 하는 경우

  //labelName : for(...) {
  // ...  
  //}
  
  outer: for(let i=0; i<3; i++){
    for(let j=0; j<3; j++){
      let input = prompt(`(${i}, ${j})의 값, ''`);
      if(!input) break outer;
    }
  }

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

15. 함수

• 매개변수는 함수 선언 방식 괄호 사이에 있는 변수(선언 시 쓰이는 용어)

• 인수는 함수를 호출할 때 매개변수에 전달되는 값(호출 시 쓰이는 용어)

• 기본값

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

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

  자바스크립트에선 함수를 호출할 때마다 매개변수 기본값을 평가한다. 위 예시에서 매개변서 text에 값이 전달되는 경우 anotherFunction()은 호출되지 않는다.

• 반환값
  return문이 없거나 return지시자만 있는 함수는 undefined를 반환한다.

• 함수 이름짓기

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

  함수는 동작 하나만 담당해야 한다.
  createFrom함수는 form을 만들고 이를 반환하는 동작만 해야한다. form을 문서에 추가하는 동작 등이 들어가면 좋지 않다.

16. 함수 표현식

자바스크립트는 함수를 특별한 종류의 값으로 취급한다.

• 함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당되었다.

  function sayHi() {        // 1. 함수 생성
    alert("Hello");
  }
  let func = sayHo;            // 2. 함수 복사
  func();                                // 3. 복사한 함수를 실행
  sayHi();                            //       본래 함수도 정상적으로 실행됨

• 콜백함수

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

  ask 안에 함수가 선언될 수 있다. 이름 없이 선언한 함수는 익명함수라고 부른다. (익명 함수는 변수에 할당된 게 아니기 때문에 ask바깥에서는 접근할 수 없다.)

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

  • 함수 선언문 : 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.
    함수 표현식 ; 함수는 표현식이나 구문 구성 내부에 생성된다. 함수가 할당 연사자 =를 이용해 만든 할당표현식 우측에 생성된다.

  • 자바스크립트 엔진이 언제 함수를 생성하는지
    함수 표현식 : 실제 실행 흐름이 해당 함수에 도달하였을 때 함수를 생성함
    함수 선언문 : 선언문이 정의되기 전에도 호출 가능하다.
    자바스크립트는 스크립트를 실행하기 전 준비단계에서 전역에 선언된 함수 선언문을 찾고 해당 함수를 생성한다.

  • 스코프
    함수 선언문 : 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디든 접근 가능하나, 블록 빢에서는 접근이 불가하다.
    블록 밖에서 호출하고 싶다면, 블록 외에서 선언한 변수를 이용하여 함수를 할당하면 가능하다.

  • 함수 선언문과 함수 표현식 중 어떤 걸 선택해야 하는지?
    함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는 것이 좋다. 하지만 함수 선언 방식이 적합하지 않거나, 조건에 따라 함수를 선언해야 한다면 함수 표현식을 사용하자.

17. 화살표 함수

let func = (arg1, arg2, ... argN) => expression
// 아래 함수 표현식의 축약 버전

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

• 인수가 하나밖에 없다면 인수를 감싸는 괄호는 생략 가능하다.

  let double = n => n*2;

• 인수가 하나도 없을 땐 괄호를 비워놓으면 되지만 생략은 불가하다.

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

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

  let sum = (a, b) => {
      let result = a+b;
    return result;         // 중괄호를 사용했다면, retrun 지시자로 결과값을 반환해주어야 한다.
  }

Reference

https://ko.javascript.info/