[TIL][01.24] JS, 배열, function, object, 생성자, Event, 반복문, Collection

JavaScript

let은 var에 비해 좀 더 타이트하게 만들어진 타입 >> 동작을 더 명확하게 제어 가능

 

브라우저 동작 원리 : 웹 서버 위에 정적 파일이 deploy(배포) 되어 있고, 브라우저에서 html파일을 요청 후 응답 받고 html안의 css, js를 다운받아와서 해당하는 css, js 코드에 따라 렌더링

 

const

상수 선언 시 사용

재할당, 재정의 불가능

 

배열

연속된 메모리를 갖는 객체

브라우저 저장소 메모리(window 객체)에 저장됨

자바스크립트는 모든 타입이 64bit(8byte)를 차지함

맨 앞 요소부터 인덱스가 0으로 할당되고, 1씩 증가함

 

Datatypes

String, Number, Bigint, Boolean, Undefined, Null, Symbol, Object

 

• undefined: 자바스크립트가 기본으로 할당하는 값, "아직 정의되지 않음"
• null: 프로그래머가 의도적으로 설정하는 값, "비어 있음", 하지만 let a = null 을 typeof 찍으면 object

function

정의 형식 : function fName() {}

호출 형식 : fName();

function은 정의 후 호출해야 동작

()없이 호출하면 함수 코드가 그대로 할당

()가 있어야 함수가 실행됨

 

object

객체는 key : value 쌍으로 저장됨

배열은 순서기반으로 저장됨

배열 : 순서가 중요할 때

객체 : 구조화된 데이터를 관리

객체는 주소를 저장하므로(=참조 타입) 해당 주소에 저장되어있는 객체 내의 값은 변경가능, 주소는 변경 불가능

let으로 선언된 객체 : 객체 자체 재할당 가능, 객체 내의 속성 값 변경 가능

const로 선언된 객체 : 객체 자체 재할당 불가능, 객체 내의 속성 값은 변경 가능

 

json은 js 객체와 다름 >> 변환 과정 필요

 

Constructor

생성자는 동일한 구조를 가지는 객체를 여러 개 만들기 위해 사용됨
객체를 만들 때 반복되는 코드나 구조를 줄여주기 위해 사용

Event

 

• Event Listener: addEventListener()를 사용하여 이벤트를 등록하는 방식으로, 여러 리스너를 등록하거나 이벤트 전파를 제어할 수 있으며, 이벤트를 제거하는 것도 가능
• Event Handler: 이벤트를 속성으로 직접 지정하는 방식으로, 하나의 핸들러만 등록할 수 있고, 이벤트 전파 제어가 불가능하며, 제거가 제한적

Loop

arr = ["apple", "pineapple"]

for ( i in arr ){ console.log( arr[i] ) } 에서 i는 index를 의미 

for ( i of arr ){ console.log( arr[i] ) } 에서 i는 value를 의미

 

 

do-while : do 안의 코드를 먼저 한 번 실행 후, while 조건이 맞으면 do 안의 코드를 반복

 

Collection

Array : 연속된 메모리를 가지고 항목 표현, 순서O, 중복 허용

Set : 연속되지 않음(주머니 형태), 순서보장X, 중복 불가

Map : key, value 쌍으로 구성, key값을 통해 value 조회 가능, 중복되는 key로 value를 삽입할 경우 덮어써짐

	Array	Set	Map
특징	연속된 메모리, 순차적 접근	고유한 값들의 집합	key-value 쌍으로 구성, 키를 통해 빠르게 조회
순서	O	X	O
중복	O	X	X(key)