자바스크립트 기본 - 기본 문법 요약

devheyrin·2022년 4월 20일

modern javascript

목록 보기

18/26

코드 구조

여러 개의 구문은 세미콜론을 기준으로 구분할 수 있다.
줄 바꿈도 여러 개의 구문을 구분하는데 사용된다. 이 경우 ‘세미콜론 자동 삽입'이 발생한다.
아래 코드와 같은 상황에서는 세미콜론 자동 삽입이 발생하지 않아 에러가 발생한다.
```
alert("이 메시지가 출력된 후에 에러가 발생합니다.")

[1, 2].forEach(alert)
```
코드 블록 끝에는 세미콜론을 붙이지 않아도 된다.

엄격 모드

모던 자바스크립트에서 지원하는 모든 기능을 활성화하려면 스크립트 맨 위에 ‘use strict’를 적어주어야 한다.
use strict 가 없어도 코드는 정상적으로 동작하지만, 옛날 방식으로 동작한다. 되도록 모던한 방식을 사용하자.
클래스와 같은 몇몇 기능은 엄격 모드를 자동으로 활성화한다.

변수

변수는 아래와 같은 키워드로 선언할 수 있다.
- let
- const - 한 번 값을 할당하면 더 이상 바꿀 수 없는 변수 == 상수
- var - 과거 쓰이던 키워드
변수 명명 규칙
- 숫자와 문자를 사용하되 첫 글자는 숫자가 될 수 없다.
- 특수기호는 $ 와 _ 만 가능하다.
- 알파벳 외 문자도 사용할 수 있지만 알파벳을 쓰는 것이 권장된다.
자바스크립트는 동적 타이핑을 허용하므로 자료형을 바꿔가며 값을 할당할 수 있다.
자바스크립트가 지원하는 여덟 가지 자료형은 다음과 같다.
- 정수와 부동 소수점을 저장하는 데 쓰이는 숫자형
- 아주 큰 숫자를 저장할 수 있는 BigInt형
- 문자열을 저장하는 데 쓰이는 문자형
- 논리값 true/false을 저장하는 데 쓰이는 불린형
- ‘비어있음’, '존재하지 않음’을 나타내는 null 값만을 위한 독립 자료형 null
- 값이 할당되지 않은 상태를 나타내는 undefined 값만을 위한 독립 자료형 undefined
- 복잡한 자료구조를 저장하는 데 쓰이는 객체형과 고유한 식별자를 만들 때 사용되는 심볼형
typeof 연산자는 값의 자료형을 반환하지만 두 가지 예외가 존재한다.
- typeof null == “object” 언어 자체의 오류이다.
- typeof function(){} == “function” 함수는 자료형으로 분류되지는 않지만 특수하게 취급한다.

상호작용

호스트 환경이 브라우저인 경우, 상호작용할 수 있는 UI 함수는 다음과 같다.

prompt(question, [default])

프롬프트 창에 매개변수로 받은 question을 넣어 사용자에게 보여준다. ‘확인’ 버튼을 눌렀을 땐 사용자가 입력한 값을 반환해주고, ‘취소’ 버튼을 눌렀을 땐 null을 반환한다.

confirm(question)

컨펌 대화상자에 매개변수로 받은 question을 넣어 사용자에게 보여준다. 사용자가 ‘확인’ 버튼을 누르면 true를, 그 외의 경우는 false를 반환한다.

alert(message)

message가 담긴 얼럿 창을 보여준다.

세 함수는 모두 모달 창을 띄워주며, 모달 창이 닫히기 전까지 코드 실행이 중지된다. 사용자는 모달 창이 닫히기 전까지 모달 창 바깥의 요소와 상호작용할 수 없다.

연산자

산술 연산자 - 사칙연산자, 나머지 연산자, 거듭제곱 연산자가 있다. 이항 덧셈 연산자는 피연산자 중 하나가 문자열일 때 나머지 하나를 문자형으로 바꾸고 두 문자열을 연결한다.
할당 연산자 - 단순 할당 연산자와 복합 할당 연산자(a += 2) 가 있다.
비트 연산자 - 인수를 32비트 정수로 변환하여 이진 연산을 수행한다.
조건부 연산자 - 자바스크립트 연산자 중 유일하게 매개변수가 3개이다. cond ? resultA : resultB 형태로 작성하고, cond가 true 이면 resultA 아니면 resultB 를 반환한다.
논리 연산자 - && 와 || 가 있다. 단락 평가를 수행하고 평가가 멈춘 시점의 값을 반환한다. NOT 연산자 ! 는 피연산자의 자료형을 불린형으로 바꾼 후 그 역을 반환한다.
nullish 병합 연산자 - ?? 는 피연산자 중 실제 값이 정의된 피연산자를 찾는 데 쓰인다. null 이나 undefined 가 아닌 첫 번째 값을 반환한다.
비교 연산자 - 동등 연산자와 일치 연산자, < > ≤ ≥ 가 있다.
- 동등 연산자는 형이 다른 값끼리 비교할 때 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행한다. null과 undefined 는 자기들끼리 비교 시에만 참을 반환하고, 그외 모든 경우에는 거짓을 반환한다.
- 일치 연산자는 피연산자의 형을 변환하지 않고, 형이 다르면 무조건 다르다고 평가한다. n
기타 연산자 - 쉼표 연산자 등의 기타 연산자도 있다.

반복문

while, do-while, for 문은 다음과 같이 작성한다.

// 1
while (condition) {
  ...
}

// 2
do {
  ...
} while (condition);

// 3
for(let i = 0; i < 10; i++) {
  ...
}

for(let i) 처럼 괄호 안쪽에 선언한 변수는 반복문 안에서만 사용할 수 있다. let 을 생략하고 기존에 선언된 변수를 사용할 수도 있다.
break 와 continue 는 반복문 전체나 실행 중인 반복을 빠져나가는 데 사용된다.
레이블은 중첩 반복문을 빠져나갈 때 사용한다.

‘switch’문

조건 확인 시 내부적으로 일치 연산자 === 를 사용해 비교한다.

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

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

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

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

함수

함수 생성 방식

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

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

  return result;
}

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

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

  return result;
};

화살표 함수

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

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

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

// 인수가 하나인 경우
let double = n => n * 2;