기본 문법 요약

기본 문법 요약

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

코드 구조

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

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

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

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

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

alert('이 메시지가 출력된 후에 에러가 발생한다.') [1, 2].forEach(alert)

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

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

function f() { // 함수 선언문 끝에는 세미콜론이 필요 없다. } for(;;) { // 반복문 끝에는 세미콜론이 필요 없다. }

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

2021.11.15 - [Language/JavaScript] - 코드 구조

엄격모드

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

'use strict' ...

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

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

추후 배우게 될 클래스와 몇몇 모던 기능은 엄격 모드를 자동으로 활성화한다.

2021.11.15 - [Language/JavaScript] - 엄격 모드

변수

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

let

const - 한 번 값을 할당하면 더는 값을 바꿀 수 없는 상수를 정의할 때 쓰인다.

var - 과거에 쓰이던 키워드로 자세한 내용은 추후 다룰 예정

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

숫자와 문자를 사용하되 첫 글자는 숫자가 될 수 없다.

특수기호는 $ 와 _ 만 사용할 수 있다.

비 라틴계 언어의 문자나 상형문자도 사용할 수 있지만 잘 쓰이진 않는다.

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

let x = 5; x = "John";

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

정수와 부동 소숫점을 저장하는 데 쓰이는 숫자형

아주 큰 숫자를 저장할 수 있는 BigInt형

문자열을 저장하는 데 쓰이는 문자형

논리값 true / false 을 저장하는 데 쓰이는 불린형

'비어있음', '존재하지 않음' 을 나타내는 null 값만을 위한 독립 자료형 null

값이 할당되지 않은 상태를 나타내는 undefined 값만을 위한 독립 자료형 undefined

복잡한 자료 구조를 저장하는 데 쓰이는 객체형

고유한 식별자를 만들 때 사용되는 심볼형

typeof 연산자는 값의 자료형을 반환해준다. 그런데 두 가지 예외 사항이 있다.

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

2021.11.15 - [Language/JavaScript] - 변수와 상수

2021.11.15 - [Language/JavaScript] - 자료형

상호작용

호스트 환경이 브라우저인 경우, 다음과 같은 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

2021.11.16 - [Language/JavaScript] - alert, prompt, confirm을 이용한 상호작용

연산자

산술연산자

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

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

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

할당 연산자

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

비트 연산자

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

조건부 연산자

조건부 연산자는 자바스크립트 연산자 중 유일하개 매개변수가 3개인 연산자이다.

cond ? result A : result B 와 같은 형태로 사용하고, cond 가 truthy 면 resultA를, 아니면 resultB를 반환한다.

논리 연산자

AND 연산자 && 와 OR 연산자 || 는 단락 평가를 수행하고, 평가가 멈춘 시점의 값을 반환한다. ( 꼭 true 나 false 일 필요는 없다.)

NOT 연산자 ! 는 피연산자의 자료형을 불린형으로 바꾼 후 그 역을 반환한다.

null 병합 연산자

null 병합 연산자 ?? 는 피연산자 중 실제 값이 정의된 피연산자를 찾는 데 쓰인다. 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 를 반환한다.

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

기타 연산자

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

2021.11.16 - [Language/JavaScript] - 기본 연산자와 수학

2021.11.16 - [Language/JavaScript] - 비교 연산자

2021.11.17 - [Language/JavaScript] - 논리 연산자

2021.11.17 - [Language/JavaScript] - null 병합 연산자 '??'

반복문

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

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

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

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

2021.11.17 - [Language/JavaScript] - 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문에도 해당하지 않습니다.'); }

2021.11.18 - [Language/JavaScript] - 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) { ... }

문법 - function sum(a = 1, b = 2) { ... } 함수는 항상 무언가를 반환한다. return 문이 없는 경우는 undefined 를 반환한다.

2021.11.18 - [Language/JavaScript] - 함수

2021.11.19 - [Language/JavaScript] - 함수 표현식

2021.11.19 - [Language/JavaScript] - 화살표 함수 기본

출처 : 모던자바스크립트 튜토리얼

from http://heimish-web.tistory.com/65 by ccl(A) rewrite - 2021-11-19 20:02:05