자바스크립트 완벽 가이드

우리는 스크립트를 HTML에서 body태그 안쪽 하단에 script태그로 임포트를 한다. 그러나 이렇게 하면 최적의 상태는 아니다.크롬의 개발자 독 - 퍼포먼스 탭 => 페이지를 로드할 때 브라우저의 동작을 자세히 알 수 있음, 스크립트가 어떻게 로드-분석-실행 되는

VSCode의 에러 메시지에 주목크롬 개발자 도구의 에러 메시지에 주목console.log() 이용크롬 개발자 도구의 중단점 이용 크롬 개발자 도구 - source 탭 - 우측 페이지에서 원하는 스크립트 파일 선택 - 라인넘버를 클릭해 중단점 설정중단점 설정 시 위

제어구조 - Control Structureif(condition)조건식에는 보통 동적인 boolean 값이 들어간다.동적인 boolean 값은 boolean operators 에 의해 실현된다.== 일치 연산자!= 불일치 연산자=== 삼중 등호 연산자 !=== 삼중

함수를 이용해 다음과 같이 반복적인 코드를 줄일 수 있다. attackHandler와 stringAttackHandler 의 차이점은 함수에 이용되는 문자열 하나뿐이기 때문에, 해당 문자열을 인자로 받는 또 다른 함수를 매개변수로 하는 코드를 저장하고, attackHa

!은 기존의 bool값을 반대로 바꾸는 거라면, !!는 반대의 반대, 즉 원래로 돌아오는 값이다. 정말 쓸데 없다고 생각하겠지만, !!를 이용하면 truthy를 true로, falsy를 false로 바꿔주는 유용한 친구이다.truthy와 falsy가 모른다면 이쪽으로

자바스크립트의 for-of 와 for-in은 배열과 객체를 다룰 때 사용된다. for-of는 배열을 순회하며, for-in은 객체를 순회한다.이렇게 하면 배열 안에 담긴 값을 배열의 순회하며 꺼낼 수 있다. 여기서 왜 let이 아니라 const로 선언한거지? 라는 궁금

자바스크립트의 '약형'언어로서의 성질이 보여주는 관대함은 때론 불편을 야기하기도 한다. 예를 들어 사용자로부터 숫자만을 입력받고 싶음에도 사용자가 숫자가 아닌 문자열을 입력해도 자바스크립트는 에러를 발생시키지 않는다. 이러한 경우 개발자는 throw 와 try - ca

CSS Toggle css classList의 toggle 기능을 활용하면 쉽게 모달을 켜고 끌 수 있다. toggle은 해당 CSS 클래스가 존재하면 CSS 클래스를 삭제하고, 존재하지 않으면 추가하는 방식이다. 따라서 만약 display : block 등의 내용을

브라우저는 HTML 파일을 분석하여, 다른 여러 언어(자바스크립트에 제한되어있지 않음)를 통해 HTML 요소에 접근할 수 있도록 Document Object Model을 만든다. 이것을 줄임말이 DOM이다. 따라서 자바스크립트에서 DOM에 접근하여 HTML 요소를 이용

자바스크립트에서 함수는 코드를 줄이기 위한 효과적인 수단이다.매개변수는 함수 내에서 정의하는 인자를 받아오는 변수이며, 인자는 함수를 호출 할 때 전달하는 데이터이다.함수는 독립적으로 정의하는 것이 처음 자바스크립트를 배울 때 국룰이지만, 함수를 객체 내에서도 정의할

자바스크립트 엔진에는 가지비 컬렉션을 수행하는 가비지 컬렉터가 존재한다.가비지 컬렉션이란, 쓰레기를 수집하는 것이다. 그게 무슨 뜻이냐, 더 이상 참조되지 않는 객체를 자바스크립트 엔진 내의 메모리 저장소인 '힙'에서 제거하는 것이다. 이 작업이 필요한 이유는 우리 컴

만약 당신이 스크립트 파일을 브라우저에서 실행하면, 브라우저에 내장되어있는 자바스크립트 엔진이(chrome의 경우 v8이라는 자체 자바스크립트 엔진을 사용한다) 스크립트 파일을 분석하고 실행한다. 엔진은 크게 두 부분으로 나눌 수 있는데, 인터프리터와 컴파일러이다. 인

ES는 브라우저에서 동작하는 스크립트 언어들의 표준을 정하는 ECMAscript의 줄임말이고, ES6는 ES 중 가장 최신 버전을 의미한다. 자바스크립트 또한 ES의 표준을 참고하여 만들어지며, 브라우저 업체들은 ES에 따라서 브라우저를 만들게 된다.ES6가 2015년

객체기본객체는 키 - value 쌍으로 데이터를 저장한다. value에 함수가 들어가면 그 함수를 메소드라고 부른다배열에 기존에 존재하지 않은 키 값을 추가하고자 할 때, 생성 후 접근하는 것이 아니라 바로 접근하면 된다. 자바스크립트에서는 존재하지 않는 키 값에 접근

자바스크립트에서 클래스는 다른 객체지향언어(자바)와 비슷하게 객체를 만드는 틀로 인식할 수 있다. 생성자 함수에 인자를 전달함으로써 서로 다른 객체를 만든는 컨셉은 자바스크립에서도 유효하다. 클래스는 객체를 만드는 기계이다.클래스 내에서 정의한 변수를 필드라 한다. 그