프로그래밍언어/Javascript

[Javascript] 01. Javascript

Ssubini 2022. 4. 25. 22:02

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 는 인덱스 순서가 없으니 사용 불가