[[Prototype]] 프로토타입 자바스크립트의 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 갖는다 이 숨김 프로퍼티 값은 null이거나 다른 객체에 참조가되는데 여기서 다른객체를 참조하는 경우 참조 대상을 프로토타입이라고 부른다 프로토타입은 프로퍼티를 읽을때만 사용한다 모든 객체는 자신의 부모역할을 하는 프로토타입객체의 참조 링크를 가지고 있다 링크를 통해 프로토타입으로부터 프로퍼티나 메서드를 상속받을 수 있다 ! 프로토타입 체인 상위 프로토타입과 연쇄적으로 연결된 구조 프로토타입 체이닝 프로퍼티나 메서드에 접근하기 위해 이 연결구조를 따라 차례대로 검색하는 것 제약사항 1. 순환참조(circular reference) 허용 안됨 프로토타입 이용해 닫힌형태로 다른 객체 참조시 에러발생 2...
함수선언문 함수이름(식별자), 매개변수,몸체로 구성 함수 이름이 반드시 정의 호이스팅으로 함수가 선언된 위치에서 코드를 최상단으로 끌어올려짐 function hello (a,b){ return a*b; } 함수표현식 함수의 이름이 선택사항 익명함수 함수를 할당한 변수를 사용하여 호출 const hello = function(a,b) { retuen a*b; } //hello는 함수가 아니라 변수 ! 기명함수 기명함수 표현식에서 사용된 함수이름은 외부에서 접근 불가 외부에서 함수표현식 호출시 반드시 함수를 할당한 변수 사용 할 것 ! const hello = function hi (a,b) { return a*b } console.log(hello(1,2)); //2 console.log(hi(1,2));..
기초부터 완성까지 프런트엔드 훑는중 이해되지않는 것 따로 정리 프로퍼티 getter와 setter 언제 사용하나요? 어떤 프로퍼티에 접근할때 동적인 계산이 필요하거나 프로퍼티 값이 변경될때마다 별도의 처리 코드가 필요하다면? getter,setter 접근자 프로퍼티를 사용해 일반프로퍼티처럼 사용가능 접근자 프로퍼티의 값에 접근하면 getter메서드가 호출 되며 이 메서드의 반환값이 접근표현식의 결괏값 접근자 프로퍼티의 값을 변경하려고 하면 settet 메서드 호출 접근자 프로퍼티란 ? 접근자 프로퍼티 (accessor property)라 불리는 새로운 종류의 프로퍼티 접근자 프로퍼티의 본질은 함수. 이 함수는 값을 획득하고(get)하고 설정(set)하는 역할을 담당 getter와 setter 메서드로 표..
자바스크립트 안에 내장되어있는 오브젝트 비동기적인 것을 수행 할 때 콜백 대신 유용하게 사용 state 상태 pending-> fulfilled or rejected producer producer 프로미스는 클래스 새로운 프로미스가 만들어질 때 전달한 excutor 바로 실행됨 const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('bomi'); },2000); }); resolve 기능을 정상적으로 수행해서 마지막으로 최종데이터를 전달 reject 기능을 수행하다 중간에 문제가 생기면 호출 consumer: then, catch, finally finally 성공과 실패를 떠나 무조건 호출 됨 promise.then..
// Q1. make a string out of an array { const fruits = ["apple", "banana", "orange"]; const result = fruits.join(); } join (메소드) Array.join(separator?: string): string 배열의 모든 요소를 지정된 구분 기호 문자열로 구분하여 문자열에 추가 @param separator — 배열의 한 요소를 결과 문자열의 다음 요소와 구분하는 데 사용되는 문자열 생략하면 배열 요소가 쉼표로 구분 // Q2. make an array out of a string { const fruits = "🍎, 🥝, 🍌, 🍒"; const result = fruits.split(","); } split (메소..
DOMContentLoaded - 브라우저가 HTML을 전부 읽고 DOM트리를 완성하는 즉시 발생 (이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않음) – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 활용 document 객체에서 발생, 이 이벤트를 다루려면 addEventListener 사용 - HTML문서 처리중 태그 만나면 DOM 트리 구성 멈추고 태그 실행 스크립트 실행이 끝난 후 에 나머지 문서 처리 load - HTML로 DOM트리를 만드는게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는것이 끝났을떄 발생 beforeunload/ unload - 사용자가 페이즈를 떠날때 발생 defer, async..
폼 요소 input textarea event 이벤트 설명 특이사항 change 값이 변경될 때 이벤트 발생 텍스트 입력의 경우 포커스를 잃을 때 실행 input 텍스트가 입력될 때마다 이벤트 발생 change와 달리 즉시 실행 cut, copy, paste 잘라내기·복사하기·붙여넣기 할 때 이벤트 발생 브라우저 기본 동작을 막아 이벤트 실행을 막을 수 있음. event.clipboardData 프로퍼티를 사용하면 클립보드에 저장된 데이터를 읽고 쓸 수 있음 submit 이벤트와 메서드 submit 이벤트는 폼을 제출 할 시 발생 주로 폼을 서버로 전송하기 전 내용검증하거나, 폼 전송 취소 할 시 사용
구조분해할당 Destructuring assignment 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수있게 하는 표현식 배열 구조 분해 let users = ['mike', 'tom', 'jane']; let [user1, user2, user3] = users; //같은것 let user1 = user[0]; let user2 = user[1]; let user3 = user[2]; console.log(user1); //'mike' console.log(user2); //'tom' console.log(user3); //'jane' 배열 구조 분해 : 기본값 let [a,b,c,] = [1,2]; //기본값 없을시 undefined let [a=3, b=4, c=5]..