print("Today-I-Learned")

📌 DOM(Document Object Model) APIDOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다.DOM을 변수에 담을 때는 $를 사용하거나 변수 뒤에 El을 붙여주는 등 엘리먼트를 구분시켜주는 것을 추천함(변수네이밍이 충돌 할 일이 없다!)💡 API는 Application Programming Interface. 쉽게 ‘주문서’라고 기억하기!  1. DOM 트리에 접근document 객체를 통해 HTML 문서에 접근 (셀렉터로 엘리먼트를 가져오는 거,,,)// ⭐해당하는 Id를 가진 요소에 접근하기document.getElementById();// 해당하는 모든 요소..

📌 생성자 함수 (constructor function) 객체를 생성하기 위한 함수유사한 객체 여러 개를 쉽게 만들 수 있다.일반함수와 구분하기 위해 'new' 연산자를 사용해 호출하고, 첫 번째 문자를 대문자(파스칼 케이스)로 작성한다.new 연산자- 빈 객체를 생성한다.- 새로 생성된 빈 객체는 생성자의 프로토타입을 상속받는다.- this를 새로 생성된 객체에 바인드 시킨다.- 생성자에 명시적으로 다른 객체를 리턴하지 않는 경우, this로 바인드된 객체가 반환된다. (일반적으로 생성자는 값을 리턴하지 않음)function User(name) { // this = {}; (빈 객체가 암시적으로 만들어짐) // 새로운 프로퍼티를 this에 추가함 this.name = name; this...

📌 thisthis는 객체를 가리키는 참조 변수. 호출되는 위치에 따라 다르게 this를 정의한다.function a(){ console.log(this) }a(); // windowlet myObj = { val1: 100, func1: function () { console.log(this); }}myObj.func1(); // myObj전역 컨텍스트: this는 전역 객체(브라우저에서는 window)를 가리킨다. 함수의 'this'는 호출시점에 따라 달라진다. 일반함수는 호출 위치에 따라 this를 정의하고, 화살표함수는 자신이 선언된 함수 범위에서 this를 정의한다.const hello = { name: '이름ㅇㅇㅇ', normal..

📌 Iterable객체 (Iterable Object)Iterable 객체란 반복 가능한 객체를 의미한다. Iterable 객체에는 'for...of 반복문'을 사용할 수 있다. 1. Iterable 객체의 조건 이터레이션 [symbol.iterator] 함수를 가져야 한다. 오브젝트가 '반복' 할 수 있는 구조여야 한다. (0번부터 순차적으로 와야함) ∴ 배열, 혹은 유사배열은 대부분 이터러블 객체이다. (이외에 문자열,Map,Set 등이 있다) symbol.iterator는 'iterator'라는 객체를 반환하는데 이 iterator객체는 다음과 같은 조건을 만족해야한다.1. next() 라는 메서드를 가진다.2. next() 메서드는 done과 value객체를 반환한다. {done: Boolea..

📌전개 연산자(Spread Operator) 배열이나 객체를 펼쳐서(spread) 구조를 확장할 때 사용. 배열이나 객체를 쉽게 복사하거나, 새로운 배열이나 객체를 생성할 수 있다.(spread syntax, 전개구문 등으로도 부른다.)💡‘퍼지다, 펼치다’ 라는 spread의 뜻 처럼, 배열이나 객체로 포장되어 있는 데이터를가지런히 펼쳐놓는이미지를 생각하자! 1. 배열의 전개쉼표로 구분된 각각의 아이템으로 배열 데이터가 전개되어 만들어진다. 대괄호[ ] 안에서 세 개의 점(...)을 사용하여 배열을 확장순차적으로 흩뿌려준다.const arr = [1,2,3]console.dir(arr)// 결과Array(3)0: 11: 22: 3length: 3[[Prototype]]: Array(0)// => ....

📌조건문조건에 따라 실행되는 코드. 조건식이 참(Truthy)인 값이나 거짓(Falsy)인 값을 반환하는지에 따라 코드를 수행할지 말지 판단한다.조건문에는 break나 return을 반드시 사용해줘야 한다. (조건식을 탈출 할 수 있도록)💡 함수를 만들 때 * 조건에 해당하지 않는 거짓조건을 제일 위에 써준다. (함수 끝까지 돌지 않고 바로 거를 수 있게)* 조건이 여러개 일 때는 if문이나 switch를 주로 사용한다.* 조건을 걸 때는 삼항연산자 위주로 사용한다. (중첩삼항을 쓰는 경우도 있음)  1. If문조건이 참일 때만 실행if (조건식) { // 조건식이 참일 때 실행될 코드}let isShow = true;let checked = false;if (isShow) { cosole.log..

연산자란? 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만드는 것. 피연산자(연산의 대상)는 값으로 평가될 수 있는 표현식이어야 한다. 연산자와 피연산자의 조합으로 이루어진 연산자 표현식 또한 값으로 평가될 수 있는 표현식이다.  📌산술 연산자 (arithmetic operator) 사칙연산( *, - , + )을 다루는 가장 기본적이면서도 많이 사용하는 연산자. console.log(1 + 2)console.log(12 * 7)console.log(7 / 9)console.log(7 % 5) //나머지값 📌할당 연산자 (assignment operator)변수에 값을 대입하는 데 사용하는 연산자.const a = 5let b = 10b += a // 15 (b += a === b =..

함수란? 반복적으로 필요한 코드를 하나의 덩어리로 묶어서 필요할 때마다 꺼내 쓸 수 있도록 한 것.재사용성이 높고,유지보수가 용이하며,구조 파악이 용이하다는 장점을 가진다.  📌 함수 구조 용어이름의미Parameter매개변수함수 안에서 사용하는 데이터를 전달 받는 것 (호출하는 쪽에서)Arguments 인수,인자, 전달인자 매개변수가 받아 줄 특정한 데이터 (전달하는 것)   * 기본 매개변수: 값이 전달되지 않거나 undefined인 경우 명명된 매개변수를 기본값으로 초기화할 수 있다.function add(a =0, b = 0) { // 값을 입력하지 않으면 내가 정해둔 0으로 입력하기 위해. return a + b }; add()    📌 함수 선언함수선언방식호이스팅 여부함수표현 전..

📌 객체타입 (Object Types) 원시타입과 달리 값을 변경할 수 있다.여러개의 데이터를 변수 하나에 저장할 수 있기 때문에 데이터 추가, 제거, 검색, 정렬 등다양한 작업을 수행 가능하도록 메서드를 제공한다.주소값을 비교하며, 메모리힙에 저장된다. 1. 배열데이터(Array)데이터를 순서대로 저장하는 객체빈 배열로 생성하거나 요소가 포함된 배열로 생성할 수 있다.숫자를 이용해 값에 접근할 수 있으며 length라는 프로퍼티(properties: 자산)를 가지고 있다. (문자열처럼)배열안에 다른 배열을 포함할 수 있다. (다차원배열)[ ] 대괄호 안에 넣어준다.const arr = [1, 2, 3];// 배열 안의 원소에 접근하기 위해서는 인덱스 번호를 이용한다. console.log(arr[0]..

변수의 타입은 크게 원시타입, 객체타입으로 나누어지며 다양한 데이터를 용도에 맞게 쓰기 위해서 사용한다.* 타입체크는 typeof라는 함수보다는 Object.prototype.toString.call 함수를 사용하자!  📌 원시타입 (Primitive Types) 실제 데이터 값을 저장하는 타입 가리키고 있는 값의 변경이 불가능하다. (= 불변 immutable)콜스택에 저장된다.let a = 'HELLO';console.log(a[0]); // Ha[1] = 'J';console.log(a[1]); // E. J로 바뀌지 않는다  1. String (문자형 데이터)' ' (작은따옴표) 혹은 " " (큰 따옴표)를 사용해 문자를 나타낸다.순서가 있고(이 순서를 index라고 한다) 0번부터 시작하며 띄..