JavaScript specials (JavaScript)

출처 : https://javascript.info/javascript-specials

JavaScript specials

 

JavaScript의 특수 사항들

 

이 장에서는 지금까지 배운 javaScript의 기능들을 간략하게 되짚어 보며 , 특히 미묘한 부분들에 주의을 기울임.

 

코드 구조 (Code structure)

문장(statement) 구분

문장은 세미콜론(;) 으로 구분함 :

 

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

 

보통 줄바꿈 역시 구분자로 취급되어 다음과 같이 사용할 수 있음 :

 

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

 

이를 자동 세미콜론 삽입(automatic semicolon insertion)이라고 부름

 

다만 , 자동 삽입이 항상 올바르게 동작하는 것은 아니며 , 예를 들어 :

 

alert("There will be an error after this message")

[1, 2].forEach(alert)

 

위와 같이 작성하면 오류가 발생할 수 도 있음. 

대부분의 코딩 스타일 가이드에서는 각 문장 끝에 세미콜론을 붙일 것을 권장함. 

 

코드 블록

중괄호 {...}로 묶인 코드 블록이나 반복문 같은 구문 뒤에는 세미콜론이 필요하지 않음 : 

 

function f() {
  // 함수 선언문 뒤에는 세미콜론이 필요 없음
}

for(;;) {
  // 반복문 뒤에는 세미콜론이 필요 없음
}

 

만약 불필요하게 추가된 세미콜론이 있다 하더라도 , 이는 오류가 아니라 무시됨.

 

엄격 모드(strict mode)

모던 JavaScript의 모든 기능을 온전히 사용하기 위해서는 스크립트의 맨 위에 "use strict";를 선언해야 함.

 

'use strict';

...

 

 

이 지시문은 스크립트의 최상단이나 함수 본문의 시작 부분에 위치해야 함.

"use strict"가 없더라도 코드는 작동하지만 , 일부 기능들이 구식 "호환 모드" 방식으로 동작함.

일반적으로는 모던한 동작 방식을 선호함.

앞으로 공부할 클래스와 같은 일부 최신 기능들은 암묵적으로 엄격 모드를 활성화함.

 

변수(variables)

변수는 다음 키워드를 사용하여 선언할 수 있음.

 

let 

const (상수 , 변경 불가)

var (구식 문법; 나중에 다름)

 

변수 이름은 다음을 포함할 수 있음 :

문자와 숫자 (단 , 첫 글자는 숫자가 될 수 없음)

$와 _는 일반 문자와 동일하게 사용됨.

비라틴 문자나 한자 등도 사용할 수 있으나 보통 사용하지는 않음.

 

변수는 동적 타입을 가지며 , 어떤 값도 저장할 수 있음 :

 

let x = 5;
x = "John";

 

JavaScript에는 총 8가지 데이터 타입이 있음 : 

1. number : 부동 소수점 및 정수를 모두 표현

2.bigint: 임의의 길이의 정수

3.string: 문자열

4.boolean: 논리값 (true/false)

5.null: 단 하나의 값 null을 가지며 "비어 있음" 또는 "존재하지 않음"을 의미 

6.undefined: 단 하나의 값 undefined를 가지며 "할당되지 않음" 을 의미

7.object 및 symbol: 복잡한 데이터 구조와 고유 식별자(아직 배우진 않았음)

 

typeof 연산자는 값의 타입을 반환함. 단 두 가지 예외가 있음 :

 

typeof null == "object"(언어상의 오류)

typeof function(){} == "function" (함수는 특별하게 취급됨)

 

상호작용(Interaction)

우리는 브라우저를 작업 환경으로 사용하므로 기본 UI 함수들은 다음과 같음 :

 

prompt(question , [default])

질문을 던지고 , 방문자가 입력한 값을 반환하며 , 취소하면 null을 반환함.

 

confirm(question)

질문을 던져 "확인" 또는 "취소" 중 하나를 선택하게 하며, 그 결과를 true/false로 반환함.

 

alert(message)

메시지를 출력함.

 

이 모든 함수들은 모달 방식으로 작동하며 방문자가 응답할때 까지 코드 실행 을 중지시키고 페이지와의 상호 작용을 막음

 

예시 :

 

let userName = prompt("Your name?", "Alice");
let isTeaWanted = confirm("Do you want some tea?");

alert( "Visitor: " + userName ); // 예: Alice
alert( "Tea wanted: " + isTeaWanted ); // 예: true

 

연산자 ( Operators)

 JavaScript는 다음과 같은 연산자들을 지원함 : 

 

1.산술 연산자 (Arithmetical)

일반 연산자 : * , + , - , / 

나머지 연산자 : % 

거듭제곱 연산자 : ** 

 

참고 : 이항 + 연산자는 문자열을 연결함. 

만약 한 피연산자가 문자열이라면 , 다른 피 연산자도 문자열로 변환됨. :

 

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

 

2.대입 연산자(Assignments)

단순 대입 : a = b

복합 대입 : a *=2 등

 

3.비트 연산자(Bitwise)

비트 연산자들은 최소 32비트 정수에서 비트 단위로 동작함.

 

4.조건 연산자(Conditional)

세 개의 매개변수를 받는 유일한 연산자 : cond? resultA : resultB

-> cond 가 참이면 resultA를 , 아니면 resultB를 반환함.

 

5.논리 연산자(Logical operators)

논리 AND ( && ) 와 논리 OR ( || ) :

단락 평가를 수행하며 , 평가가 멈춘 값을 반환함 ( 반드시 true/false가 아닐수 있음)

 

논리 NOT( ! )

피연산자를 불리언으로 변환한 후 반대 값을 반환함.

 

6.Nullish 병합 연산자 ( Nullish coalescing operator)

연산자 ?? 는 변수 목록 중 정의된 ( 즉 , null 또는 undefined가 아닌) 값을 선택하는 방법을 제공함.

a ?? b는 a가 null/undefined가 아니라면 a를 그렇지 않으면 b를 반환함.

 

7.비교 연산자 (Comparisons)

동등 연산자 ( == ) : 

서로 다른 타입의 값일 경우 숫자로 변환하여 비교함 ( 단 , null 과 undefined는 서로 같으며 , 다른 값과는 같지 않음)

 

예를 들어 : 

 

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

 

다른 비교들도 숫자로 변환하여 비교함.

 

엄격 동등 연산자 ( ===) :

타입 변환 없이 비교하므로 , 서로 다른 타입이면 항상 다르다고 판단함.

null과 undefined는 특별하게 취급하여 서로는 == 로 같지만 다른 값관느 같지 않음.

대소 비교는 문자열의 경우 한 글자씩 비교하며 다른 타입은 숫자로 변환하여 비교함.

 

8.기타 연산자

 

쉼표 연산자 등 몇가지 연산자들이 있음.

 

반복문 (Loops)

3가지의 반복문을 배움 :

 

while 

 

while (condition) {
  ...
}

 

do...while

 

do {
  ...
} while (condition);

 

for

 

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

 

for( let ...)로 선언된 변수는 반복문 내부에서만 유효함.

단 let을 생략하고 기존 변수를 사용할수도 있음.

 

break와 continue 지시문을 사용하면 전체 반복문 또는 현재 반복만 건너 뛸 수 있음.

중첩 반복문에서는 레이블(label)을 사용하여 바깥쪽 반복문을 종료할 수 있음.

 

나중에 객체를 다루기 위한 다른 종류의 반복문도 배울 예정

 

switch 구문 (The "switch" construct)

switch 구문은 여러 if 조건문을 대체할 수 있으며 , 비교에는 엄격 동등 연산자 ( ===)를 사용함.

 

예시 : 

 

let age = prompt('Your age?', 18);

switch (age) {
  case 18:
    alert("Won't work"); // prompt의 결과는 숫자가 아니라 문자열임
    break;

  case "18":
    alert("This works!");
    break;

  default:
    alert("Any value not equal to one above");
}

 

함수 (Functions)

우리는 JavaScript에서 함수를 생성하는 법 3가지를 배움 

 

1. 함수 선언 (Function Declaration)

코드의 주 흐름에서 함수가 선언됨.

 

function sum(a, b) {
  let result = a + b;
  return result;
}

 

2. 함수 표현식 (Function Expression)

표현식의 일부로 함수가 생성됨.

 

let sum = function(a, b) {
  let result = a + b;
  return result;
};

 

3. 화살표 함수 (Arrow functions)

한 줄짜리 표현식 형태 : 

 

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가 됨.