[모던 JavaScript 튜토리얼] 2.18 기본 문법 요약

22 Jan 2021 • Javascript

모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

기본 문법 요약

실수하기 쉬운 부분을 위주로 지금까지 배운 기본 문법을 요약해보자.

코드 구조

여러 개의 구문은 세미콜론을 기준으로 구분할 수 있다.

alert('Hello'); alert('World');

줄 바꿈도 여러 개의 구문을 구분하는 데 사용되므로 아래 코드를 정상적으로 동작한다. 이러한 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라고 부른다.

alert('Hello')
alert('World')

그러나 대괄호 앞에서는 세미콜론 자동 삽입이 동작하지 않으므로 왠만하면 문장 끝에는 세미콜론을 붙이는 것이 좋다.

alert("이 메시지가 출력된 후에 에러가 발생합니다.")

[1, 2].forEach(alert)

코드 블록({...})이나 코드 블록과 함께 구성되는 문법 끝에는 세미콜론을 붙이지 않아도 괜찮다.

function f() {
  ...
}

for(;;) {
  ...
}

엄격 모드

모던 자바스크립트에서 지원하는 모든 기능을 활성화하려면 스크립트 맨 위에 use strict를 적어줘야 한다.

'use strict';

use strict는 스크립트 최상단이나 함수 본문 최상단에 있어야 한다. use strict가 없어도 코드는 정상적으로 동작하지만, 모던한 방식이 아닌 옛날 방식으로 동작한다. 그리고 후추에 배우게 될 클래스와 같은 몇몇 모던 기능은 엄격 모드를 자동으로 활성화한다.

변수

변수는 아래와 같은 키워드를 통해 선언할 수 있다.

  • let
  • const - 한 번 값을 할당하면 더는 값을 바꿀 수 없는 상수를 정의할 때 쓰인다.
  • var - 과거에 쓰이던 키워드이다.

변수 이름 명명 규칙은 다음과 같다.

  • 숫자와 문자를 사용하되 첫 글자는 숫자가 될 수 없다.
  • 특수 기호는 $와 _만 사용할 수 있다.
  • 비 라틴계 언어의 문자나 상형문자도 사용할 수 있지만 사용되지는 않는다.

자바스크립트는 동적 타이핑을 허용하기 때문에 자료형을 바꿔가며 값을 할당할 수 있다.

let x = 5;
x = "John";

typeof 연산자는 값의 자료형을 반환한다. 두 가지 예외 사항이 있다.

typeof null // "object"
typeof function(){} // "function"

상호작용

호스트 환경이 브라우저인 경우, 다음과 같은 UI 함수를 이용해 사용자와 상호작용할 수 있다.

  • prompt(question, [default]) : 프롬프트 창에 question을 넣어 사용자에게 보여준 후, 사용자가 확인 버튼을 누르면 사용자가 입력한 값을 반환하고, 취소 버튼을 누르면 null을 반환한다.

  • confirm(question)
  • alert(message)

모달 창이 닫히기 전까지 코드 실행이 잠깐 중지되며, 사용자는 모달 창 외에 페이지에 있는 그 무엇과도 상호작용할 수 없다.

연산자

자바스크립트는 아래와 같은 다양한 연산자를 제공한다.

  • 산술 연산자 이항 덧셈 연산자 +는 피연산자 중 하나가 문자열일 때 나머지 하나를 문자형으로 바꾸고 두 문자열을 연결한다.
alert('1' + 2); // '12'
alert(1 + '2'); // '12'

  • 할당 연산자 a = b 형태의 할당 연산자와 a *= 2 형태의 복합 할당 연산자가 있다.

  • 비트 연산자 비트 연산자는 인수를 32비트 정수로 변환하여 이진 연산을 수행한다.

  • 조건부 연산자 조건부 연산자는 자바스크립트 연산자 중 유일하게 매개변수 3개인 연산자이다.

  • 논리 연산자 AND 연산자, OR 연산자는 단락 평가를 수행하고, 평가가 멈춘 시점의 값을 반환한다. 어느 형이든 반환이 가능하다. NOT 연산자는 피연산자의 자료형을 불린형으로 바꾼 후 그 역을 반환한다.

  • null 병합 연산자 null 병합 연산자 ??는 피연산자 중 실제 값이 정의된 피연산자를 찾는 데 쓰인다. 즉, 둘 중에 null이나 undefined가 아닌 값을 찾는다.

  • 비교 연산자 동등 연산자 ==는 형이 다른 값끼리 비교할 때 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행한다. null과 undefined는 자기끼리 비교할 땐 참을 반환하지만 다른 자료형과 비교할 땐 거짓을 반환한다.

    alert( 0 == false ); // true
alert( 0 == '' ); // true

    동등 연산자 이외의 비교 연산자들 역시 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행한다. 일치 연산자 ===는 피연산자의 형을 변환하지 않는다. 형이 다르면 무조건 다르다고 평가한다.

    크고 작음을 비교하는 연산자의 피연산자로 문자열이 들어오면 글자 단위로 크기 비교가 이뤄진다. 다른 타입의 값이 들어오면 숫자형으로 형 변환한 후 비굘르 진행한다.

  • 기타 연산자 쉼표 연산자 등의 기타 연산자도 있다.

반복문

  • while, do-while, for 문은 아래와 같이 작성할 수 있다.
while (condition) {
  ...
}

do {
  ...
} while (condition);

for (let i = 0; i < 10; i++) {
  ...
}
  • for (let..) 안쪽에 선언한 변수는 오직 반복문 내에서만 사용할 수 있다. let을 생략하고 기존에 선언되어있는 변수를 사용하는 것도 가능하다.
  • 지시자 break나 continue는 반복문 전체나 현재 실행 중인 반복을 빠져나가는데 사용된다. 레이블은 중첩 반복문을 빠져나갈 때 사용한다.

‘switch’문

switch문은 if문을 사용해 재작성할 수 있다. switch문은 조건을 확인할 때 내부적으로 일치 연산자 ===를 사용해 비교를 진행한다.

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

switch (age) {
  case 18:
    alert("Won't work"); // prompt 함수는 항상 문자열을 반환하므로, 이 case문엔 절대 도달할 수 없습니다.
    break;

  case "18":
    alert("낭랑 18세이시군요!");
    break;

  default:
    alert("어떤 case문에도 해당하지 않습니다.");
}

함수

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

  1. 함수 선언문: 주요 코드 흐름을 차지하는 방식
function sum(a, b) {
  let result = a + b;
  return result;
}
  1. 함수 표현식: 표현식 형태로 선언된 함수
let sum = function(a, b) {
  let result = a + b;
  return result;
}
  1. 화살표 함수:
let sum = (a, b) => a + b;

let sum = (a, b) => {
  return a + b;
}

let sayHi = () => alert("Hello");

let double = n => n * 2;

함수는 지역 변수를 가질 수 있으며, 이 변수는 함수 내부에서만 접근 가능하다. 또한 매개 변수에 기본값을 설정할 수 있으며 문법은 다음과 같다.

function sum(a = 1, b = 2) {...}

함수는 항상 무언가를 반환하며, return 문이 없는 경우는 undefined를 반환한다.

 모던 JavaScript 튜토리얼s

Comments

Related Posts