-

객체 메서드에서 thisthisthis는 현재 실행 중인 함수가 속한 객체를 가리키는 특별한 참조 값즉, 함수가 호출될 때 누구에 의해 호출되었는지에 따라 달라지는 값핵심: 함수가 “어디서 호출되었는지”가 중요 객체 메서드에서 this의 동작 원리객체 안에서 메서드를 정의하고 호출할 때, this는 그 메서드를 호출한 객체 자신을 가리킴객체 메서드에서는 보통 메서드를 호출한 대상(점(.) 또는 대괄호([])의 왼쪽 값) 이 this가 된다.예: obj.method() → this는 obj.const obj = { name: "Alice", greet: function() { console.log(this.name); }};obj.greet(); // Alice 호출 비교메서드 호출 규칙: 객체..

객체 속성 관련 메서드Object.keys(obj)객체의 자신의 속성(열거 가능한 속성) 키를 배열로 반환상속받은 속성은 제외됨.속성 순서는 추가된 순서를 따름// [문법]Object.keys(객체)const user = { name: "Alice", age: 25 };console.log(Object.keys(user)); // ["name", "age"]Object.values(obj)객체의 자신의 값(value)만 배열로 반환.// [문법]Object.values(객체)console.log(Object.values(user)); // ["Alice", 25]Object.entries(obj)객체의 [키, 값] 쌍을 2차원 배열로 반환.// [문법]Object.entries(객체)console.log..

원시값(Primitive)과 객체(Object) 비교구붐원시값(Primitive) 객체(Object)정의자바스크립트에서 더 이상 쪼갤 수 없는 기본 데이터 타입원시값이 아닌 모든 데이터 타입종류string, number, boolean, null, undefined, symbol, bigintObject, Array, Function, Date 등메모리 저장 방식스택(Stack) 영역에 직접 값 저장힙(Heap) 영역에 값 저장, 스택에는 힙 주소(참조) 저장변경 가능 여부불변(Immutable) – 값 자체를 변경할 수 없음가변(Mutable) – 객체 내부 속성 변경 가능복사 방식값 자체가 복사됨 (값 복사)참조값이 복사됨 (참조 복사)값 복사(Value Copy) 와 참조 복사 (Reference ..

in 연산자객체 또는 배열에 특정 프로퍼티(키)가 존재하는지 여부를 확인하는 연산자반환값: true 또는 false범위 : 객체 자신 + 부모(상속)값이 undefined라도 존재하면 true.배열의 경우 인덱스 존재 여부 확인 가능// [문법]"키이름" in 객체이름const person = { name: "Alice", age: 25};console.log("name" in person); // trueconsole.log("gender" in person); // false사용 예값이 없어도 in은 "존재"로 판단 → 디폴트 값 처리할 때 유용상속까지 포함 → 객체가 어디서 프로퍼티를 받았는지 신경 써야 할 때 주의배열 인덱스 체크 → sparse array(빠진 요소) 처리 가능in연산자 특징..

객체 삭제객체 프로퍼티 삭제방법1. delete 연산자가장 기본적인 방법객체에서 해당 프로퍼티 자체를 완전히 제거키 자체가 사라짐성능상 아주 큰 객체를 반복 삭제할 때는 조금 느릴 수 있음// [문법]delete 객체명.키명;delete 객체명["키명"];const user = { name: "철수", age: 20, city: "서울" };delete user.age; // 점 표기법delete user["city"]; // 대괄호 표기법console.log(user);// { name: "철수" }2. null 또는 undefined 할당프로퍼티를 아예 제거하는 대신, 값만 없애는 방식키(name, age)는 여전히 존재데이터만 비워야 할 때 사용프로퍼티는 유지, 값만 비움/..

객체 수정객체 프로퍼티: 객체의 속성을 의미, 키(key)와 값(value)의 쌍으로 구성이미 존재하는 프로퍼티는 새 값으로 덮어쓰기 하면 됨수정도 점/대괄호 표기법 둘 다 가능.없는 프로퍼티를 수정하려고 하면 자동으로 추가객체 수정 방법1. 점 표기법(dot notation)가장 직관적이고 자주 쓰이는 방법키 이름이 문자열 규칙에 맞는 경우에 사용 가능(공백, 숫자로 시작, 특수문자 X)// [문법]객체이름.키명 = 새로운값; const user = { name: "철수", age: 20 };user.name = "영희"; // name 프로퍼티 값 수정user.age = 21; // age 프로퍼티 값 수정console.log(user);// { name: "영희", age: 21 }..

객체 접근 객체 접근 방법1. 점 표기법(dot notation) 가장 흔히 사용하는 접근 방법키 이름이 유효한 식별자(identifier)이어야 가능사용 가능 : 문자(A-Z, a-z), _, $로 시작 가능 (ex) name, age, _id, $value ...)사용 불가 : 공백, 숫자로 시작, 특수문자 (ex) "full name", "123abc", "user-name"..)식별자로 사용할 수 없는 키를 사용할 때는 무조건 대괄호 [] 사용해야 객체 접근 가능장점: 코드 읽기 쉬움단점: 변수로 동적 접근 불가// [문법 - 값 접근]객체명.키명// [문법 - 메서드 호출]객체명.키명()console.log(person.name); // "Alice"person.greet(); ..

객체객체는 키(key)와 값(value)의 쌍으로 구성된 속성을 가진 데이터 타입키(key): 보통 문자열(String) 또는 심볼(Symbol)값(value): 숫자, 문자열, 불리언, 함수, 배열, 다른 객체 등 모든 자료형이 가능속성(property) : 키(key) + 값(value)의 쌍을 의미데이터를 {}로 감싸 객체를 정의데이터 타입의 제한이 없음키를 사용하여 데이터를 불러오거나 값을 변경할 수 있음const로 선언할 경우 객체 자체를 변경할 수는 없으나, 객체 안의 프로퍼티나 메서드는 변경이 가능객체의 키와 속성 값이 같을 경우 하나로 입력가능특징특징설명동적(Dynamic)객체는 생성 후에도 속성을 자유롭게 추가, 수정, 삭제할 수 있음참조 타입(Reference Type)객체는 메모리에 ..

ease애니메이션에서 속도의 변화를 조절하는 속성단순히 시작과 끝을 선형으로 움직이는 것보다는, 더 자연스럽거나 역동적인 움직임을 만들기 위해 사용선형(linear): 일정한 속도로 움직임이징(ease): 속도를 변화시켜 가속, 감속, 탄력 등을 표현// [문법]gsap.to(target, { ease: "속성" }); 주요 ease 종류Linear / None속도가 일정하게 유지되는 기본 형태특징: 가속이나 감속 없음, 꾸준히 움직임gsap.to(".box", { x: 300, duration: 2, ease: "linear" });power 계열가장 많이 사용되는 기본 ease.숫자가 클수록 가속/감속이 더 강함.종류설명특징power1약간의 가속/감속부드럽게 시작하거나 끝날 때power2중간 정도흔히..

GSAP 기본 구문 애니메이션에 대한 정보를 포함하는 메서드, 타겟, 그리고 vars 객체를 가지고 있음대상GSAP에 무엇을 애니메이션으로 만들고 대상document.querySelectorAll(), HTML 또는 SVG 대상의 경우 다음과 같은 선택자 사용 가능".class" 그리고. "#id". 또는 변수나 배열을 전달할 수도 있음// use a class or IDgsap.to(".box", { x: 200 });// a complex CSS selectorgsap.to("section > .box", { x: 200 });// a variablelet box = document.querySelector(".box");gsap.to(box, { x: 200 })// or even an Array..