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

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

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

주요 객체

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

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

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

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

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

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

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

var number = 10
var number = 50
 
console.log(number) // 50

변수를 선언 이전에 참조할 수 있는 현상
변수 선언 이전의 위치에서 접근 시 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

선언 이전이기 때문에 에러가 나야하는데, 에러가 나지 않아서 문제

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!'] 출력
 
// 즉, 참조 타입은 해당 객체를 참조할 수 있는 참조 값을 저장

정수, 실수 구분 없는 하나의 숫자 타입
부동소수점 형식

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

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

let firstName
console.log(firstName)

null

개발자의 의도대로 값이 없음을 의미하는 값
포켓몬 빵 없다고 붙여놓은 편의점
type은 object

let firstName = null
console.log(firstName) // null
 
typeof null // 'object'

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)
 
// 기타 ||, !도 &&와 같다.

조건 표현식의 결과값이 어느 값(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

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

조건문이 참인동안 반복 실행
조건은 소괄호 내에 작성

for (initialization; condition; expression) {
  // do something
}

세미콜론(;)으로 구분되는 세 부분으로 구성

initialization : 최초 반복문 진입 시 1회만 실행
condition : 매 반복 시행 전 평가
expression : 매 반복 시행 이후 평가

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

객체(object)의 속성(key)들을 순회할 때 사용
배열도 순회 가능하지만 인덱스로 추출되어 권장 X

const capitals = {
  korea: 'seoul',
  france: 'paris',
  USA: 'washington D.C.'
}
 
for (let capital in capitals) {
  console.log(capital)    // korea, france, USA
}

반복 가능한(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으로 각 값을 선언

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

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

주요 객체

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

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

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

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

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

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

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

var number = 10
var number = 50
 
console.log(number) // 50

변수를 선언 이전에 참조할 수 있는 현상
변수 선언 이전의 위치에서 접근 시 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

선언 이전이기 때문에 에러가 나야하는데, 에러가 나지 않아서 문제

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!'] 출력
 
// 즉, 참조 타입은 해당 객체를 참조할 수 있는 참조 값을 저장

정수, 실수 구분 없는 하나의 숫자 타입
부동소수점 형식

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

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

let firstName
console.log(firstName)

null

개발자의 의도대로 값이 없음을 의미하는 값
포켓몬 빵 없다고 붙여놓은 편의점
type은 object

let firstName = null
console.log(firstName) // null
 
typeof null // 'object'

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)
 
// 기타 ||, !도 &&와 같다.

조건 표현식의 결과값이 어느 값(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

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

조건문이 참인동안 반복 실행
조건은 소괄호 내에 작성

for (initialization; condition; expression) {
  // do something
}

세미콜론(;)으로 구분되는 세 부분으로 구성

initialization : 최초 반복문 진입 시 1회만 실행
condition : 매 반복 시행 전 평가
expression : 매 반복 시행 이후 평가

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

객체(object)의 속성(key)들을 순회할 때 사용
배열도 순회 가능하지만 인덱스로 추출되어 권장 X

const capitals = {
  korea: 'seoul',
  france: 'paris',
  USA: 'washington D.C.'
}
 
for (let capital in capitals) {
  console.log(capital)    // korea, france, USA
}

반복 가능한(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으로 각 값을 선언

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

관련 포스트

[JS CS] forEach의 지연 처리

[JS CS] Promise, axios, async-await

[JS CS] 동기/비동기와 AJAX

[JS CS] DOM 조작

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

관련 포스트

[JS CS] forEach의 지연 처리

[JS CS] Promise, axios, async-await

[JS CS] 동기/비동기와 AJAX

[JS CS] DOM 조작

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

JavaScript

DOM

BOM

ECMA

Coding Style Guide

변수와 식별자

Case

변수 선언

선언, 할당, 초기화

블록 스코프

var

hoisting

Data Type

원시타입

숫자(Number) 타입

undefined와 null

ToBoolean Conversions (자동 형변환)

참조 타입

연산자

동등 비교 연산자 (==)

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

논리 연산자

switch문

반복문

while

for

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

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

관련 포스트

[JS CS] forEach의 지연 처리

[JS CS] Promise, axios, async-await

[JS CS] 동기/비동기와 AJAX

[JS CS] DOM 조작

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

JavaScript

DOM

BOM

ECMA

Coding Style Guide

변수와 식별자

Case

변수 선언

선언, 할당, 초기화

블록 스코프

var

hoisting

Data Type

원시타입

숫자(Number) 타입

undefined와 null

ToBoolean Conversions (자동 형변환)

참조 타입

연산자

동등 비교 연산자 (==)

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

논리 연산자

switch문

반복문

while

for

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

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

관련 포스트

[JS CS] forEach의 지연 처리

[JS CS] Promise, axios, async-await

[JS CS] 동기/비동기와 AJAX

[JS CS] DOM 조작