1장 변수 할당으로 의도를 표현하라 tip3. 블록 유효 범위 변수로 정보를 격리하라 var로 변수를 선언한 경우에는 함수 내부 어디서든 접근이 가능하다. 호이스팅(hoisting) 컴파일 과정을 통해 변수가 선언되기도 전에 접근이 가능하다. 예제코드를 통해 확인해 보자! 클릭하면 0 기대 클릭하면 1 기대 클릭하면 2 기대 line 3부터 클릭 시, 순서대로 0, 1, 2가 아닌 3, 3, 3 alert를 확인할 수 있다. var로 할당한 변수는 함수 유효 범위를 따르기 때문에 함수 내에서 마지막으로 할당한 값을 참조한다. 따라서 i를 선언한 시점이 아닌, 코드를 호출한 시점의 i를 반환하게 되는데, i=2 일 때 반복문을 실행하고 나서, 후위 연산자에 의해 i에 +1이 미리 연산되어 할당된 후 i=3..

1장 변수 할당으로 의도를 표현하라 tip1. const로 변하지 않는 값을 표현하라 const는 블록 문맥 내에서 재할당할 수 없는 변수 선언이지만 불변값이 되는 것은 아니다. 자바스크립트에서는 기본적으로 const를 이용해서 변수를 할당하는 것이 좋다. 이는 확실히 변하지 않는 값임을 알기에 디버깅이 비교적 쉬워지기 때문이다! 예제코드를 통해 확인해보도록 하자! function getTotal() { const taxRate = 0.1; const total = 100 + (100 * taxRate); // 중간 코드 생략 return `금액은 ${total}입니다.`; } taxRate와 total값이 const로 선언되었다. 누가봐도 상수로 선언된 값이기에 중간 코드가 무엇이 있든 간에 total..

정규 표현식의 개념 정규 표현식(regular expression)은 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴 이러한 검색 패턴은 모든 문자열 검색이나 교체 등의 작업에서 사용 가능 정규 표현식 리터럴을 이용한 생성 RegExp 객체를 이용한 생성 /검색패턴/플래그 정규 표현식 리터럴은 슬래시(/) 기호로 시작하여, 슬래시(/) 기호로 끝남 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경 가능 var regStr = /a+bc/; // 정규 표현식 리터럴을 이용한 생성 var regObj = new RegExp("a+bc"); // RegExp 객체를 이용한 생성 regStr; // /a+bc/ regObj; // /a+bc/ 단순한 패턴 검색 정규 표현식을 ..

예외(exception) 프로그램이 실행 중에 발생하는 런타임 오류를 의미 이러한 예외가 발생하지 않도록 미리 예방하는 것도 중요하지만, 발생한 예외를 처리하는 방법 또한 매우 중요 예외 발생 예외를 발생시킨다는 것은 명시적으로 오류를 발생시킨다는 의미뿐만 아니라 예외 상황을 알림 자바스크립트에서는 throw 키워드를 사용하여 예외를 발생 throw 표현식; ※ 표현식에는 예외 코드를 나타내는 숫자나 오류 메시지를 담고 있는 문자열, Error 객체 등 예외 처리(exception handling) 자바스크립트에서는 프로그램이 실행되는 도중 발생하는 예외를 처리하기 위해 try / catch / finally 문을 사용 try { // 예외를 처리하길 원하는 실행 코드; } catch (ex) { // ..

이벤트(event) 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행 가능 따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고도 함. 이벤트 타입(event type) : 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 함 가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공 이 문자열을 클릭해 보세요! function changeText(element) { element.innerHTML = "문자열의 내용이 바뀌었습니다!"; } 이벤트 명세(event specificat..

브라우저 객체 모델(BOM, Browser Object Model)이란? 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어 가능 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델 X 하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공 BOM 모델의 객체들을 전역 객체(global object)로 사용 가능 Window 객체 window 객체는 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됨 window 객체의 메서드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 됨. 문서..

노드(node)HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할HTML Node TreeHTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장노드들의 집합이며, 노드 간의 관계 표시노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 내려감!자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근가능노드의 종류W3C HTML DOM 표준에 따르면, HTML 문서의 모든 것은 노드!문서 노드(document node) : HTML 문서 전체를 나타내는 노드임.요소 노드(element node) : 모..

문서 객체 모델(DOM, Document Object Model) XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현 자바스크립트의 객체 모델을 이용한 기능 새로운 HTML 요소나 속성을 추가 가능 존재하는 HTML 요소나 속성을 제거 가능 HTML 문서의 모든 HTML 요소를 변경 가능 HTML 문서의 모든 HTML 속성을 변경 가능 HTML 문서의 모든 CSS 스타일을 변경 가능 HTML 문서에 새로운 HTML 이벤트를 추가 가능 HTML 문서의 모든 HTML 이벤트에 반응 가능 W3C DOM 표준 Core DOM : 모든 문서 타..