JavaScript Essentials

JS 시작하기

개요 및 프로젝트 초기화

ECMA?

ECMA 스크립트(ES)는 자바스크립트를 표준화하기 위해 만들어졌다.

위키백과 ECMA

프로젝트 시작

이전 시간에 한 npm, parcel-bundler 설치한다.

데이터 타입 확인

JS에서 세미콜론(;)은 특별한 상황 아니면 붙이지 않아도 문제 없다.
하지만 나는 붙일거지

typeof

typeof 를 사용하면 데이터의 type을 확인할 수 있다.
하지만 제대로 보여주지 않을 때가 있어서 직접 함수를 구현하여 사용할 수도 있다.

getType()

function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

연산자

산술 연산자

• 더하기
  console.log(1+2); //3

• 빼기
  console.log(4-5); //-1

• 곱하기
  console.log(3*2); //6

• 나누기
  console.log(6/2); //3

• 나머지
  console.log(7%5); //2

할당 연산자

• 할당 연산자
  const a = 3;
let b = 3;

• 연산 할당
  b += 1 //4
  +, -, /, % 모두 사용 가능하다.

비교 연산자

• 일치 연산자
  a === b
  데이터, 타입 모두 같아야 true 반환

• 불일치 연산자
  a !== b

• 크기 비교 연산자
  > >= < <=

논리 연산자

• AND 연산자
  a && b
  하나라도 false면 false를 반환

• OR 연산자
  a || b
  하나라도 true면 true를 변환

• NOT 연산자
  !a
  반대의 값 반환 (true->false, false->true)

삼항 연산자

a ? '참' : '거짓'

물음표를 기준으로 true이면 앞부분 실행, false면 뒷부분 실행한다.

조건문

if문

실습을 위해 getRandom() 함수를 작성하였다.

export default function random() {
  return Math.floor(Math.random()*10);
}

* floot() : 소수점 이하 버림
* random() : 임의 숫자 반환

import random from './getRandom';

const a = random();
console.log(a);

if(a === 0) {
  console.log('a is 0');
} else if (a === 2) {
  console.log('a is 2');
} else {
  console.log('rest');
}

if, else if, else 를 사용해서 조건이 참이면 실행할 수 있게 한다.

switch문

switch(a) {
  case 0: 
    console.log('a is 0');
    break;
  case 2:
    console.log('a is 2');
    break;
  case 4:
    console.log('a is 4');
    break;
}

• switch()
  괄호 안에는 데이터 하나만 넣어준다.
  블록 내에 case로 해당 값일 때 실행할 코드를 넣어준다.
  코드 실행 후 해당 case가 끝났다는 표시로 break를 명시해준다.

반복문

for문

for (시작조건; 종료조건; 변화조건) { }

조건에 따라 블록 내의 코드가 반복 되어 실행된다.

실습을 위해 index.html에 <ul> 태그를 만들어주었다.

const ulEl = document.querySelector('ul');

for (let i=0; i<3; i+=1) {
  const li = document.createElement('li');
  li.textContent = `list-${i+1}`;
  ulEl.appendChild(li);
}

* querySelector 로 ul 태그를 찾아 ulEl에 할당해주었다.
* createElement로 li 태그를 가지는 요소를 만들어 li에 할당해주었다.
* appendChile()로 ulEl에 만들어준 li를 넣어준다.

변수 유효범위

변수는 자신이 동작할 수 있는 유효 범위를 가지고 있다.
유효 범위를 나가면 동작하지 않는다.

var	let, const
function level scope	block level scope

형 변환

const a = 1;
const b = '1';

console.log(a === b); //false
console.log(a == b); //true

a == b 동등 연산자 == 는 자동으로 형 변환을 해서 연산 한다.

javascript는 참, 거짓 같은 값을 자동으로 true, false인 boolean type으로 형 변환 해준다.

• truthy(참 같은 값)
  true, {}, [], 1, 2, 'false', -12, ...

• falsy(거짓 같은 값)
  false, '', null, undefined, 0, -0, NaN