ES(ecmascript)
: 유럽 컴퓨터 제조협회 약어, 자바스크립트 국제표준화기구
npm init -y npm i parcel-bundler -D "dev", "build" main.js (index.html 경로생성)
(세미클론의 경우 안붙여도 되지만 붙여야하는 경우도 있음)
console.log(typeof 'Hello world') console.log(typeof 123) console.log(typeof true) console.log(typeof undefined) // 의도하지 않은 빈값 console.log(typeof null) // 의도한 빈값 console.log(typeof {}객체 []배열) 각각 object로 타입 합쳐져서 나옴
자주 활용가능
function getType(data) { return Object.prototype.toString.call(data).slice(8, -1) }
console.log(getType(123)) 결과: [object Number, Boolean] console.log(getType(123)) 결과: Number
getType처럼 공통으로 관리하는 js파일은 외부에
getType.js
export default function getType(data) { return Object.prototype.toString.call(data).slice(8, -1) }
main.js & test.js
import getType from './getType' (js 확장자 생략가능)
export : 내보내기 default: getType 함수가 getType.js 기본적인 형태 내보내지는 기본 데이터 import from : ~에서 가져오기 (./js파일명 붙이기)
1) 산술 연산자
console.log (+ - * / %)
2) 할당 연산자
let a = 2 a = a + 1 a += 1 / a -= 1 / a*= 1
1)일치, 비교 연산자 (===, !==, >, >=)
const a = 1 const b = 1 console.log (a===b) // true 출력
일치 연산자 활용 함수
function isEqual(x, y) { return x === y } console.log(isEqual(1,1))
2) 논리 연산자 (&&, ||, !)
and
console.log(a && b)
or
console.log(a || b)
not
console.log(!a)
삼항 연산자
const a = 1<2 (true) if (a) { console.log('참') } else { console.log('거짓') }
console.log( a ? '참' : '거짓')
1) if, else if
export default function random() { return Math.floor(Math.randome() * 10) // 랜덤 정수 반환 }
import random from './getRandom' const a = random() if (a === 0) { console.log('a is 0) } else if (a === 2) { console.log('rest...') } else { }
2) switch // 분기처리할때는 swicht문이 직관적 (break 주의)
switch(a) { case 0: console.log('a is 0) break case 1: default: }
index.html
script defer src= "./main.js" // defer통해 html구조 이해후 main.js 실행하도록
main.js
const ulEl = document.querySelector('ul') // ul찾기 for (let i = 0; i<10; i += 1) } const li = document.createElement('li') // 메모리상 li만들어져 연결됨 li.textContent = 'list-${i + 1}` if(i % 2 === 0) { li.addEventListener('click', function () { console.log(li.textContent) }) // 홀수 클릭하면 콘솔에 출력 ulEl.appendChild(li) // 자식요소로 메모리상 li태그를 추가 // ul태그에 li태그 출력될 수 있도록 넣어주기 }
var (X) / let / const
function scope() { if (true) { const a = 123 console.log(a) } console.log
let과 const의 경우 블록레벨 유효범위 (권장)
var의 경우 함수레벨 유효범위
(= 의도하지 않은 범위에서 변수 사용되고 메모리 차지하고 메모리 누수로 발전가능)
동등연산자(==)
: 의도하지 않게 다른값이 같다고 나올 수 있음
if ('false') { console.log(123) } // true로 출력
Truthy
: true, {}, [], 1, 2, 'false', -12, '3.14'
Falsy
: false, '', null, undefined, 0, -0, NaN
Falsy값만 알아두면 됨
NaN = 1 + undefined (더해진 값이 숫자로 판단할 수 없는 특정값)
not a number (숫자긴 한데 숫자가 아님)