모던 javascript 튜토리얼

기본 문법 요약

crab. 2022. 6. 14. 07:59

코드 구조

  • 여러 개의 구문은 세미콜론을 기준으로 구분할 수 있습니다.
  • 코드 블록({...} )이나 코드 블록과 함께 구성되는 문법(예: 반복문) 끝엔 세미콜론을 붙이지 않아도 괜찮습니다.

엄격 모드

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

변수

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

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

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

  • 정수와 부동 소수점을 저장하는 데 쓰이는 숫자형
  • 아주 큰 숫자를 저장할 수 있는 BigInt형
  • 문자열을 저장하는 데 쓰이는 문자형
  • 논리값 true/false을 저장하는 데 쓰이는 불린형
  • ‘비어있음’, '존재하지 않음’을 나타내는 null 값만을 위한 독립 자료형 null
  • 값이 할당되지 않은 상태를 나타내는 undefined 값만을 위한 독립 자료형 undefined
  • 복잡한 자료구조를 저장하는 데 쓰이는 객체형과 고유한 식별자를 만들 때 사용되는 심볼형

상호작용

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

  • prompt(question, [default])  =>  프롬프트 창에 매개변수로 받은 question을 넣어 사용자에게 보여줍니다. ‘확인’ 버튼을 눌렀을 땐 사용자가 입력한 값을 반환해주고, ‘취소’ 버튼을 눌렀을 땐 null을 반환합니다.
  • confirm(question)  =>  컨펌 대화상자에 매개변수로 받은 question을 넣어 사용자에게 보여줍니다. 사용자가 ‘확인’ 버튼을 누르면 true를, 그 외의 경우는 false를 반환합니다.
  • alert(message)message  =>  가 담긴 얼럿 창을 보여줍니다.

연산자

산술 연산자

  • 사칙 연산에 관련된 연산자 * + - /와 나머지 연산자 %, 거듭제곱 연산자 **가 대표적인 산술 연산자에 속합니다. 이항 덧셈 연산자 +는 피연산자 중 하나가 문자열일 때 나머지 하나를 문자형으로 바꾸고 두 문자열을 연결합니다.

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는 자기끼리 비교할 땐 참을 반환하지만 다른 자료형과 비교할 땐 거짓을 반환합니다.

반복문

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

switch문

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

함수

  • 함수 선언문: 주요 코드 흐름을 차지하는 방식
  • 함수 표현식: 표현식 형태로 선언된 함수
  • 화살표 함수:
    • 함수는 지역 변수를 가질 수 있습니다. 지역 변수는 함수의 본문에 선언된 변수로, 함수 내부에서만 접근할 수 있습니다.
    • 매개변수에 기본값을 설정할 수 있습니다. 문법은 다음과 같습니다. function sum(a = 1, b = 2) {...}
    • 함수는 항상 무언가를 반환합니다. return문이 없는 경우는 undefined를 반환합니다.

'모던 javascript 튜토리얼' 카테고리의 다른 글

코딩 스타일  (0) 2022.06.16
Chrome으로 디버깅하기  (0) 2022.06.15
화살표 함수 기본  (0) 2022.06.13
함수 표현식  (0) 2022.06.11
함수  (0) 2022.06.10