[Javascript] 01. Javascript

Intro

• 브라우저(browser)
  • browe + (e)r : 검색하는 것 => 검색기
  • 인터넷 컨텐츠를 검색 및 열람하도록 함
  • URL로 웹(WWW)을 탐색하며 서버와 통신하고, HTML 문서나 파일을 출력하는 GUI 기반의 소프트웨어
• JavaScript의 필요성
  • html : web의 뼈대, css : 디자인, javascript : 움직임을 준 것
  • 브라우저 화면을 동적으로 만들기 위함
  • 브라우저를 조작할 수 있는 **유일한 언어**

Browser

• DOM (Document Object Model) 조작
  • 문서(HTML)를 프로그램으로 조작할 수 있음
• BOM (Browser Object Model) 조작
  • 자바스크립트가 브라우저와 소통하기 위한 모델
  • 버튼, URL입력창, 타이틀 바 등 제어 가능
• JavaScript Core

변수와 식별자

• 변수 => 어떠한 한 가지 값을 가지고 있는 메모리 공간(주소)에 붙인 이름
• [변수선언 키워드] [변수명] = '값'
  • 변수 선언 키워드 : var, let, const
    • let - 재할당 할 예정인 변수 선언 시 사용

    • let number = 10 	// 1. 선언 및 초기값 할당
      number = 10 		// 2. 재할당
      
      console.log(number) // 10

    • const - 재할당 할 예정이 없는 변수 선언시 사용
    • const number = 10 // 1. 선언 및 초기값 할당 number = 10 // 2. 재할당 불가능
    • 둘 다 재 선언은 불가능
    • let number = 10 let number = 20 // 재선언 => 불가능 const number = 10 const number = 20 // 재선언 => 불가능
  • 블록 스코프 (block scope)
    • if, for, 함수 등 중괄호 내부를 가리킴
    • 블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능
  • <참고> 호이스팅(hoisting)
    • 변수를 선언 이전에 참조할 수 있는 현상
    • 변수 선언 이전의 위치에서 접근시 undefined를 반환
    • var 의 문제점.
    • 모든 선언문들이 런타임(실행) 이전에 끌어 올려지는 행위
  • <참고>
    • 선언(Declaration) - 변수를 생성하는 행위 또는 시점
    • 할당(Assignment) - 선언된 변수에 값을 저장하는 행위 또는 시점
    • 초기화(Initialization) - 선언된 변수에 처음으로 값을 저장하는 행위

데이터 타입

• 데이터 타입 종류
  • 원시타입 (Primitive type) - Number, String, Boolean, undefined, null
    • 객체가 아닌 기본 타입
    • 변수에 해당 타입의 값이 담김
    • 다른 변수에 복사할 때 실제 값이 복사됨
  • 참조타입 (Reference type) - Objects - Array, Function, ...
    • 객체(object) 타입의 자료형
    • 변수에 해당 객체의 참조 값이 담김
    • 다른 변수에 복사할 때 참조 값이 복사됨
• 숫자(Number) 타입
  • 정수, 실수 구분 없는 하나의 숫자 타입
  • 부동 소수점 형식을 따름
  • NaN (Not - A - Number) : 계산 불가능한 경우 반환되는 값
  • Infinity, -Infinity 존재
• 문자열(String) 타입
  • 텍스트 데이터를 나타내는 타입
  • 작은 따옴표 또는 큰 따옴표 모두 가능
  • 템플릿 리터럴(Template Literal)
    • backtick(`)으로 (파이썬 f' string' 처럼)

    const a = 'hello'
    `${a} world`

• undefined
  • 변수의 값이 없음을 나타내는 데이터 타입 ( 개발자 의도가 담기지 x )
  • 변수 선언 이후 직접 값을 할당하지 않으면, 자동으로 undefied가 할당됨
  • typeof 연산자 결과 undefied
• null
  • 변수의 값이 없음을 의도적으로 표현할 때 사용하는 데이터 타입 ( 개발자의 의도가 담김 )
  • 개발자가 의도적으로 필요한 경우 할당
  • typeof 연산자 결과 : object
• Boolean 타입
  • 논리적 참 또는 거짓을 나타내는 타입
  • true 또는 false
  •  

데이터 타입	거짓	참
Undefined	항상 거짓	X
Null	항상 거짓	X
Number	0, -0, NaN	나머지 모든 경우
String	빈 문자열	나머지 모든 경우
Object	X	항상 참

연산자

• 할당연산자
• 비교연산자
  • 알파벳끼리 비교 : 아스키코드값 비교하는 것
  • boolean 값 반환
• 동등 비교 연산자(==)
  • 암묵적 타입변환을 통해 타입을 비교 => 왠만하면 사용x
• 일치 비교 연산자(===)
  • 두 피연산자가 같은 값을 같는지 비교
  • 자동형변환 일어나지 않음
  • 주로 사용
• 논리연산자 : &&, ||, !
  • 단축평가 지원
• 삼항연산자
  • 세 개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자
  • 가장 왼쪽의 조건식이 참이면 콜론(:) 앞의 값을 사용하고 그렇지 않으면 콜론(:) 뒤의 값을 사용
  • 삼항연산자의 결과 값이기 때문에 변수에 할당 가능
  • 한 줄에 표기하는 것을 권장
  • console.log(true ? 1 : 2) // 1 console.log(false ? 1 : 2) // 2

조건문

• if statement
• const nation = 'Korea' if (nation === 'Korea') { console.log('안녕하세요!') } else if (nation === 'France') { console.log('Bonjour!') } else { console.log('Hello!') }
• switch statement
• switch(experession) { case 'first value' : { // do something break } case 'second value' : { // do something break } default : { // do something } }

반복문

• while
• for
  • ;로 구분되는 세 부분으로 구성
• for ... in :
  • 객체(object)의 속성(key)을 순회 (object : key- value로 이루어짐 => 딕셔너리의 순회라고 생각하면 편함)
  • 배열 순회도 가능하지만, 인덱스 순으로 순회한다는 보장이 없으므로 권장하지 않음
• for ... of
  • 반복가능한(iterable) 객체를 순회하며 값을 꺼낼 때 사용
  • Array, Map, Set, String 등
  • Objects 는 인덱스 순서가 없으니 사용 불가