본문 바로가기

전체 글

 (89)
JS #9-자바스크립트 기초 개념9 (클로저) 클래스 설계 구조 : MVC model view control ㄴ 이 부분들을 모두 분리시켜서 클래스를 작성하는 것이 확장성을 늘릴 수 있다. 웹 컴포넌트 는 무엇이냐 ? 컴포넌트 -> 생성자함수 ㄴ 재사용, 복제가 용이하게 하려고 변수의 유효범위와 클로저 ->함수 내부에서 함수 외부에 접근할 수 있다. 함수마다 실행 컨텍스트가 생기게 된다. (외부 -> 실행컨텍스트 / 내부 -> 실행컨텍스트) 함수가 값을 찾는 순서 1. 내 실행 환경 내에서 찾는다. 2. 매개변수에서 찾는다. 3. 바깥 환경에서 찾는다. (outer Environment Reference) ㄴ 내부 함수 bar가 외부 함수 foo에서 찾는 것! ㄴ 함수를 타고, 타고 못찾으면 전역(global) 로 가게 된다! 그런데, 함수가 생성된..
JS #8-자바스크립트 기초 개념8 (가비지컬렉터, this와 메서드, 클래스) 가비지컬렉터 참조 한개일 때 객체의 값을 다른 값으로 덮어주면 참조가 사라지면서 가비지컬렉터가 본래 값을 수집한다. 참조 두개일 때 참조 한개의 값이 덮어써지더라도, 한개는 여전히 가르키고 있으므로 가비지컬렉터는 수집해가지 않는다. 도달할 객체가 없을 때 서로 엮여있는 가족 객체가 있다. John 객체에 연결된 참조를 삭제해보자 John 객체를 가르키고 있던 father과 husband 참조가 삭제되므로써 이제 John에 들어오는 객체는 없다. John에서 나가는 참조는 있지만, 이는 도달 불가능한 상황이므로 가비지 컬렉터에 의해 John이 수집된다. 근원(root) 객체에 null이 온다면 근원 (root) 자체가 null로 덮어써진다면, 그 아래에 가르키고 있던 모든 객체들은 도달할 수 없는 상태가 ..
JS #7-자바스크립트 기초 개념7 (객체) 복습 화살표함수 : 일반 함수를 만들 때 사용한다. 클래스 : 생성자를 만들 때 사용한다. (객체 중심) normal function, concise method => 나를 호출한 대상으로 this를 가르킨다. 하 Arrow function => this를 바인딩하지 않기 때문에 내 상위 환경에서 this를 가져오도록 설계되어있다. 제곱수를 만드는 함수 let pow = (numeric, powerCount) => { let total = 1; for (let i = 0; i 배열의 크기만큼 돌아가니까 제곱의 기능이 제대로 작동된다. 함수와 변수의 연산 변수 x와 함수 a 를 연산하는 경우, 무조건 함수가 먼저 실행된다. 함수는 실행을하면 재귀 함수 안쪽 pow가 계산될 때 함수 실행 환경이 설정되고 바..
JS #6-자바스크립트 기초 개념6 (함수표현식, 화살표함수) 함수 getComputedStyle(node)[prop] : html 태그의 값을 가져오는 것 node 는 요소노드(클래스), prop은 프로퍼티를 가르킨다. ㄴ node에 $0을 입력하면 선택된 엘리먼트의 값을 가져온다. function getStyle(node, prop) { getComputedStyle(node)[prop]; //html의 태그의 값을 가져온다.node가 요소노드 prop이 프로퍼티 } const first = document.querySelector('.first'); const size = getStyle(first, 'fontSize'); console.log(size); querySelector(요소 노드); 해당하는 id나 class의 값을 가져온다. node = docu..
JS #5-자바스크립트 기초 개념5 (반복문, 함수) do-while 문 do 안의 내용을 while문의 조건에 해당할 때까지 출 let i = 0; do { console.log(i); i++; } while(i js에 있는 key라는 을 조회할거야 )! 조상의 메서드를 빌려쓰는 형태! Object의 prototype에 있는!! hasOwnProperty를 불러다가 빌려쓰는 형태이다. call-> js의 key라는값을 조회할게~ 라는 뜻. call(빌려쓰는 주체 , hasOwnProperty의 찐 인수); for (let key in js) { console.log(key); } 부모의 요소때문에 더럽혀진 것을 제외하기 위해서는 for (let key in js) { if(Object.prototype.hasOwnProperty.call(js.key)){..
JS #4-자바스크립트 기초 개념4-논리연산자, 조건문 switch, 반복문 while 논리연산자 OR || 피연산자가 모두 false인 경우를 제외하고는 모두 true 첫 번째 Truthy를 찾는 것 hour가 10보다 작거나 18보다 큰 것에 해당한다면 블록 안의 조건을 수행한다. OR 연산자가 여러개인 경우 가장 왼쪽 피연산자부터 시작하여 오른쪽으로 나아가며 피연산자를 평가한다. 각 연산자를 불린형으로 변환한다. 변환 후 그 값이 true 이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다. 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우) 엔 마지막 피연산자를 반환합니다. AND && 두 피연산자가 모두 참(true)일 때 값을 반환하며, 그 외엔 false를 반환한다. 첫 번째 Falsy를 찾는 것 첫 번째 False를 만나면 반환한다. 두 피연..
JS #3-자바스크립트 기초 개념4-문자형변환, 조건문 형변환 문자형변환 String 함수 사용 String함수를 통해 문자로 변경해준다. 대부분 예측 가능한 방식으로 일어난다. 문자형 변환 - 암시적 형변환 숫자 + 작은따옴표를 통해 암시적 형변환이 가능하다! 숫자형 변환 Number함수 사용 숫자와 관련된 함수와 표현식에서 자동으로 일어난다. 문자열이 숫자형으로 자동 변환된 후 연산이 수행된다. 아래와 같은 방법으로 연산을 수행한 것이다. 문자열을 숫자로 변환? -> NaN가 뜬다. 문자열의 처음과 끝 공백이 제거된다. 공백 제거 후 남아있는 문자열이 없다면 0 Number("자바스크립트") => 이 경우에는 NaN이 나오게 됩니다. 숫자형 변환 - 암시적 형변 문자열로 된 숫자에다가 암시적 형변환을 해준다. undefined 와 Null의 숫자형 변환 ..
JS #3-자바스크립트 기초 개념3 함수의 호이스팅 : 통째로 올라간다. 일반 변수와는 다르게 함수는 통째로 호이스팅된다. 때문에 함수가 선언되기도 전에 호출할 수 있다. 자료형 1차적으로는, 개괄적으로 훑어볼 예정이다. 자바스크립트의 변수는 자료형에 관계 없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간엔 문자열 다른 순간엔 숫자가 될 수 있다. 자료의 타입은 있지만 값의 타입은 언제든지 바꿀 수 있는 언어! "동적 타입" 언어라고 부른다. (정적타입 = 타입스크립트) 자바스크립트엔 8가지 자료형이 있다. 1. 숫자형 정수, 실수도 나눠져있지 않다. 숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN(Not a Number)같은 특수 숫자 값이 포함됩니다. 문자에 연산이 되는 경우는 '+' 연산자의 경우만 가능..

티스토리툴바