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

kiki97 ㅣ 2022. 8. 23. 15:39

기본 문법 요약

외우기 쉽지 않아 자칫하면 실수할 수 있는 부분을 중심으로 요약

엄격 모드

모던 자바스크립트에서 지원하는 모든 기능을 활성화하려면 스크립트 맨 위에 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 : 사용자에게 보여주는 메세지
[default] : 입력하지 않았을때의 기본값 설정
취소버튼을 눌렀을땐 null을 반환

confirm(question) : 확인버튼을 눌르면 true, 그외 경우는 false
question : 사용자에게 보여주는 메세지

alert(message) : message가 담긴 얼럿 창을 보여줌

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

연산자

산술 연산자

사칙연산, 나머지 연산자%, 거듭제곱 연산자**

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

할당 연산자

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

비트 연산자

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

조건부 연산자

연산자 중 유일하게 매개변수가 3개인 연산자

cond? resultA : resultB와 같은 형태로 사용하고, cond가 true이면 resultA를, 아니면 resultB를 반환

논리 연산자

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

nullish 병합 연산자

?? 는 피연산자 중 실제 값이 정의된 피연산자를 찾는데 쓰인다.

a ?? b 의평 가결과는 a가 null이나 undefined 이면 a, 아니면 b가 된다.

비교 연산자

동등 연산자 ==는 형이 다른 값끼리 비교할 때 피연산자의 자료형을 숫자형으로 바꾼 뒤 비교를 진행

null과 undefined는 자기끼리 비교할 땐 참을 반환하지만 다른 자료형과 비교할 땐 거짓을 반환

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

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

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

피연산자로 문자열이 들어오면 글자 단위로 크기 비교가 이루어진다.

기타 연산자

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

반복문

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

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

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

for안쪽에 선언한 변수는 오직 반복문 내에서만 사용 가능, 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문에도 해당하지 않습니다.");
}

함수

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

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를 반환

저작자표시

kiki-dev