Scope: 변수와 함수가 유효한 범위, JS에서는 주로 함수 스코프와 블록 스코프가 사용된다! 함수 스코프함수 내에서 선언된 변수는 함수 내에서만 유효하다function foo() { var x = 'local'; console.log(x); // x}foo();console.log(x); // 유효한 x가 없음! reference errorif(true) { var secret = '12345';}console.log(secret); // 12345 if문은 함수가 아니기 때문에 { } 영향 X 블록 스코프{ } 로 감싸진 블록 내에서만 유효하다! let, const는 블록 스코프를 지원한다.{ let y = 'block scoped'; console.log(y); // block..
개인프로젝트 진행 중 사파리에서 z-index를 설정해둔 요소가 생각대로 보이지 않는 것을 발견했다! css animation을 이용한 물결치는 효과가 타이틀을 가리지 않게 하기위해 z-index를 적용해주었는데, safari는 그대로 가려진다😶🌫️ 시도이 외에도 폰트사이즈, 물결 애니메이션의 위치가 다르게 나타나는 것은 과제 해설 영상에서 소개해주신 reset.css를 적용해 해결했지만 위 현상은 해결되지 않았다.혹시 글자에만 인덱스를 적용한 것이 문젠가 싶어서 wave에도 각각 인덱스를 줘봤지만 해결되지 않았다.검색해보니 safari의 z-index 문제는 꽤 흔하게 일어나는 문제인 것 같다. 원인safari가 다른 브라우저와 렌더링 알고리즘이 달라 발생하는 문제다. 특히 두개 이상의 요소에..
자식 클래스가 생성자를 오버라이딩 하는 경우자식 클래스의 생성자가 호출됐을 때 무조건 부모 클래스의 생성자도 호출된다. 그런데, 자식클래스가 생성자를 오버라이딩 하는 경우가 생긴다.class Car { constructor (name, type, price) { this._name = name; // ...생략 }}class ElectronicCar { constructor (name, price, chargeTime) { super(name, 'e', price); this._chargeTime = chargeTime; } set chargeTime(value) { this._chargeTime = value; }}const elecCar = new Electr..
참조타입(객체)은 속성을 추가/제거하거나 값을 변경하는 등 여러 변경이 일어날 수 있다.만약 어떤 객체가 더이상 변경되지 않도록 막고싶다면 경우에따라 freeze(), seal()을 사용할 수 있다. freeze() - 모든 변경을 막는 경우새로운 속성 추가/제거, 속성의 값 변경을 포함한 모든 변경을 막는다. 설정 가능 여부, 쓰기 가능 여부가 모두 거짓이 된다!또한 변경을 막은 객체를 반환한다. const obj = { prop: 42,};const returnObj = Object.freeze(obj);obj.prop = 33; // 처리X, 에러발생Xconsole.log(obj.prop); // 42console.log(obj === returnObj); // true seal() -..
오늘은 달리기반 수업에서 얕은 복사 깊은 복사를 복습하고 배열 메서드와 객체 메서드를 추가적으로 알아보았다.배열의 요소들이 특정 조건을 만족하는지 확인하기 위하여 배열 메서드인 every()와 some()을 활용할 수 있다! every() - 모든 요소가 조건을 만족하는지 확인하기콜백함수로 참과 거짓을 판단하고 모든 요소가 참일 때 true를 반환한다. 그렇지 않은 경우 false!콜백함수는 순차적으로 요소에 적용되면서 이번 순서의 요소, 이번 요소의 인덱스, every()를 호출한 배열을 매개변수로 받는다. const arr1 = [1, 20, 30];const arr2 = [100, 200, 300];function isBiggerThan10(element, index, array) { retu..