Orchemi

Orchemi

I start where others stop.

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

작성:    

업데이트:

카테고리:

태그: , ,

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으로 각 값을 선언

댓글남기기

참고