[M.JS.T Part1] 2. 자바스크립트 기초

in JavaScript


Part 1. 코어 자바스크립트 2. 자바스크립트 기초

Link

2.3 엄격 모드
2.4 변수와 상수
2.5 자료형
2.6 alert, prompt, confirm을 이용한 상호작용
2.7 형 변환
2.8 기본 연산자와 수학
2.9 비교 연산자
2.12 null 병합 연산자 ‘??’
2.13 while과 for 반복문
2.15-17 함수

2.3 엄격 모드

ES5에서 기존 기능의 변경이 있었다. 이는 하위 호환성 문제를 불러일으킨다. 그래서 변경사항 대부분은 ES5의 기본 모드에서 활성화되지 않도록 설계되었다. 대신 use strict 이라는 특별한 지시자를 사용해 엄격 모드를 활성화 했을 때만 이 변경사항이 활성화되도록 했다.

use strict

지시자 "use strict" 또는 'use strict' 가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작한다. 함수 본문 맨 앞에만 온다면 오직 해당 함수만 엄격 모드로 실행된다. 모던 자바스크립트는 ‘클래스’와 ‘모듈’ 구조를 제공한다. 이 둘을 사용하면 엄격 모드가 자동을 적용되기 때문에 생략이 가능하다.

2.4 변수와 상수

변수 명명 규칙

  1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
  2. 첫 글자는 숫자가 될 수 없다.

use strict 없이 할당하기

선언자(?) let 없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능했다. 하지만 엄격 모드에서 에러를 발생시키기 때문에 지양하도록 하자.

대문자 상수

코드 실행 전부터 이미 그 값을 알고 있는 상수. ‘하드 코딩한’ 값의 별칭을 만들 때 사용하면 된다. ex) 색의 16진수 값 (0) , 웹페이지 로드에 걸리는 시간 (X)

2.5 자료형

자바스크립트는 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 dynamically typed language이다.

Primitive 자료형 (Immutable)

Number 정수, 부동소수점 숫자, special numeric value(Infinity, -Infinity, NaN) BigInt 표준으로 채택된지 얼마 안된 자료형으로, 정수 리터럴 끝에 n 을 붙이면 만들 수 있다. (모든 브라우저에서 지원하지 않는다) String " ' backtick 으로 묶인다. Boolean true, false Undefined 값이 할당되지 않은 상태. 프로그래머가 직접 이 값을 할당하는 것은 지양 Null 존재하지 않는(nothing) 값, 비어 있는(empty) 값, 알 수 없는(unknown) 값 Symbol 객체의 고유한 식별자(unique identifier)를 만들 때 사용

Reference 자료형

Object 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있다. function, array가 여기에 속한다.

2.6 alert, prompt, confirm을 이용한 상호작용

alert modal window를 띄우고, 닫을 때까지 다른 행동이 불가. 메시지를 보여주는 게 목적 prompt 두 개의 필드를 받고, 마찬가지로 모달 창을 띄움. 사용자가 입력한 값을 반환 confirm 매개변수로 받은 question이 담긴 모달 창을 띄우고, true/false 반환

2.7 형 변환

문자형으로 String(value) 숫자형으로 수학 연산 적용 시 자동, Number(value)

  • 적용 규칙 | 전달받은 값 | 형 변환 후 | |————|———–| |undefined | NaN| |null | 0| |true and false | 1 and 0| |string | 처음과 끝 공백 제거 후 남아있는 문자열이 없다면 0, 아니면 숫자를 읽습니다. 변환에 실패하면 NaN | 불린형으로 숫자 0, 빈 문자열, null, undefined, NaN 은 false 그 외 true

2.8 기본 연산자와 수학

단항 연산자 +와 숫자형으로의 변환

숫자가 아닌 것에 단항 덧셈 연산자를 붙이면 숫자형으로의 변환이 일어난다. 동일한 기호의 단항 연산자는 이항 연산자보다 우선순위가 높다는 것을 기억하자.

비트 연산자 (bitwise operator)

인수를 32비트 정수로 변환하여 이진 연산을 수행 &, |, ^, ~, <<, >>, >>>

2.9 비교 연산자

문자열 비교 알고리즘 유니코드를 따른다. 따라서 “A”보다 “a”가 더 큰 값을 가진다 다른 형을 가진 값 간의 비교 숫자형으로 바꿔서 비교한다.

2.12 null 병합 연산자 ‘??’

스펙에 추가된 지 얼마 안되었다.

피연산자 중 ‘값이 할당된’ 변수를 빠르게 찾을 수 있다. 또한 변수에 기본값을 할당하는 용도로 사용할 수 있다. 연산자 우선 순위가 낮기 때문에 괄호와 함께 사용하고, || 또는 && 와 함께 사용하는 것은 금지되어있다.

2.13 while과 for 반복문

  • 중첩 반복문에서는, 반복문 앞에 레이블을 붙이고 break labelName 을 통해 빠져나올 수 있다.

2.15 함수 (선언문 방식)

function() {}

2.16 함수 표현식

let f = function () {}
  • 함수는 “동작”을 나타내는 값

함수 선언문과 함수 표현식의 차이

  1. 문법
  2. 자바스크립트 엔진이 언제 함수를 생성하는지
    • 함수 선언문: 함수 선언문 전에도 호출될 수 있기 때문에, 스크립트 실행 이전에 생성
    • 함수 표현식: 실제 실행 흐름이 해당 함수에 도달했을 때 생성
  3. 스코프
    • 함수 선언문: 엄격 모드에서, 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근 가능, 하지만 블록 밖에서는 접근 불가

함수 선언문은 함수가 선언되기 이전에 함수를 활용할 수 있기 때문에, 좀 더 자유로운 구성을 가능하게 하고, 가독성을 높인다. 함수 표현식은 함수 선언문을 사용하는 게 부적절할 때 사용하는 것이 좋다.

2.17 화살표 함수 기초

let f = () => {}