JavaScript [중간 정리]

지금까지 배운 내용을 정리해보도록 하겠습니다.

 

 

코드 구조

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

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

 

줄 바꿈도 여러 개의 구문을 구분하는데 사용됩니다.

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

 

 

이런 동작 방식을 '세미콜론 자동 삽입'이라 부릅니다. 그런데 세미콜론 자동 삽입이 동작하지 않을 때도 있습니다.

alert('이 메세지가 출력된 후 에러가 발생합니다.') //세미콜론을 붙이면 에러가 발생하지 않습니다.

[1,2].forEach(alert)

 

그래서 문장의 끝에 세미콜론을 붙이는 것을 권장합니다.

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

function f() {
  // 함수 선언문 끝엔 세미콜론이 필요 없습니다.
}

for(;;) {
  // 반복문 끝엔 세미콜론이 필요 없습니다.
}

 

세미콜론이 없어도 되는 자리에 세미콜론을 붙이더라도 무시되기 때문에 에러가 발생하지 않습니다.

 

 

엄격 모드

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

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

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

추후에 배우게 될 클레스와 몇 개의 모던 기능은 엄격 모드를 자동으로 활성화 시킵니다.

 

 

변수

변수는 키워드를 이용해 선언할 수 있습니다.

• let
• const : 한 번 값을 할당하면 변경할 수 없는 상수를 정의할 때 사용합니다.
• var : 과거에 쓰였으나 지금은 쓰이지 않습니다.

 

변수 이름 명명 규칙

• 숫자와 문자를 사용할 수 있지만 첫 글자로 숫자가 올 수 없습니다.
• 특수기호는 $와 _ 만 사용할 수 있습니다.

 

자바스크립트는 할당할 때 자료형을 바꿔 재할당 할 수 있습니다.

let age = 18;
 age = "모르겠어요";

 

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

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

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

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

 

 

상호작용

호스트 환경이 브라우저인 경우, 다음과 같은 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비트 정수로 변환하여 이진 연산을 수행합니다.

 

조건부 연산자

조건부 연산자는 자바스크립트 연산자 중 유일하게 매개변수가 3개인 연산자입니다. cond ? result A : result B 와 같은 형태로 사용하고, cond 가 true이면 result A를, 아니면 result B를 반환합니다.

 

논리 연산자

AND 연산자 && 와 OR 연산자 || 는 단락 평가를 수행하고, 평가가 멈춘 시점의 값을 반환합니다. 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를 반환합니다.

비교 연산자의 피연산자로 문자열이 들어오면 글자 단위로 크기비교가 이뤄집니다. 다른 타입의 값이 들어오면 숫자혀으로 형 변환 후 비교를 진행합니다.

 

기타 연산자

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

 

 

반복문

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

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

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

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

 

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

plust. 레이블 설명

[자바스크립트] '레이블', 반복문을 제어하자!

 

 

switch 문

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

let age = prompt('나이를 알려주세요.', 19);

switch (age) {
  case 18:
    alert("작동하지 않습니다"); // prompt 함수는 항상 문자열을 반환하므로, 이 case문엔 절대 도달할 수 없습니다.
    break;

  case "19":
    alert("성인입니다.");
    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를 반환합니다.