프로퍼티 어트리뷰트 자바스크립트 엔진은 프로퍼티를 생성 할 떄 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동정의한다 프로퍼티 상태란? 프로퍼티 값, 값의 갱신가능 여부, 열거가능 여부, 재정의 가능여부 프로퍼티 어트리뷰트는 자바스크립트엔진이 관라하는 내부슬롯 [[value]] [[writable]] [[eunmerable]] [[configurable]] 데이터 프로퍼티 키와 값으로 구성된 일반적인 프로터치 value writable: 프러퍼티값의 변경여부 나타냄,볼리언값으로, writable값이 false일경우 해당프로퍼티의 [[value]] 값변경 불가 읽기전용 enumeable: 열거가능여부 불리언값으로 false일경우 for,,if문이나 object.key메서드등을 열거불..
스코프 = 유효범위 = 자바스크립트엔진이 식별자를 검색할때 사용하는 규칙 = 네임스페이스 모든 식별자(함수이름, 변수이름, 클래스이름등)는 자신이 선언된 위치에 의해 다른코드가 식별자 자신을 참조 할 수 있는 유효범위가 결정된다 전역: 코드의 가장 바깥영역/ 전역스코프/ 전역변수 *어디서든지 참조가능 지역: 함수몸체내부/ 지역스코프/ 지역변수 *자신의 지역스코프와 하위 지역스코프에서 유효 변수를 참조할떄 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프방향으로 이동하며 선언된 변수를 검색한다 이를 스코프체인이라 한다 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조 가능 하위스코프에서 유효한 변수는 상위 스코프에서 참조불가 코드불록이 ..
[[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..