JavaScript 2.18

기본 문법 요약

코드구조

• 여러 개의 구문은 세미 콜론을 기준으로 구분할 수 있다.
• 줄바꿈도 여러개의 구문을 구분하는데 사용된다.
  • 이런 동작 방식을 세미콜론 자동 삽입이라 부른다.
  • 세미콜론 자동 삽입이 동작하지 않을 때도 있다.

엄격모드

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

• ‘use strict’를 사용하지 않으면 하위 호환성을 지키면서 옛날 방식으로 동작한다.

변수

• 변수는 다음과 같은 키워드를 이용해 선언할 수 있다.
  • let
  • const : 한 번 값을 할당하면 더는 값을 바꿀 수 없는 상수를 정의할 때 쓰인다.
  • var
• 변수 이름 명명 규칙
  • 숫자와 문자를 사용하되 첫 글자는 숫자가 될 수 없습니다.
  • 특수기호는 $와 _만 사용할 수 있습니다.
  • 비 라틴계 언어의 문자나 상형문자도 사용할 수 있지만 잘 쓰이진 않습니다.

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

• 자바 스크립트의 여덟가지 자료형
  • 정수와 부동 소수점을 저장하는 데 쓰이는 숫자형
  • 아주 큰 숫자를 저장할 수 있는 BigInt형
  • 문자열을 저장하는 데 쓰이는 문자형
  • 논리값 true/false을 저장하는 데 쓰이는 불린형
  • ‘비어있음’, ‘존재하지 않음’을 나타내는 null 값만을 위한 독립 자료형 null
  • 값이 할당되지 않은 상태를 나타내는 undefined 값만을 위한 독립 자료형 undefined
  • 복잡한 자료구조를 저장하는 데 쓰이는 객체형과 고유한 식별자를 만들 때 사용되는 심볼형
  • Typeof 연산자는 자료형의 값을 반환해준다.
    • 단 두가지 예외 사항이 있다.

typeof null == "object" // 언어 자체의 오류
typeof function(){} == "function" // 함수는 특별하게 취급된다.

상호작용

• prompt(question, [default])
• (https://developer.mozilla.org/ko/docs/Web/API/Window/prompt)
  • 프롬프트 창에 매개변수로 받은 question을 넣어 사용자에게 보여줍니다. ‘확인’ 버튼을 눌렀을 땐 사용자가 입력한 값을 반환해주고, ‘취소’ 버튼을 눌렀을 땐 null을 반환합니다.
• confirm(question)
• (https://developer.mozilla.org/ko/docs/Web/API/Window/confirm)
  • 컨펌 대화상자에 매개변수로 받은 question을 넣어 사용자에게 보여줍니다. 사용자가 ‘확인’ 버튼을 누르면 true를, 그 외의 경우는 false를 반환합니다.

• alert(message)

  • (https://developer.mozilla.org/ko/docs/Web/API/Window/alert)

  • message가 담긴 얼럿 창을 보여줍니다.

• 세 함수 모두 모달 창을 띄워주는데, 모달 창이 닫히기 전까지 코드 실행이 중지된다.

연산자

• 산술 연산자
  • 사칙 연산에 관련된 연산자와 나머지 연산자, 거듭제곱 연산자가 대표적이다.
  • 이항 덧셈 연산자는 피연산자 중 하나가 문자열일 때 나머지 하나를 문자형으로 바꾸고 두 문자열을 연결한다.
• 할당 연산자
• 비트 연산자
• 조건부 연산자
  • 유일하게 매개변수가 3개이다.
• 논리 연산자
• Null 병합 연산자
  • 피연산자 중 실제 값이 정의된 피연산자를 찾는데 쓰인다.
• 비교 연산자

반복문

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

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

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

• for(let…) 안쪽에 선언한 변수는 오직 반복문 내에서만 사용할 수 있다.
• break나 continue는 반복문 전체나 현재 실행중인 반복문을 빠져나가는데 사용된다.
• 레이블은 중처 반복문을 빠져나갈 때 사용한다.

switch 문

• switch문은 if문을 사용해 재작성할 수 있다.

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;

• 함수는 지역 변수를 가질 수 있다.
  • 지역 변수는 함수의 본문에 선언된 변수로, 함수 내부에서만 접근할 수 있다.
• 매개 변수에 기본값을 설정할 수 있다.
• 함수는 항상 무언가를 반환한다. return문이 없는 경우는 undefined를 반환한다.