26일차

JavaScript 시작하기

---

1. 개요 및 프로젝트 초기화

ECMA스크립트, ES

Vscode 터미널

$ npm init -y 
package json 생성

$ npm install parcel-bundler -D 
개발용 parcel-bundeler

package json script 부분
"dev": "parcel index.html",
"build": "parcel build index.html"
수정

 npm run dev
 개발서버 

2. 데이터 타입 확인

console.log(typeof 'Hello world!')
console.log(typeof 123)
console.log(typeof true)
console.log(typeof undefined)
console.log(typeof null)
console.log(typeof {})
console.log(typeof [])

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

console.log(getType(123))
console.log(getType(false))
console.log(getType(null))
console.log(getType({}))
console.log(getType([]))

출력
1. string
2. number
3. boolean
4. undefined
5. object
6. object
7. object

함수이용

출력
1. Number
2. Boolean
3. Null
4. Object
5. Array

export default 함수

import 함수 from (export한 js 경로)

3. 연산자

산술 연산자(arithmetic operator)

console.log(1 + 2)       // 3 출력
console.log(5 - 7)       // -2 출력
console.log(3 * 4)       // 12 출력
console.log(10 / 2)      // 5 출력
console.log(7 % 5)      // 2 출력   7을 5로 나누었을때 나머지

할당 연산자(assignment operator)

	
let a = 2
a = a + 1

a += 1  // a = a + 1 과 같다

a -= 1
a *= 1
a /= 1
a %= 1
//활용가능 

비교 연산자(comparison operator)

const a = 1
const b = 3

console.log(a === b)  // === 일치 연산자  false출력

function isEqual(x, y) {
   return x === y
}

console.log(isEqual(1, 1))  // true 출력
console.log(isEqual(2, '2')) // false 출력


console.log(a !== b) // !== 불일치 연산자 true 출력

console.log(a < b) //  true 출력

console.log(a > b) // false 출력

console.log(a >= b) // a가 b보다 크거나같을때 비교 사용 =기호는 >기호보다 뒤쪽에 작성

논리 연산자(logical operator)

const a = 1 === 1
const b = 'AB' === 'AB'
const c = true

console.log(a)       // true
console.log(b)       // true
console.log(c)       // true

console.log(a && b && c) // true  &&: 그리고 And 연산자
console.log(a || b || c) // true  ||:  또는 Or 연산자
console.log(!a)         // false   !: 부정 Not 연산자

&& And 연산자 (하나라도 false가 있으면 false가 되는 논리 연산자, 다 true일때는 true)
|| Or 연산자 (하나라도 true가 있으면 true가 되는 논리 연산자, 다 false일때는 false)
! Not 연산자 (데이터가 true면 false , false면 true 반대되는 값 출력)

삼항 연산자(ternary operator)

const a = 1 < 2

if (a) {
  console.log('참')
} else {
  console.log('거짓')
}
// 참 출력

console.log(a ? '참' : '거짓') // 삼항연산자

? 삼항연산자 true면 앞부분 false면 뒷부분 실행

4. 조건문

If Else

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

import random from './getRandom'
// 조건문 (If statement)

const a = random()

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

Switch

const a = random()

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
  default:
    console.log('rest...')
}

5. 반복문

For

// 반복문 (For statement)
// for (시작조건; 종료조건; 변화조건) {}

for (let i = 0; i < 3; i += 1) {
  console.log(i)  // 0 1 2 출력
}


for (let i = 0; i < 3; i += 1) {
    const li = document.createElement('li')
    li.textContent = `list-${i + 1}`
    if ((i + 1) % 2 === 0 ) {
        li.addEventListener('click', function() {
            console.log(li.textContent)
        })
    }
    ulEl.appendChild(li)
  }
  

6. 변수 유효범위

// 변수 유효범위 (Variable Scope)
// var, let, const

function scope() {
  if (true) {
    console.log(a) // undefined
    const a = 123
    console.log(a)
  }
  console.log(a) // 불가능
}
scope()

let , const 블록레벨에 유효범위를 가진다
var 함수레벨에 유효범위를 가진다

7. 형변환

// 형변환 (Type conversion)

const a = 1
const b = '1'

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

console.log(a == b)    // true  == 동등연산자

// Truthy(참 같은 값)
// true, {}, [], 1, 2, 'false', -12, '3.14' ...

// Falsy(거짓 같은 값)
// false, '', null, undefined, 0, -0, NaN

if (`false`) {
	console.log(123)  // 123 출력
}