요모조모

🍰 오늘도... 어려웠다... 한 열 번은 반복해서 보면 이해될 것 같은 느낌? 그래서 일단은 키워드만 적어놓고 이해한 후 다시 내용 추가하러 올 지도...🍴 this: this 값은 런타임에 결정됨. 컨텍스트에 따라 달라짐.🍴 프로토타입자바스크립트는 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어.객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있게 하는 메커니즘자바스크립트 객체는 [[Prototype]]이라는 숨김 프로퍼티를 가짐이 프로퍼티 값은 null이거나 다른 객체에 대한 참조가 됨다른 객체를 참조하는 경우 => 참조 대상을 프로토타입(prototype)이라고 부름🍴 생성자 함수모든 프로토타입은 constructor 프로퍼티를 가짐.이 construc..

🍰 목감기 3일 째, 수업 도중 뜨거운 물을 계속 들이켰다. 🍴 객체: key: value 쌍으로 구성된 엔티티(entity) 데이터 구조const authUser = { uid: 'user-09077', name: 'lee', email: 'lee@naver.com', isSignIn: false, permission: 'paid', // paid | free};// 점 표기법으로 객체의 프로퍼티 출력console.log(authUser.uid);// 대괄호 표기법으로 출력console.log(authUser['uid']);🍴 프로퍼티 제거(remove) / 삭제(delete): 제거 - 비워둠, 삭제 - 메모리까지 날림🍴 구조 분해 할당(destructuring assignments)..

🍴 rest parameter: 함수 매개변수 목록에서 남은 인수들을 배열로 모으는 방법. 함수가 가변 인수를 받아 처리할 수 있게 해줌.function sum(...numbers) { return numbers.reduce((acc, current) => acc + current, 0);}console.log(sum(1, 2, 3)); // 6console.log(sum(1, 2, 3, 4, 5)); // 15🍴 함수의 두 가지 기능1. 일반 함수함수 이름 직접 호출하여 실행this 바인딩: 호출 맥락에 따라 다르게 바인딩. 기본적으로 전역 객체 참조, 객체의 메서드로 호출 시 해당 객체 참조.명시적으로 return 문 사용하지 않을 시 undefined 반환2. 생성자 함수객체 인스턴스를 생성하..

🍰 오늘 진짜 최악... 한 달에 한 번 오는 그 통증이 진짜 레전드급으로 와서 수업에 집중을 못 했다. 중요하지 않은 개념이 없는데... 😢🍴 getComputedStyle: 요소의 계산된 스타일 속성 가져옴. 계산된 스타일 - 모든 스타일시트, 스타일 요소, 인라인 스타일 적용 후 최종적으로 브라우저가 화면에 렌더링하기 위해 사용하는 CSS 속성 값.let style = window.getComputedStyle(element[, pseudoElement]);element: 스타일을 가져오려는 요소. pseudoElement(선택): 매칭할 가상 요소 지정하는 문자열. 생략 시 요소 자체의 스타일 반환.반환 값: CSSStyleDeclaration 인터페이스의 객체 반환. 지정된 요소의 모든 C..

🍰 공부할 게 너무너무너무너무너무너무너무너무너무 많아서 블로그는 키워드 중심으로만 작성 중...🍴 in 연산자: 객체 내에 특정 프로퍼티 존재 여부 확인확인 대상 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인하므로 주의 필요🍴 Object.prototype.hasOwnProperty 메서드: 인수로 전달 받은 프로퍼티 키가 객체 고유의 프로퍼티 키인 경우에만 true 반환console.log(person.hasOwnProperty('toString')); // false🍴 Function.prototype.call(): call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출함이미 할당되어있는 다른 객체의 함수/메소드를 호출한는 해당 객체에 재할당 할 때 사용다른 메서..

🍰 자바스크립트 진도와 간단한 테스트 진행!🍴 switch 문: 복수의 if 조건문 => switch로 바꿀 수 있음. case는 일치 연산자 같이 타입까지 동일해야 함.switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break]}🍴 nullish 병합 연산자 '??': null이나 undefined인 지 아닌 지 확인함🍴 while 문: 조건이 true인 동안 본문이 실행됨. 무한 루프에 빠지는 것 주의!while (condition) { // 코드}🍴 do-while 문: 조..

🍰 타입 변환: 값의 타입을 변환하는 것.개발자가 의도적으로 타입 변환 - 명시적 타입 변환(explicit coercion)자바스크립트 엔진이 표현식 평가 시 코드 문맥을 고려해 암묵적으로 타입 강제 변환 - 암묵적 타입 변환(implicit coercion)// 명시적 변환let str = "123";console.log(Number(str)); // 123(숫자)console.log(typeof str); // string// 암시적 변환let x = 10;let value = x + "문자열";console.log(value); // 10문자열console.log(typeof value); // string두 방식 모두 기존 원시 값을 직접 변경하는 것은 아님원시 값은 변경 불가능한 값(immu..

🍴 비교 연산자불린형 반환: true 반환-참, false 반환-거짓반환된 불린값은 변수에 할당 가능falsy 값 - 0, 빈 문자열"", null, undefined, NaN이 외의 값은 불린형으로 변환 시 true가 되므로 truthy 값문자열 비교: 사전 편집(lexicographical) 순으로 문자열 비교대소문자 따짐정확하게는 사전 순이 아니라 유니코드 순임 ex) a > A다른 형을 가진 값 간의 비교: 비교하려는 값의 자료형이 다를 때 숫자형으로 바꿈console.log('2' > 1); // trueconsole.log('01' == 1); // true/* 이상한 상황 */let a = 0;console.log( Boolean(a) ); // falselet b = "0";console..

🍰 오늘도 자바스크립트 진도를 잔뜩.🍴 자료형: 총 여덟 가지 자료형. 동적 타입(dynamicallyt typed) - 자료의 타입은 있지만 변수에 저장되는 값은 언제든지 바꿀 수 있음.1️⃣ 숫자형(Number): 정수 및 부동 소수점 숫자 나타냄 2**53 -1(9007199254740991)까지 안전하게 사용 가능 관련된 연산: +, -, *, /특수 숫자 값(special numeric value) : Infinity, -Infinity, NaN2️⃣ BigInt: 일반 숫자 뒤에 n 붙이기3️⃣ 문자형(String): string을 따옴표로 묶음" "' '` `(백틱) => 변수가 들어올 여지 있을 때 사용let nickName = '뫄뫄';let age = 20;`안녕 나는 ${nickN..

🍰 자바스크립트 이틀 차 진도!🍴 변수: 데이터 저장할 때 쓰는 '이름이 붙은 저장소'선언과 할당 구분나눠서 쓰는 일은 잘 없음var, let, const🍴 const: 변수를 상수로 선언, 변수에 할당된 값이 변경될 수 없음🍴 명명 규칙변수 명에는 문자, 숫자, $, _만 가능첫 글자는 숫자 사용 불가카멜 표기법을 흔히 사용🍴 엄격 모드ES5에 추가됨코드 실행을 엄격하게 제한해서 잠재적인 오류 발생시키기 어려운 개발 환경 만들기 위해ES6에 도입된 클래스와 모듈은 기본적으로 strict mode 적용됨"use strict";를 코드 맨 위 혹은 함수 맨 위에 추가하여 활성화🍴 전역 객체: 가장 최상위의 객체. 어디서나 사용 가능한 변수/함수 만들 수 있음자바스크립트가 실행되는 환경에 따라 다..