logo
Search검색어를 포함하는 게시물들이 최신순으로 표시됩니다.
    Navigation
    Table of Contents
    [JS CS] DOM, BOM, Data Type, 연산자, 비교문, 반복문

    이미지 보기

    JS CSFE LanguageJSJS CS

    [JS CS] DOM, BOM, Data Type, 연산자, 비교문, 반복문

    • 22.04.25 작성
    • 읽는 데 14분
    메인
    프론트엔드
    JavaScript
    JS CS
    [JS CS] DOM, BOM, Data Type, 연산자, 비교문, 반복문

    TOC

    JavaScript

    • 브라우저를 조작할 수 있는 유일한 언어

    DOM

    • HTML, XML과 같은 문서를 다루기 위한 프로그래밍 인터페이스
    • 문서를 구조화, 구조화된 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델
    • 문서가 객체(object)로 구조화되어 key로 접근 가능
    • HTML을 프로그래밍 언어적 특성을 활용해 조작할 수 있다!

    주요 객체

    • window : DOM을 표현하는 창(브라우저 탭). 최상위 객체(작성 시 생략 가능)
    • document : 페이지 컨텐츠의 Entry Point 역할
    • navigator, location, history, screen

    BOM

    • Browser Object Model
    • 자바스크립트가 브라우저와 소통하기 위한 모델
    • 브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
    • window 객체는 모든 브라우저로부터 지원받으며 브라우저의 창(window) 지칭

    ECMA

    • ECMA(ECMA International)
    • 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구
    • ECMAScript는 ECMA에서 ECMA-262 규격에 따라 정의한 언어
    • ECMAScript6는 ECMA에서 제안하는 6번째 표준 명세
    • 발표연도에 따라 ECMAScript2015라고도 불림

    Coding Style Guide

    • 코딩에서 합의된 원칙과 일관성
    • 정답이 있는 것이 아니라, 원칙을 정하고 일관성 있게 사용하는 것이 중요
    • 코드의 품질에 직결되는 중요한 요소

    변수와 식별자

    • 식별자 : 변수를 구분할 수 있는 변수명
    • 반드시 문자, 달러($) 또는 밑줄(_)로 시작
    • 대소문자 구분, 클래스명 외에는 모두 소문자 시작
    • 예약서 사용 불가능(ex. for, if, function 등)

    Case

    camelCase

    • lower-camel-case
    • 변수, 객체, 함수에 사용

    PascalCase

    • upper-camel-case
    • 클래스, 생성자 사용

    SNAKE_CASE

    • 대문자 스네이크케이스
    • 상수에 사용
    • 개발자의 의도와 상관없이 변경될 가능성이 없는 값

    변수 선언

    let

    • 재할당 예정인 변수 선언 시 사용
    • 변수 재할당 가능
    • 변수 재선언 불가능
    • 블록 스코프
    // 재할당 가능
let number = 10
number = 20

// 재선언 불가능
let number = 10
let number = 50

=> Uncaught SyntaxError

    const

    • 재할당 할 예정이 없는 변수 선언 시 사용
    • 변수 재할당 불가능
    • 변수 재선언 불가능
    • 블록 스코프
    // 재할당 불가능
const number = 10
number = 20
=> Uncaught TypeError

// 재선언 불가능
const number = 10
const number = 50

=> Uncaught SyntaxError

    선언, 할당, 초기화

    let foo               // 선언
console.log(foo)      // undefined

foo = 11              // 할당
console.log(foo)      // 11

let bar = 0           // 선언 + 할당
console.log(bar)      // 0

    선언(Declaration)

    변수를 생성하는 행위 또는 시점


    할당(Assignment)

    선언된 변수에 값을 저장하는 행위 또는 시점


    초기화(Initialization)

    선언된 변수에 처음으로 값을 저장하는 행위 또는 시점


    블록 스코프

    • if, for, 함수 등의 중괄호 내부
    • 블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능
    let x = 1
if (x === 1) {
  let x = 2
  console.log(x)      // 2
}

console.log(x)        // 1

    var

    • ES6 이전에 변수를 선언할 때 사용되던 키워드
    • var로 선언한 변수는 재선언 및 재할당 모두 가능
    • 호이스팅 되는 특성으로 인해 예기치 못한 문제 발생 가능
    • ES6 이후부터는 var 대신 const와 let을 사용하는 것을 권장
    • 함수 스코프
    var number = 10
var number = 50

console.log(number) // 50

    hoisting

    • 변수를 선언 이전에 참조할 수 있는 현상
    • 변수 선언 이전의 위치에서 접근 시 undefined 반환
    console.log(username)    // undefined
var username = '홍길동'

console.log(email)       // [Error] Uncaught ReferenceError
let email = 'gildong@gmail.com'

console.log(age)         // [Error] Uncaught ReferenceError
const age = 50
    • 선언 이전이기 때문에 에러가 나야하는데, 에러가 나지 않아서 문제

    Data Type

    • JS의 모든 값은 특정한 데이터 타입을 가짐
    • 크게 **원시 타입(Primitive type)**과 **참조 타입(Reference type)**으로 분류

    원시 타입

    • 객체(object)가 아닌 기본 타입
    • 변수에 해당 타입의 값이 담김
    • 다른 변수에 복사할 때 실제 값이 복사
    let message = '안녕하세요'  // message 선언 및 할당

let greeting = message      // greeting에 message 복사
console.log(greeting)       // 안녕하세요! 출력

message = 'Hello, world!'   // message 재할당
console.log(greeting)       // 안녕하세요! 출력

// 즉, 원시 타입은 실제 해당 타입의 값을 변수에 저장

    참조 타입

    • 객체(object) 타입의 자료형
    • 변수에 해당 객체의 참조 값이 담김
    • 다른 변수에 복사할 때 참조 값이 복사
    const message = ['안녕하세요']  // message 선언 및 할당

const greeting = message        // greeting에 message 저장
console.log(greeting)           // ['안녕하세요'] 출력

message[0] = 'Hello, world!'    // message 재할당
console.log(greeting)           // ['Hello, world!'] 출력

// 즉, 참조 타입은 해당 객체를 참조할 수 있는 참조 값을 저장

    원시타입

    숫자(Number) 타입

    • 정수, 실수 구분 없는 하나의 숫자 타입
    • 부동소수점 형식
    const a = 13          // 양의 정수
const b = -5          // 음의 정수
const c = 3.14        // 실수
const d = 2.998e8     // 거듭제곱
const e = Infinity    // 양의 무한대
const f = -Infinity   // 음의 무한대
const g = NaN         // 산술 연산 불가

    NaN

    • Not A Number
    • 계산 불가능한 경우 반환되는 값
    • 에러 발생 방지를 위해 숫자가 아님을 의미하는 숫자형 값...
    • ex. 'ABC' / 101 => NaN

    undefined와 null

    undefined

    • 선언 이후 값을 할당하지 않아 값이 없는 경우
    • 값이 없긴 한데, 개발자의 의도가 없다.
    • 포켓몬 빵이 뭔지 모르는 구멍가게
    • type은 undefined
    let firstName
console.log(firstName)

    null

    • 개발자의 의도대로 값이 없음을 의미하는 값
    • 포켓몬 빵 없다고 붙여놓은 편의점
    • type은 object
    let firstName = null
console.log(firstName) // null

typeof null // 'object'

    ToBoolean Conversions (자동 형변환)

    Undefined

    항상 거짓


    Null

    항상 거짓


    Number

    • 거짓 : 0, -0, NaN
    • 참 : 위 외에 나머지

    String

    • 거짓 : 빈 문자열
    • 참 : 비어 있지 않은 문자열

    Object

    • 항상 참
    • 비어있는 경우도 빈 Object라고 정의되어 참으로 간주

    참조 타입

    • 함수(Functions)

    • 배열(Arrays)

    • 객체(Objects)


    연산자

    동등 비교 연산자 (==)

    • 두 피연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환
    • 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
    • 두 피연산자가 모두 객체일 경우, 메모리의 같은 객체를 바라보는지 판별
    • 예상치 못한 결과가 발생할 수 있으므로 사용하지 않음
    const a = 1004
const b = '1004'
console.log(a == b) // true

const c = 1
const d = true
console.log(c == d) // true

// 자동 타입 변환 예시
console.log(a + b) // 10041004
console.log(c + d) // 2

    일치 비교 연산자 (===)

    • 두 피연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환
    • 엄격한 비교가 이뤄지며 암묵적 타입 변환이 발생 X
    • 엄격한 비교 : 타입과 값이 모두 같은지 비교
    • 두 피연산자가 모두 객체일 경우 메모리의 값은 객체를 바라보는지 판별
    const a = 1004
const b = '1004'
console.log(a === b) // false

const c = 1
const d = true
console.log(c === d) // false

    논리 연산자

    • and : &&
    • or : ||
    • not : !

    단축 평가 지원

    console.log(true && false)  // false
console.log(true && true)   // true
console.log(1 && 0)         // 0
console.log(4 && 7)         // 7
console.log('' && 5)        // ''(빈 문자열은 false)

// 기타 ||, !도 &&와 같다.

    switch문

    • 조건 표현식의 결과값이 어느 값(case)에 해당하는지 판별
    const nation = 'Korea'

switch(nation) {
  case 'Korea': {
    console.log('안녕하세요!')
    break
  }
  case 'France': {
    console.log('Bonjour!')
    break
  }
  default: {
    console.log('Hello!')
  }
}
    • break 및 default문은 선택적으로 사용 가능
    • break문이 없는 경우 break문을 만나거나 default문을 실행할 때까지 다음 조건문 실행
    • 이를 Fall-through라고 한다.
    • 블록 스코프 생성

    반복문

    while, for

    for ... in

    • 주로 객체(object)의 속성들을 순회할 때 사용
    • 배열도 순회 가능하지만 인덱스 순으로 순회한다는 보장이 없으므로 권장하지 않음

    for ... of

    • 반복 가능한(iterable) 객체를 순회하며 값을 꺼낼 때 사용
    • ex. Array, Map, Set, String

    while

    let i = 0
while (i < 6) {
  console.log(i)  // 0, 1, 2, 3, 4, 5
  i += 1
}
    • 조건문이 참인동안 반복 실행
    • 조건은 소괄호 내에 작성

    for

    for (initialization; condition; expression) {
  // do something
}
    • 세미콜론(;)으로 구분되는 세 부분으로 구성
    1. initialization : 최초 반복문 진입 시 1회만 실행
    2. condition : 매 반복 시행 전 평가
    3. expression : 매 반복 시행 이후 평가

    for (let i = 0; i < 6; i++) {
  console.log(i)  // 0, 1, 2, 3, 4, 5
}

    for ... in : 객체 순회 적합

    • 객체(object)의 속성(key)들을 순회할 때 사용
    • 배열도 순회 가능하지만 인덱스로 추출되어 권장 X
    const capitals = {
  korea: 'seoul',
  france: 'paris',
  USA: 'washington D.C.'
}

for (let capital in capitals) {
  console.log(capital)    // korea, france, USA
}

    for ... of : 배열 순회 적합

    • 반복 가능한(iterable) 객체인 배열을 순회하며 값을 꺼낼 때 사용
    • 객체(object) 순회에 사용 불가
    const fruits = ['딸기', '바나나', '메론']

for (let fruit of fruits) {
  fruit = fruit + '!'
  console.log(fruit)
}

for (const fruit of fruits) {
  // fruit 재할당 불가
  console.log(fruit)
}
    • 객체 내의 값 각각을 let 또는 const로 정의하여 블럭 내부에서 처리
    • 블럭 내에서 재할당 하는 경우 let으로 각 값을 선언
    profile

    FE Developer 박승훈

    노력하는 자는 즐기는 자를 이길 수 없다

    Github
    Linkedin
    Email