🧐 TIL/🤖 JS, TS

🌎 Map - 키와 값의 쌍으로 이루어진 객체이다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size 1. Map 객체 생성 - Map 생성자 함수로 생성한다. const map = new Map(); console.log(map); - 이터러블을 인수로 전달받아 Map 객체를 생성한다. - 이 때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다. const map1 = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]); console.log(map1);// Map(2) ... const map2 = n..

✨ Set - set 객체는 중복되지 않는 유일한 값들의 집합 - 배열과 유사하지만 1) 동일한 값 중복 X 2) 요소 순서에 의미 없음. 3) 인덱스 접근 불가 - 수학적 집합을 구현하기 위한 자료구조 - 교집합, 차집합, 여집합, 등을 구현할 수 있다. 1. Set 생성 - Set 생성자 함수로 생성한다. const set = new Set(); - Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. - 중복된 값은 요소로 저장되지 않는다. - 배열에서 중복된 요소를 제거할 수 있다. const newArr = arr => [new Set(arr)]; console.log(newArr([2, 1, 2, 3, 4, 3, 4]));// [2, 1, 3, 4] 2. 요소 개수 확인 -..

🔮 Symbol - 자바스크립트의 ES6에서 도입된 7번째 데이터 타입 - 변경 불가능한 원시값, 다른 값과 중복되지 않는 유일무이한 값 ✨ 생성 -> Symbol 함수 - 심벌값은 Symbol 함수를 호출하여 생성해야 한다. - 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없고, 다른 값과 절대 중복되지 않는다. const firstSymbol = Symbol(); console.log(typeof firstSymbol);// symbol - 생성자 함수로 객체를 생성하는 것처럼 보이지만, 생성자 함수들과 달리 new 연산자와 함께 호출하지 않는다. new 연산자로 생성된 것들을 호출하면 객체(인스턴스)가 생성되지만, 심벌 값은 변경 불가능한 원시값이다. - 심벌 함수에는 선택적으로 문자열을 인수..

자료형에는 8가지 자료형이 있는데 그 중 7개는 원시형이다. 원시형은 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있기 때문에 '원시형'이라 부른다. 그러나 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 📍객체형 - 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다. - {...} 중괄호를 사용해 만들고, 중괄호 안에는 'key-value' 형태인 프로퍼티를 여러 개 넣을 수 있다. - 중괄호를 이용해 객체를 선언하는 것을 객체 리터럴이라고 부르며 객체 선언 시 주로 이 방법을 사용한다. - key -> 문자형만 허용 / value -> 모든 자료형 허용 - 프로퍼티 키는 프로퍼티의 이름 또는 식별자라고도 한다. 📍 리터럴과 프로퍼티 // 'user' 라는 객체 리터..

✨ 배열 - 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조 let arr = ['apple', 'banana', 'orange']; - 배열 요소에는 0부터 시작하는 숫자가 매겨져 있다.(인덱스) let arr = ['apple', 'banana', 'orange']; // 배열의 첫번째 요소의 인덱스는 무조건 0부터 console.log(arr[0]);// apple console.log(arr[1]);// banana console.log(arr[2]);// orange - 새로운 요소를 배열에 추가하는 것도 가능하다. let arr = ['apple', 'banana', 'orange']; arr[3] = 'lemon'; console.log(arr);// (4) ['apple', 'banana',..

jQuery? - HTML 요소들을 조작하는 자바스크립트를 미리 더 쉽게 작성해둔 것, 라이브러리 // Javascript document.getElementById('hello').innerHTML = '안녕'; // jQuery $('#hello').html('안녕'); 사용법 - jQuery CDN을 HTML head 태그 사이에 import 해줘야 쓸 수 있다. 🙋‍♀️ CDN이란?? - Contents Delivery Networt ⚡️ - 지연을 최소화하면서 사용자에게 콘텐츠를 배포하는 데 도움이 되는 서버 및 해당 데이터 센터의 지리적으로 분산된 네트워크이다. - https://www.cdnetworks.com/ko/what-is-a-cdn/ 🧐 제이쿼리 연습하기 1) 리스트 자료형으로 연습..

8️⃣ 8가지의 자료형 1) 숫자형 - 정수, 부동 소수점 숫자 등의 숫자(정수의 한계는 ±253) 2) BigInt - 길이 제약 없는 정수 나타낼 수 있다. - 끝에 n 붙으면 BigInt형 const bigInt = 1234567890123456789012345678901234567890n; 3) 문자형 // 1. Double Quotes, Single Quotes, 일반 문자형 let doubleQuotes = "Hello world"; let singleQuotes = 'Hello world'; // 2. Backtick, 변수나 표현식을 문자열 중간에 삽입할 때 ${} 기호와 함께 사용 let name = 'soo'; console.log(`Hello ${soo}!`); 4) 불린형 - tru..

📦 변수 - 데이터 저장할때 쓰이는 이름이 붙은 저장소 - 딱 한번만 선언된다. - 선언한 변수 참조 시 변수명만 사용해 참조한다, 선언할 때 쓰인 let, const 등을 빼고 let soo = 'soo'; // 선언 console.log(soo); // 참조 - 함수형 언어는 변수 값 변경 금지한다, 상자 속에 값이 일단 저장되면 그 값을 영원히 유지한다. 🙋‍♀️ 함수형 언어? - 하나의 프로그래밍 패러다임으로 정의되는 일련의 코딩 접근 방식 , 자료처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임 ex) 스칼라 참조 링크: http://jonminfire.dev/함수형-프로그래밍이란 🧐 명명 규칙 1) 변수명에는 오직 문자, 숫자, $, _(언더바)만 들어갈..

'use strict'; - 기본 바닐라 자바스크립트에 쓰인다. - 상식적인 범위 내의 문법에 관한 문제를 잡아준다. - 자바스크립트 엔진이 효율적으로 더 빠르게 자바스크립트를 분석할 수 있다. - 바닐라 자바스크립트 사용해서 짤 땐 코드 맨 위에 적어주기!!