[제주코딩베이스캠프] JavaScript 1부

자바스크립트

• 자바스크립트는 버전업이 되어도 이전에 있었던 기능을 삭제하거나 기능을 변경 하지 않는다.
• ES5 부터 엄격모드, 배열메서드가 추가
• ES6 부터 const, let, Promise, Arrow function, class 등의 문법들이 대거 추가
• 자바스크립트의 삽입 위치는 보통 body 태그의 맨 끝이다.

 

자바스크립트의 구조

• 문(statement)은 세미콜론으로 구분한다.
• 문은 값, 연산자, 키워드, 명령어, 표현식 등으로 구성된다.
• 공백은 병합한다.

 

주석

// 한 줄 주석

/*
 여러줄 주석
*/

 

엄격 모드

"use strict";

• use stirict 라는 지시자를 통해 엄격모드를 활성화 했을때만 최신 문법이 반영된다.
• 보통 코드의 최상단에 추가한다.
• class 문법의 경우 엄격 모드가 기본이다.

 

 

변수

• 변수 이름 규칙
  • 변수는 숫자로 시작할 수 없다.
  • 띄어쓰기가 안된다.
  • 예약어를 사용할 수 없다.
  • $, _를 제외한 특수문자를 사용하지 않는다.
  • 대소문자를 구분한다.
  • 관습적으로 class는 첫 문자를 대문자로, 나머지는 소문자로 시작한다.
• var, let, const
  • var : ES5 이전, 함수 레벨 스코프이며 지금은 사용을 권장하지 않는다.
  • let : ES5, 블록 레벨 스코프이며 변경가능한 자료형이다.
  • const : ES5, 블록 레벨 스코프이며 변경이 불가능한 자료형(상수)이다.

 

연산

• 산술 연산자 : +, -, /, *, **, %
• 할당 연산자 : =, +=, -=, /=, *=, **=, %=
• 논리 연산자 : &&, ||, !, !!, &, |
  • 참 → true → 1
  • 거짓 → false → 0
  • &&는 곱 (둘 다 참이면 참)
  • ||는 합 (둘 다 거짓이면 거짓)
  • !는 부정
  • 단락 회로 평가

• 비교 연산자 : >, >=, <, <=, ==, !=, ===, !==
  
  • === 는 타입까지 체크
• 단항 산술 연산자 : ++x, x++, --x, x--
  • ++x 증가 후 출력
  • x++ 일단 출력 후 증가
• nullish 병합 연산자 : ?? 
• typeof 연산자
• 프로퍼티 접근 연산자

let x = {'one': 1, 'two': 2};

// 마침표 프로퍼티 접근 연산자
console.log(x.one);

// 대괄호 프로퍼티 접근 연산자
console.log(x['one']);

• 관계 연산자
  • 키만 가지고 판단

10 in [10, 20, 30] // false
1 in [10, 20, 30] // true
1 in 'hello' // error
'name' in {'name':'hojun', 'age':10} //true
'length' in [10, 20, 30]; // true → consol.dir()로 확인하면 이해하기 쉬움

 

변수의 형

변수의 타입

• 원시타입(primitive types) : number, string, boolean, null, undefined, symbol(ES6 추가, 변경 불가능한 유일한 값)
• 참조타입(reference types) : object(object, array, map, set), function
• Number(숫자)
  • 형태 : 10, 10.123, -10
  • 호출 : 변수명
• String(문자열)
  • 형태 : 'abcde', "abcde", abcde, abcde${변수명}
  • 호출 : 변수명, 변수명[0] (변수명[index], 호출은 할 수 있지만 개별 값 변경 불가

• Boolean(논리값)
  • 형태 : true, false
  • 호출 : 변수명

• undefine : undefind
  • 형태 : let a, console.log(a)
• null : object
  • 형태 : let a = null
• Array(배열) : object
  
  • 형태 
    
    
  • 호출 : 변수명, 변수명[0], 변수명[0][0] (변수명[index], 개별값 변경 가능)

• Object(객체)
  • 형태 : key와 value로 이루어짐
  • 호출 : 변수명, 변수명.지역이름, 변수명['지역이름'] (변수명.key, 변수명[key])
  • 수정, 삭제 : 
    • 수정 : value['hello'] = 'world', value['hello'] = null
    • 삭제 : delete value['hello']는 추천하지 않음(메모리 상에 'world'가 남아있음, value['hello'] = null을 권장)
  • Map : object
    • ie에서 제대로 작동하지 않고 babel을 사용해야한다.
• Set : object
  • ie에서 제대로 작동하지 않고 babel을 사용해야한다.