기본 문법 요약

지금까지 배운 내용을 다시 떠올리고 요약해봅시다. 외우기 쉽지 않아 자칫하면 실수할 수 있는 부분을 중심으로 요약해 보도록 하겠습니다.

코드 구조

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

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

줄 바꿈도 여러 개의 구문을 구분하는 데 사용되므로 아래 코드는 정상적으로 동작합니다.

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

이런 동작 방식을 '세미콜론 자동 삽입(automatic semicolon insertion)'이라고 부릅니다. 그런데 세미콜론 자동 삽입이 동작하지 않을 때도 있습니다.

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

[1, 2].forEach(alert)

코딩 컨벤션과 같은 코드 스타일 지침서 대부분은 문장의 끝에 세미콜론을 붙이는 걸 권장합니다.

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

function f() {
  // 함수 선언문 끝엔 세미콜론이 필요 없습니다.
}

for(;;) {
  // 반복문 끝엔 세미콜론이 필요 없습니다.
}

세미콜론이 없어도 되는 자리에 ‘여분의’ 세미콜론을 붙이더라도 해당 세미콜론은 무시되기 때문에 에러가 발생하지 않습니다.

자세한 내용은 코드 구조에서 살펴보시기 바랍니다.

엄격 모드

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

'use strict';

...

'use strict'는 스크립트 최상단이나 함수 본문 최상단에 있어야 합니다.

'use strict'가 없어도 코드는 정상적으로 동작합니다. 다만, 모던한 방식이 아닌 옛날 방식으로 동작하죠. '하위 호환성’을 지키면서 말이죠. 될 수 있으면 모던한 방식을 사용하는 걸 추천해 드립니다.

참고로, 추후에 배우게 될 클래스와 같은 몇몇 모던 기능은 엄격 모드를 자동으로 활성화합니다.

엄격 모드에 대한 자세한 내용은 엄격 모드에서 살펴보시기 바랍니다.

변수

변수는 아래와 같은 키워드를 이용해 선언할 수 있습니다.

• let
• const – 한 번 값을 할당하면 더는 값을 바꿀 수 없는 상수를 정의할 때 쓰입니다.
• var – 과거에 쓰이던 키워드로 자세한 내용은 추후에 다룰 예정입니다.

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

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

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

let x = 5;
x = "John";

자바스크립트는 여덟 가지 기본 자료형을 지원합니다.

• 정수와 부동 소수점을 저장하는 데 쓰이는 숫자형
• 아주 큰 숫자를 저장할 수 있는 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가 담긴 얼럿 창을 보여줍니다.

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

예시:

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

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

자세한 내용은 alert, prompt, confirm을 이용한 상호작용에서 살펴보시기 바랍니다.

연산자

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

산술 연산자

사칙 연산에 관련된 연산자 * + - /와 나머지 연산자 %, 거듭제곱 연산자 **가 대표적인 산술 연산자에 속합니다.

이항 덧셈 연산자 +는 피연산자 중 하나가 문자열일 때 나머지 하나를 문자형으로 바꾸고 두 문자열을 연결합니다.

alert( '1' + 2 ); // '12', 문자열
alert( 1 + '2' ); // '12', 문자열

할당 연산자

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

비트 연산자

비트 연산자는 인수를 32비트 정수로 변환하여 이진 연산을 수행합니다. 자세한 내용은 docs에서 볼 수 있습니다.

조건부 연산자

조건부 연산자는 자바스크립트 연산자 중 유일하게 매개변수가 3개인 연산자입니다. cond ? resultA : resultB와 같은 형태로 사용하고, cond가 truthy면 resultA를, 아니면 resultB를 반환합니다.

논리 연산자

AND 연산자 &&와 OR 연산자 ||은 단락 평가를 수행하고, 평가가 멈춘 시점의 값을 반환합니다(꼭 true나 false일 필요는 없습니다). NOT 연산자 !는 피연산자의 자료형을 불린형으로 바꾼 후 그 역을 반환합니다.

nullish 병합 연산자

nullish 병합 연산자 ??는 피연산자 중 실제 값이 정의된 피연산자를 찾는 데 쓰입니다. a가 null이나 undefined가 아니면 a ?? b의 평가 결과는 a이고, a가 null이나 undefined이면 a ?? b의 평가 결과는 b가 됩니다.

비교 연산자

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

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

기타 비교 연산자들 < > <= >= 역시 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행합니다.

일치 연산자 ===는 피연산자의 형을 변환하지 않습니다. 형이 다르면 무조건 다르다고 평가합니다.

null과 undefined는 특별한 값입니다. 두 값을 == 연산자로 비교하면 true를 반환하지만, 다른 값과 비교하면 무조건 false를 반환합니다.

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

기타 연산자

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

자세한 내용은 기본 연산자와 수학, 비교 연산자, 논리 연산자, nullish 병합 연산자 '??'에서 살펴보시기 바랍니다.

반복문

• while, do-while, for 문은 아래와 같이 작성할 수 있습니다.

  // 1
  while (condition) {
    ...
  }
  
  // 2
  do {
    ...
  } while (condition);
  
  // 3
  for(let i = 0; i < 10; i++) {
    ...
  }

• for(let...) 안쪽에 선언한 변수는 오직 반복문 내에서만 사용할 수 있습니다. let을 생략하고 기존에 선언되어있는 변수를 사용하는 것도 가능합니다.

• 지시자 break나 continue는 반복문 전체나 현재 실행 중인 반복을 빠져나가는 데 사용됩니다. 레이블은 중첩 반복문을 빠져나갈 때 사용합니다.

자세한 내용은 while과 for 반복문에서 살펴보시기 바랍니다.

자바스크립트는 이 외에도 객체를 다룰 수 있게 해주는 반복문도 제공합니다. 이에 대해선 추후에 학습하겠습니다.

'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문에도 해당하지 않습니다.");
}

자세한 내용은 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를 반환합니다.

자세한 내용은 함수와 화살표 함수 기본에서 살펴보시기 바랍니다.

아직 끝이 아닙니다!

지금까지 살펴본 기능들은 자바스크립트에서 제공하는 핵심 기능입니다. 이제 겨우 기본을 갖췄네요. 이젠 이 기본을 바탕으로 더 많은 것들을 학습해 보도록 합시다.