기록저장소

5.4 배열 배열 키를 사용해 식별가능한 값을 담은 컬렉션은 객체라는 자료구조를 이용해 저장하는데 객체만으로도 다양한 작업이 가능 객체는 순서와 관련된 메서드가 없어서 불편하고 애초에 순서를 고려하지않는 자료구조이므로 '사이에' 끼워넣는 기능이 불가능, 순서가 있는 컬렉션이 필요할 때, 배열을 사용 배열 선언 //빈배열 생성 let arr = new Array(); let arr = []; let fruits = ["사과", "오렌지", "자두"]; 각 배열의 요소에는 0부터 시작하는 숫자(인덱스)가 있고, 이 숫자는 배열 내 순서를 나타냄, 배열 내 특정 요소를 얻을 때는 대괄호 안에 순서를 나타내는 숫자인 인덱스를 넣어서 확인 let fruits = ["사과", "오렌지", "자두"]; alert( ..

5.3 문자열 JS에는 글자 하나만 저장할 수 있는 별도의 자료형이 없음, 텍스트 형식의 데이터 길이에 상관없이 문자열 형태로 저장 JS에서 문자열을 인코딩 방식과 무관하게 항상 UTF-16 형식을 따름 따옴표 작은따옴표, 큰따옴표, 백틱 let single = '작은따옴표'; let double = "큰따옴표"; let backticks = `백틱`; 작은따옴표와 큰따옴표는 기능상 차이 없음, 표현식을 ${..}로 감싸고 백틱(`)으로 감싸고 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 삽입 가능 ( template literal) function sum(a, b) { return a + b; } alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3. 백틱을 사용하면 ..

5.2 숫자형 숫자형 모던 JS에서 숫자를 나타내는 두가지 자료형 1. 일반적인 숫자는 '배정밀도 부동소수점 숫자(double precision floating number)'로 알려진 64비트 형식의 IEEE-754에 저장 2. 임의의 길이를 가진 정수 BigInt, 일반적인 숫자의 범위 2-53 ~ 253 밖의 숫자 숫자를 입력하는 다양한 방법 let billion = 1000000000; //0의 갯수가 많아서 오류가 생길 수 있음 let billion = 1e9; // 10억, 1과 9개의 0 alert( 7.3e9 ); // 73억 (7,300,000,000) 'e' 의 오른쪽에 오는 수만큼 10의 거듭제곱 1e3 = 1 * 1000 1.23e6 = 1.23 * 1000000 1마이크로초(백만 ..

5.1 원시값의 메서드 JS는 원시값(문자열, 숫자 등)을 객체처럼 다룰 수 있게 함 (ex. 메서드 호출) 원시값 vs 객체 원시값 - 원시형 값 - 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 총 7가지 객체 - 프로퍼티에 다양한 종류의 값 저장 가능 - 대괄호{}를 사용해 생성, 함수도 객체의 일종 함수를 프로퍼티로 저장할 수 있다는 객체의 장점 let john = { name: "John", sayHi: function() { alert("친구야 반갑다!"); } }; john.sayHi(); // 친구야 반갑다! //객체 John //메서드 sayHi JS는 날짜, 오류, HTML 요소 등을 다룰 수 있게 하는..

4.8 객체를 원시형으로 변환하기 obj1 + obj2처럼 객체끼리 연산을 하는 경우에 객체->원시값으로 자동형변환 발생 후 연산이 수행됨 1. 객체는 논리 평가 시 true를 반환, 예외x, 따라서 객체는 숫자형이나 문자형으로만 형 변환 발생 2. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 발생 ex) 객체 Date끼리 차감할 때 (date1 - date2) 두 날짜의 시간차이가 반환됨 3. 문자형으로의 형 변환은 대게 alert(obj)같이 객체를 출력할 때 발생 - ToPrimitive 특수 객체 메서드를 사용하여 형변환을 숫자형or문자형 중 원하는대로 조절가능 객체 형 변환은 세 종류로 구분되는데 'hint'(=목표로 하는 자료형)라 불리는 값이 구분 기준 ..

4.7 심볼형 JS는 객체 프로퍼티 키로 숫자형, 불린형은 불가능하고 오직 문자형과 심볼형만 허용 심볼(symbol) 심볼은 유일한 식별자를 만들고 싶을 때 사용, Symbol()을 사용하여 심볼값 생성 // id는 새로운 심볼이 됩니다. let id = Symbol(); 심볼을 만들 때 심볼 이름이라 불리는 설명을 붙일 수 있음, 디버깅시 유용 // 심볼 id에는 "id"라는 설명이 붙습니다. let id = Symbol("id"); 심볼은 유일성이 보장되는 자료형이므로 설명이 동일한 심볼 여러개를 만들어도 각 심볼값은 다름, 심볼에 붙은 설명(심볼 이름)은 어떤 것에도 영향을 주지않는 이름표 역할 let id1 = Symbol("id"); let id2 = Symbol("id"); alert(id1 ..

4.6 옵셔널 체이닝 '?.' 추가된지 얼마되지않은 문법, 구식 브라우저는 폴리필이 필요함 - 옵셔널 체이닝이 필요한 이유 //1. 여러명의 사용자 중 주소 정보를 가지지않은 사용자가 있을 때 error 발생 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined //2. 페이지에 존재하지않는 요소에 접근해 요소의 정보를 가져오려할 때 // querySelector(...) 호출 결과가 null인 경우 에러 발생 let html = document.querySelector('.my-element').innerHTML; //?.가 추가되기 전 해결 방법 ..

4.4 new 연산자와 생성자 함수 복수의 사용자, 메뉴 내 다양한 아이템 객체 표현 등 유사한 객체를 여러개 만들어야 하는 경우 'new' 연산자 - 생성자 함수(constructor function) 1. 함수 이름의 첫 글자는 대문자로 시작 2. 반드시 'new' 연산자를 붙여 실행 function User(name) { this.name = name; this.isAdmin = false; } let user = new User("보라"); alert(user.name); // 보라 alert(user.isAdmin); // false new User()를 사용했을 때 알고리즘 1. 빈 객체를 만들어 this에 할당 2. 함수 본문 실행, this에 새로운 프로퍼티 추가, this 수정 3. th..

4.4 메서드와 this 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성 let user = { name: "John", age: 30 }; - 메서드 만들기 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! //객체 프로퍼티에 할당된 함수 = 메서드(method) //메서드 : user.sayHi(); // 선언된 함수를 메서드로 등록 user.sayHi = sayHi; + 객체 지향 프로그래밍(object-oriented programming, OOP) _ 객체를 사용하여 개체를 표현하는 방식 ..

4.3 가비지 컬렉션 눈에 보이지 않는 곳에서 메모리 관리를 수행하는 JS가 쓸모없어진 메모리를 처리하는 방법 - 가비지 컬렉션 기준 JS는 도달가능성(reachability- 어떻게든 접근하거나 사용할 수 있는 값) 개념을 사용헤 메모리 관리를 수행 1. 태생부터 도달 가능하여 명백한 이유없이 삭제되지 않는 값 ex) 루트(root) - 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수, 전역 변수 등 2. 루트가 참조하는 값, 체이닝으로 루트에서 참조할 수 있는 값은 도달 가능한 값이 됨 ex) 전역 변수에 객체가 저장되어 있을 때, 해당 객체의 프로퍼티가 또 다른 객체를 참조할 경우 프로퍼티가 참조하는 객체는 도달 가능한 값이 됨, 객체가 참조하는 다른 모..