JS 기본

1. 개요

• ECMAScript(ES, 에크마스크립트) : 표준화된 JS, 2015년 버전6에서 크게 변화
  ⭐ Java와 JavaScript는 전혀 다른 개념 -> 혼동하지 않기
• (복습) 폴더 생성 후 $ npm init -y 먼저 -> $ npm install parcel-bundler -D -> package.json의 script 부분에 “dev” : ”parcel index.html” “build” : ”parcel build index.html” -> index.html 만들고 !+enter 눌러 시작 -> $ npm run dev로 확인

2. Data Type

⭐ 세미콜론(;)없이 한 줄에 한 명령만 입력하는 습관 들이기

• console.log(typeof a) 처럼 간단하게 typeof만 붙여 데이터 타입 확인 가능
  -> 이때 null, object, array가 전부 object로 출력
  -> object.prototype.toString.call(data).slice(8, -1) 사용해 확인 가능
• 공통으로 사용될 함수는 따로 파일 생성해 export default function로 정의하고 import 이름 from '경로' 로 불러오기 (.js 생략가능)

3. 연산자

• 산술 연산자 (arithmetic operator) + - * / %
• 할당 연산자 (assignment operator) = += -= *= /= %=
  ⭐ const 재할당 불가능 / let 재할당 가능
• 비교 연산자 (comparison operator) < <= > >= === !== -> 전부 true 또는 false 반환
  🌟 일치연산자 === vs. 동등연산자 == -> 동등연산자는 자동 형 변환 통해 값만 비교해줌
• 논리 연산자 (logical operator) &&(and) ||(or) !(not)
• 삼항 연산자 (ternary operator) 조건 ? 참 : 거짓

+) Truthy(참 같은 값) : true, {}, [], 1, 2, 'false', -2, '3.14'
Falsy(거짓 같은 값) : false, "", null, undefined, 0, -0, NaN
-> 0이나 빈 값만 false, 나머지 다 true (문자열도 전부 true!)
(NaN : Not a Number, 1+undefined 등)

4. 조건문

• if - else if - else 순서로 사용
• switch문의 각 case 내에 break 꼭 붙여주기 / default 명시하기

5. 반복문

• for(시작조건; 종료조건; 변화조건)
• 시작조건은 let i=0 형태로

6. 변수 유효범위 (Variable Scope)

• var 함수 레벨 유효범위 -> 의도치 않은 범위까지 메모리 누수 가능성 있으므로 거의 사용X
• let const 블록 레벨 유효범위

+) 이외에 배운 내용 정리

• Math.random() 0~1 난수 생성
• Math.floor(a) a 소수점 버리기(내림)
• const el = document.querySelector(‘태그이름’) index.html에서 해당 태그 가져와 저장
• const el2 = document.createElement(‘태그이름’) 새로운 태그 생성해 저장
• el2.textContent로 내용 접근 가능
• ${보간법} 사용시 백틱으로 묶기 조심!
• el.appendChild(el2) el에 el2 추가