[바닐라 자바스크립트] 3장 - 자바스크립트 기본 문법

3.1 자바스크립트 작성 위치

  - HTML에서 JS 작성 가능한 위치 (2가지)

    - head 태그

      - title 태그 밑에 <script> </script> 안에 작성

      - 브라우저가 body 태그의 HTML 코드 실행 전에 JS 코드 먼저 해석하게 됨

        - 사용자에게 보여지는 웹 페이지는 느려질 수 있음 (HTML 코드로 작성된 화면 UI 렌더링 속도)

    - body 태그 (권장)

      - body 태그 제일 하단의 <script> </script> 안에 작성

      - body 태그에 있는 HTML 코드가 모두 실행되어 사용자가 보고 있는 브라우저 화면에 나타난 후,

        JS 코드를 실행함으로써 사용자가 느끼는 페이지 로딩 속도 높일 수 있음

  - JS 파일 생성해서 사용할 수도 있음

    - 작성된 JS 파일을 HTML 파일에 삽입해서 사용 가능

    - script 태그의 src 속성에 js 파일 위치 지정

    - head 태그와 body 태그 모두 삽입해서 사용 가능

3.2 HTML 파일 실행

  - HTML 파일 직접 실행

    - HTML 파일 위치한 폴더에서 파일 더블 클릭으로 열기

  - Copy Path 이용

    - 브라우저 URL 입력 창에 복사된 HTML 파일 위치 붙여넣어 실행

  - Live Server 이용 (권장)

    - HTML 파일을 서버를 이용해서 실행

    - Open with live server

3.3 콘솔

  - 브라우저는 개발자가 개발한 웹 프로그램에 대한 디버깅 및 분석 도와주는 개발자 도구 제공

  - 콘솔은 개발자 도구에서 지원하는 기능 중 하나

    - JS로 구현한 코드에서 에러 발생 시 해당 에러 메시지를 콘솔 창에 출력

3.4 주석 처리

  - 코드에 대한 설명

    - 자신이 구현한 코드에 대한 설명 및 사용법 등을 작성하는 용도로 사용

    - 내가 구현한 코드를 누가 봐도 충분히 이해할 수 있도록 코드에 대한 설명을 주석을 통해 작성!

    - 습관화!

  - 프로그램 실행 막기

    - 작성된 코드의 실행을 잠시 막기 위해 사용

    - 에러 발생 원인 추적하면서 작성된 코드 일부 강제로 잠시 막기

  - 주석 처리 방법

    - 일반주석 단축키 사용

      - 한 줄 주석

      - // (Ctrl + /)

    - 묶음주석 단축키 사용

      - 문장 여러 줄 주석

      - /* */ (Shift + Alt + a)

3.5 변수와 상수

  - 변수와 상수

    - 변수: 데이터 담는 그릇, var/let 키워드

    - 변수 선언: 데이터를 사용하겠다고 선언

      - 변수명이 값이 저장되어 있는 메모리 위치를 기억하고 참조 중인 상태

    - 상수: 변화하지 않는 값을 가지고 있는 변수, const 키워드

  - 변수 선언 형식

    - 선언자 변수명 = 할당된 값

    - 변수명은 최대한 의미 있는 이름 사용

  - 네이밍 컨벤션

    - 네이밍 컨벤션: 변수명 갖는 규칙

      - camelCase

        - ex. userName

      - snake_case

        - ex. user_name

      - PascalCase

        - ex. UserName

      - Hungarian Notation

        - ex. strUserName

    - ECMA Script

      - 변수명/함수명 => 카멜 케이스

      - 클래스명/생성자명 => 파스칼 케이스 권장

  - var 선언자

    - ES5, 동일한 변수명 사용해서 에러 발생 X

    - 변수 재선언 가능 => 예기치 못한 에러 발생 가능

  - let 선언자

    - ES6, 변수 재선언 불가

    - var보단 let 사용 권장

  - const 선언자 (상수)

    - ES6, 변화하지 않는 변수 선언할 때 사용

    - 선언 시점에 할당한 값을 절대로 변경하지 않는 용도로 사용

    - 실무 활용

      - ex 1. 애플리케이션 내 각종 날짜 보여주는 화면

        - 날짜 포맷 모든 화면에서 동일한 날짜 포맷 사용 (UX)

        - 날짜 포맷을 const 선언자로 선언

        - const DATE_FORMAT = 'yyyy.MM.dd';

      - ex 2. 기억하기 힘든 값을 변수에 할당해 별칭으로 사용

       - 16진수 색상 표기 값을 상수로 저장하고 사용

       - const COLOR_RED = '#ff0000'; // 빨간색

3.6 데이터 타입

  - 기본 자료형

    - String

      - '' 또는 "" 사용

    - Number

      - 숫자 타입 구분 X

      - 64비트 부동 소수점으로 저장됨

    - Boolean

      - true/false

      - 조건식 연관

    - undefined

      - 데이터 타입이자 데이터 값

      - 변수 선언하고 데이터 할당하지 않으면 JS 엔진이 undefined 암묵적 초기화

    - Null

      - 데이터 타입이자 데이터 값

      - 개발자가 명시해서 사용

      - 메모리 효율적으로 관리하고 싶을 때 사용 가능

        - 메모리의 특정 위치에 대한 참조 제거됨

        - G.C 처리

    - Symbol

      - ES6

  - 객체(Objects)

    - Object

      - 키 - 값 쌍으로 데이터 저장

    - Array(배열)

      - 하나 이상의 다중 데이터 저장 가능

      - 순서 가짐 (인덱스, 0부터 시작)

    - typeof

      - 현재 변수의 데이터 타입 확인 가능

3.7 64 비트 부동소수점

  - JS는 숫자를 64비트 부동 소수점으로 저장하고 컴퓨터는 이진법을 사용하기에,

    부동 소수점 연산 시 원하는 기댓값 나오지 않을 문제점 발생 가능

3.8 연산자

  - 할당 연산자

    - 오른쪽 피연산자의 값을 왼쪽피연산자에 할당

    - = (등호) 기호

    - 복합 할당 연산자

  - 비교 연산자

    - 피연산자들을 비교하고 논리 값 반환

    - 문자열 비교 시에는 유니코드 값을 사용하여 표준 사전 순서 기반으로 비교

    - ==, != 연산자는 값만 비교

    - ===, !== 연산자는 값과 타입까지 모두 비교

    - >, >=, <, <=

  - 산술 연산자

    - 피연산자는 숫자 값

    - 표준 산술 연산자 (+, -, *, /)

    - 그 외 산술 연산자

      - 나머지 연산자 (%)

      - 증가 연산자

      - 감소 연산자

      - 단항 부정 연산자

      - 숫자화 연산자

  - 논리 연산자

    - 논리 AND

      - &&

    - 논리 OR

      - ||

  - 문자열 연산자

    - 두 문자열 합친 새로운 문자열 반환

  - 조건(삼항) 연산자

    - 조건에 따라 2개의 값 중 하나 가짐

3.9 조건문

  - if-else

    - if ... else if ... else 문

    - 조건식을 거짓으로 취급하는 값: false, undefined, null, 0, NaN, ""

  - switch

    - 상수 값(숫자/문자 가능, 비교 구문 X)에 해당하는 case절 실행

  - if문과 switch문의 차이

    - if문; 조건식에 비교 연산 사용 가능

    - switch문; 상수 값 판단하고 해당하는 case 절 바로 찾아갈 수 있음

3.10 반복문

  - for-loop

    - for (코드 블록 실행 전 한 번 실행됨; 코드 블록 실행시킬 조건 정의; 코드 블록 실행 후 실행됨)

  - for-in

    - Object 내에 정의된 키 값의 수만큼 코드 블록 실행

    - 배열의 인덱스

  - for-of

    - 이터러블 객체에서 사용 가능한 반복문

    - 이터러블의 각 요소

  - while

    - 조건식이 true인 동안 코드 블록 실행

    - 특정 조건 만족하는 동안 반복문 실행할 때 사용

3.11 함수(Function)

  - 함수란?

    - 재사용 가능한 구조

    - 특정 기능을 수행하는 일련의 코드 블록을 하나의 실행 단위로 만든 것

  - 함수 정의 및 사용

    - 함수 선언식

    - 함수에 대한 주석 처리

      - /** */

    - 함수 표현식

      - 변수에 함수 할당해서 사용하는 방식

    - Function 생성자 함수

      - Function 함수에 파라미터와 코드 블록을 문자열로 순서대로 전달하여 생성

      - 코드 블록 동적으로 생성할 때 유리

  - 함수를 사용하는 이유

    - 코드 재사용

    - 유지보수의 편의성

    - 가독성 높아짐

    - 코드에 대한 신뢰성 확보

    - 비즈니스 로직(프로그램 로직)을 효율적으로 관리