JavaScript (3)

Tony Kim·2022년 1월 28일
0

JavaScript

목록 보기
3/8
post-thumbnail

JavaScript (3)

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

ES(ecmascript) : 유럽 컴퓨터 제조협회 약어, 자바스크립트 국제표준화기구

npm init -y
npm i parcel-bundler -D
"dev", "build"
main.js (index.html 경로생성)

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 {}객체 []배열) 각각 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파일명 붙이기)

3. 산술, 할당 연산자

1) 산술 연산자

console.log (+ - * / %)

2) 할당 연산자

let a = 2
a = a + 1
a += 1 / a -= 1 / a*= 1

4. 비교, 논리 연산자

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)

5. 삼항 연산자

삼항 연산자

const a = 1<2 (true)
if (a) {
  console.log('참')
} else {
  console.log('거짓')
}
console.log( a ? '참' : '거짓')

6. 조건문

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:
}

7. 반복문

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태그 출력될 수 있도록 넣어주기
}

8. 변수 유효범위

var (X) / let / const

function scope() {
  if (true) {
    const a = 123
    console.log(a)
  }
  console.log

let과 const의 경우 블록레벨 유효범위 (권장)
var의 경우 함수레벨 유효범위
(= 의도하지 않은 범위에서 변수 사용되고 메모리 차지하고 메모리 누수로 발전가능)

9. 형변환

동등연산자(==) : 의도하지 않게 다른값이 같다고 나올 수 있음

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 (숫자긴 한데 숫자가 아님)

profile
Back-end-dev

0개의 댓글