[모던JS] 022. [기본] 기본 문법 요약

원문

이 문서에서는 앞에서 다뤘던 기본 문법 중 외우기 쉽지 않아 실수할 수 있는 부분을 중심으로 요약하여 다룬다.

코드 구조 (세미코론, 자동 삽입)

여러 개의 구문은 세미콜론이나 줄바꿈을 기준으로 구분한다.

줄바꿈을 해도 세미콜론이 자동 삽입(qutomatic semicolon insertion)된다.

console.log('hello'); console.log('world');

console.log('hello')
console.log('wworld')

// 둘 다 정상 작동

그런데 아래와 같이 세미콜론 자동 삽입이 이루어지지 않을 때가 있다.

console.log('이 메시지가 출력된 후 에러가 발생한다.')

[1, 2].forEach(alert)

세미콜론 자동삽입이 이루어지는 경우

1. 일반적인 구문
2. {} 중괄호로 끝나는 코드 블록
3. {} 중괄호로 끝나는 코드 블록과 함께 구성되는 문법 (반복문)

코드블럭 자동삽입이 발생하는 구문이더라도 세미콜론을 붙인다고 에러가 발생하지 않는다. 따라서 헷갈리면 그냥 세미콜론을 붙이면 된다.

엄격 모드 (use strict)

모던 자바스크립트에서 지원하는 모든 기능을 이용하려면 코드의 최상단에 'use strict'를 적어야 한다.

'use strict'가 없어도 코드는 옛날 방식으로 동작한다. 하위 호환성을 지킬 수 있다는 장점이 있다. 하지만 가능하면 모던한 방식으로 코드를 작성하는 것을 권장한다.

어차피 class와 같은 문법을 사용하면 자동으로 엄격 모드가 활성호된다.

'use strict';

...

변수와 상수

변수와 상수는 값을 담는 그릇이다. 아래 세 가지 형태로 선언할 수 있다.

• let
• const : 상수라고 하며 이 키워드로 선언된 값은 수정할 수 없다.
• var : 옛날에 let이 등장하기 전 사용하던 키워드이다. 여러 문제가 있어 let이 등장하게 되었다.
  • 호이스팅 : var로 선언한 변수는 호이스팅 현상이 발생한다. 즉 코드 어디에서 var로 선언하더라도 코드 최상단으로 끌어 올려지는 현상 때문에 함수 선언문으로 함수를 선언했을 때 어디에서나 함수를 호출할 수 있는 것과 같은 현상이 발생한다. 그러면 더 좋은 것처럼 보일 수 있지만 변수의 경우 예기치 못한 에러를 발생시킬 수 있기도 하고 코드가독성이 흐려진다.
  • 블록 스코프 부재 : var로 선언한 변수의 값에 함수나 반복문 등 블록 스코프를 갖는 문법이 포함되었을 때 {} 등으로 감싸서 그 안에 변수를 선언하더라도 외부에서 접근할 수 있다. 따라서 자주 사용하는 i와 같은 변수 키워드를 var를 사용하면 한 번밖에 사용하지 못하게 될 수도 있다. (외부에서 별도로 쓰려면 이 함수에 접근하기 때문)
  • 재할당 가능 : var 변수명 이렇게 선언하더라도 그 아래 라인에서 계속해서 var 변수명 과 같이 동일하게 변수를 재할당 할 수 있다. let으로 변수를 선언하면 값을 수정하거나 삭제할 순 있지만 다시 선언하는 것은 불가능한데 var는 가능하다. 이것 때문에 개발자가 실수로 코드 작성하면서 변수를 재할당해버리게 되는 에러를 불러올 수 있다.

변수 명명 규칙

1. camelCase 사용 : 두번째 글자부터 대문자로 사용하는 것.
2. 첫 글자는 숫자가 될 수 없다.
3. 특수기호는 $나 _만 사용 가능
4. 한글 등 모든 언어를 사용할 수 있지만 영어 외 거의 사용되지 않음.

동적 타이핑 (변수의 값 수정)

자바스크립트의 경우 동적 타이핑을 허용하여 언제든지 자료형을 바꾸어 가며 변수의 값을 수정할 수 있다.

let x = 5;
x = '장원영';

자료형 (data type)

자바스크립트의 자료형에는 여덟가지가 있다.

1. 숫자형 : 정수와 부동 소수점
2. BigInt : 아주 큰 숫자, 암호 등을 다룰 때 사용
3. 문자형 : '', ""로 감싸진 텍스트
4. 불린형/불리언 : true, false
5. null : 값이 없음. 개발자가 의도적으로 넣는 것
6. undefined : 값이 없음. 개발자가 null을 넣지 않은 경우 출력됨.
7. 객체형 : 배열, 객체, 함수
8. 심볼형 : 고유한 식별자를 만들 때 사용

함수가 객체형으로 취급받는 이유는 객체형의 성격을 전부 갖고 있기 때문이다.
함수는 객체처럼 프로퍼티를 가질 수 있고, 다른 함수의 인자로 전달될 수도 있고, 반환될 수도 있다는 객체의 특징을 전부 갖고 있다.

typeof

typeof 연산자를 사용하면 값의 자료형을 반환해준다. 그런데 두 가지 예외가 있다.

typeof null == "object" // true
// null은 null이지만 obejct(객체)로 나오는 에러가 있다.
// 자바스크립트에서 하위 호환성을 지킨다는 이유로 일부러 수정하지 않는 것

typeof function(){} == "function" // true
// 함수는 객체형으로 분류되지만 typeof를 해보면 function이라고 출력된다.
// function이라는 자료형은 존재하지 않지만
// 자바스크립트에서는 특별하게 취급된다.

상호작용 함수

세 가지 UI 함수가 있다. 이를 통해 사용자에게 값을 받아 상호작용 할 수 있다.

1. prompt(question, [default])
   • question : 사용자에게 보낼 질문
   • [default] : 사용자가 아무 것도 입력하지 않고 확인버튼을 눌렀을 때 보여줄 값. 생략 가능.
   • 값을 입력하고 확인 버튼을 누르면 사용자가 입력한 값을 반환
   • 취소버튼이나 ESC를 눌러 escape하면 null을 반환
2. confirm(question)
   • 확인과 취소가 있다.
   • 확인을 누르면 true가 반환되고 그 외의 경우에는 false가 반환된다.
3. alert(message)
   • 사용자에게 message를 띄워준다.

위 세 가지는 모달창을 띄워주는데 모달창이 띄워지면 닫히기 전까지는 사용자는 웹페이지의 다른 부분을 조작할 수 없다.

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

alert('방문객 : ' + userName);
alert('차 주문 여부 : ' + isTeaWanted);

연산자

산술 연산자

산술 연산자	기능
*	곱셈
+	덧셈
-	뺄셈
/	나눗셈
%	나머지
**	거듭제곱

단항 연산자와 이항 연산자

-, +는 피연산자가 단항일 때, 이항일 때 연산이 다르다.

단항 연산자	기능	예시
+	자료형을 숫자형으로 형 변환함	+text (text라는 변수의 값을 숫자로 바꿈)
-	부호를 바꿈	-text (text가 -3이면 +3으로, +3이면 -3으로)

증감 연산자 (++, --)

++, -- 기호를 사용하며 피연산자를 1 증가 시키거나 감소시킨다. 피연산자 앞에 쓰느냐 뒤에 쓰느냐에 따라 값을 반환하는 시기가 달라진다.

연산자	값의 반환 시기	예시
전위 단항 연산자	값을 증감한 후 곧바로 증감된 값을 반환	++i, --i
후위 단항 연산자	현재의 값을 반환한 후 값을 증감 시킴	i++, i--

// 전위 증가 연산자
let x = 5
let y = ++x

console.log(x); // 6
console.log(y); // 6

// 후위 증가 연산자
let x = 5
let y = x++

console.log(x); // 6
console.log(y); // 5

// 감소 연산자도 동일하게 작동

할당 연산자 (=)

=로 나타내며 a = b와 같이 사용한다. 'a는 b와 같다'는 의미가 아니라 b를 a에 할당한다는 의미이다. 연산 우선순위가 낮은 편이라 *, - 등 거의 대부분의 연산이 이루어진 뒤 연산된다.

할당 연산자보다 우선순위가 낮은 연산자는 잘 사용하지 않는 , 쉼표 연산자 정도이다. 이것말고도 연산자의 우선순위롤 고려해서 표현식이 길어질 경우 괄호로 묶는 것이 좋다.

비트 연산자

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

조건부 연산자 (? 삼항 연산자)

자바스크립트 연산자 중 유일하게 매개변수가 3개이다.

(condition) ? value1 : value2와 같이 사용하며 condition이 참이면 좌항을, 거짓이면 우항을 반환한다. condition을 소괄호로 안 묶어도 되지만 가독성을 높이기 위해 묶는 것이 좋다.

삼항연산자는 아래 마지막 예시처럼 중첩해서 사용할 수 있다. 하지만 가독성이 흐려질 수 있으므로 유의한다.

// 변수 값에 따라 다른 메시지 출력하기
let age = 20;
let message = (age >= 18) ? '성인입니다.' : '미성년자입니다.';
console.log(message); // "성인입니다."

// 홀짝 구분하기
let number = 5;
let result = (number % 2 === 0) ? '짝수입니다.' : '홀수입니다.';
console.log(result); // "홀수입니다."

// 변수가 null인 경우 처리하기
let value = null;
let output = (value !== null) ? value : '값이 없습니다.';
console.log(output); // "값이 없습니다."

// 조건부 다른 연산하기
let x = 10;
let y = (x > 0) ? Math.sqrt(x) : -Math.sqrt(-x);
console.log(y); // 3.1622776601683795

// 변수의 값이 어느 범위에 해당하는지 확인하기
let score = 85;
let grade = (score >= 90) ? 'A' : (score >= 80) ? 'B' : 'C';
console.log(grade); // "B"

논리 연산자 (&&, ||)

피연산자를 비교하여 단락평가(shor-circuit evaluation)된다. 단락평가의 의미는 표현식을 평가하는 도중 더 이상의 평가가 필요하지 않으면 평가를 중단하는 것을 말한다. 이 덕분에 불필요한 연산을 줄이고 작업 효율을 높일 수 있다.

• && (AND) 연산자
  • falsy한 값을 찾아 다니는 논리 연산자
  • 모든 피연산자가 true인 경우에만 true를 반환
  • 첫번째 피연산자가 false인 경우 해당 값을 반환하고 두번째 피연산자는 평가하지 않음
  • 모든 피연산자가 false라면 가장 마지막 값을 반환
• || (OR) 연산자
  • truthy한 값을 찾아 다니는 논리 연산자
  • 피연산자 중 하나라도 true면 true를 반환
  • 첫번째 피연산자가 true인 경우 해당 값을 반환하고 두번째 피연산자는 평가하지 않음
  • 모든 피연산자가 false면 가장 마지막 값을 반환

console.log(false && true); // false
console.log(true && "Hello"); // "Hello"
console.log(false && 123); // false
console.log(true && false && true); // false
console.log(true && "Hello" && 123); // 123
console.log(false && "World" && 456); // false

console.log(true || false); // true
console.log(false || "Hello"); // "Hello"
console.log(true || 123); // true
console.log(false || true || false); // true
console.log(false || "Hello" || 123); // "Hello"
console.log(false || null || "World"); // "World"

nullish 병합 연산자 (??)

실제로 값이 있는 피연산자를 찾을 때 사용한다.
a ?? b 형태로 사용하며 좌항 a가 null이나 undefined가 아니면 a를 반환하고 맞다면 b를 반환한다. 즉 둘 다 null이나 undefined여도 b를 반환한다.

// 변수가 null이나 undefined일 때 기본값 지정하기
let name = null;
let defaultName = 'Guest';

let result = name ?? defaultName;
console.log(result); // 'Guest'

// 객체의 속성이 없거나 값이 null일 때 기본값 지정하기
let obj = { age: 25 };
let result = obj.name ?? 'Unknown';
console.log(result); // 'Unknown'

// 함수 매개변수의 기본값 지정하기
function greet(name) {
  let username = name ?? 'Guest';
  console.log(`Hello, ${username}!`);
}

greet(); // Hello, Guest!

비교 연산자 (==, ===)

비교 연산자	기능	예시
==	값만 일치 여부 비교	a == b
===	값과 타입의 일치 여부 비교	a === b

NOT ! 연산자와도 자주 사용한다. !=, !==

console.log(5 == '5'); // true
console.log(1 == true); // true
console.log(0 == false); // true

console.log(5 === '5'); // false
console.log(1 === true); // false
console.log(0 === false); // false

console.log(5 != '5'); // false
console.log(1 != true); // false
console.log(0 != false); // false

console.log(5 !== '5'); // true
console.log(1 !== true); // true
console.log(0 !== false); // true

반복문 (while, dow-while, for)

// while 문
let i = 0;
while (i < 5) {
    console.log(i)
    i++;
}

// do-while 문
// 함수body와 condition을 위치를 뒤바꿀 때 사용
do {
    ...
} while (condition);

// for 문
for(let i = 0, i < 10, i++) {
    ...
}

while문은 condition이 truthy한 값이면 코드블럭이 계속 실행된다. falsy한 값이 되면 반복문을 멈춘다.

for문은 condition을 3항으로 작성하는데, (a, b, c)일 때 a는 begin으로 for문에 접근할 때 최초 한 번만 실행하고 보통 최초 변수의 값을 초기화(할당) 하는 용도로 사용한다.
b는 조건식으로 반복될 때마다 평가한다.
c는 증감식으로 조건식이 true면 코드블럭을 실행하고 난 뒤 가장 마지막에 실행된다. 증감식이 실행되고 그 다음은 다시 조건식을 평가하는 과정을 거친다.

switch문

switch문의 매개변수가 어느 값에 해당하는지 확인하고, 그 값일 때 실행할 코드블럭을 별도로 지정할 때 사용한다.

let age = prompt('나이를 입력하세요.', '');

switch (age) {
    case 18:
        alert('이 코드는 작동하지 않음');
        break;

    case "18":
        alert('낭랑 18세이시군요!');
        break;

    defualt:
        alert('어떤 case문에도 해당하지 않습니다.');
}

함수 (function)

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

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, b)를 fumction sum(a=1, b=2)와 같이.
• 함수는 항상 무언가를 반환한다. return문이 없는 경우 undefined를 반환한다.