252_자바스크립트 함수 내부 변수와 상수의 범위알기 [적용] 처리를 단위로 분할하고 싶을 때 변수, 상수의 유효 범위를 좁히고 싶을 때 [문법] 구문 의미 {} 블록 스코프 [내용] let과 const로 선언된 변수와 상수는 {}로 감싸진 범위의 블록 내에서만 사용할 수 있다. 변수와 상수가 유효한 범위를 스코프(Scope)라고 하며, {}로 감싸진 유효 범위를 블록 스코프(Block Scope)라고 한다. 다음의 상수 a는 블록 스코프 내에서 사용되고 있으므로 모든 console.log()에 20이라는 결과가 출력된다. 블록 외부에서 선언한 변수와 상수도 내부에서 사용할 수 있다. JavaScript { const a = 20; // 20 출력 console.log(a); { // 20 출력 cons..

251_자바스크립트에서 에러 종류 파악하기 [적용] 에러 발생시 에러의 종류를 확인하고 싶을 때 [문법] 종류 의미 RangeError 값이 허용범위 내에 없음 ReferenceError 선언되지 않은 변수를 호출 SyntaxError 언어 구문 오류 TypeError 데이터 타입 오류 URIError URI 오류 [내용] Error 객체는 몇 가지 종류가 있다. 자바스크립트에서 이러한 에러의 파익이 가능하면 그 종류에 따른 수정 작업이 용이하다. 예를 들어 SyntaxError는 구문 에러이므로 코드 기술방식의 문제를 확인하여 해결하며, TypeError는 null 객체 엑세스 등의 문제이므로 데이터 타입의 문제를 찾아 해결한다. JavaScript main.js try { let obj null; /..

250_자바스크립트에서 에러 발생시 실행코드 설정하기 [적용] 에러가 발생해도 실행을 중단하고 싶지 않을 때 에러 발생시 특정 처리를 실행하고 싶을 때 [문법] 종류 의미 try {} catch (error) finally {} 에러 처리 [내용] finally {}는 try {}의 에러 발생 여부와 상관없이 실행된다.그러므로 에러 여부에 상관없이 실행하고 싶은 코드가 있다면 finally {}에 배치한다.다음은 50% 확률로 에러가 발생하지만, 에러에 상관없이 finally {}가 실행되는 것을 확인할 수 있는 샘플이다. JavaScript main.js /** 50%의 확율로 에러를 발생시켜 try와 catch 처리 */ function generateError() { try { // 50% 확율로 ..

249_자바스크립트에서 에러 발생 확인하기 [적용] 에러 종류를 확인하고 싶을 때 에러가 발생해도 작업을 계속 진행하고 싶을 때 에러 발생 시 특정 처리를 실행하고 싶을 때 [문법] 구문 의미 try {} chatch (error) {} 에러 처리 [내용] 에러가 발생하면 이후의 작업은 중단되지만 작업 내용에 따라 에러가 발생해도 처리를 지속해야 할 경우 try 와 catch를 사용한다. try {} 에서 에러가 발생하면 catch (error) {} 부분이 실행되며, Error 객체를 가져와 에러 내용의 표시 등이 가능하다. try, catch에서 에러가 처리되므로 이후의 작업이 계속된다. JavaScript main.js const a = 10; try { a =20; // a에 값을 다시 대입하면 ..

248_자바스크립트에서 에러 발생시키기 [적용] API 통신 중 부정확한 값 발견 시 에러 처리를 하고 싶을 때 [문법] 구문 의미 throw Error인스턴스 에러 던지기 [내용] 생성한 에러는 throw를 사용해 던질 수 있다. 파라미터가 숫자 타입이 아닌 경우 에러를 던지고 alert()으로 내용을 표시하는 예시를 확인해 보자. JavaScript main.js /** 파라미터 value가 숫자 타입이 아닌 경우 에러를 발생시키는 함수 */ function myFunction(value) { if (typeof value !== 'number') { // 에러 생성 const error = new Error(`'${value}'는 숫자 타입이 아닙니다.`); // 에러 내용을 alert()으로 표시..

247_자바스크립트에서 에러 객체 생성하기 [적용] 에러의 내용을 설정하고 싶을 때 [문법 1] 메소드 의미 반환 new Error(에러내용) Error 인스턴스 생성 Error 객체 [문법 2] 속성 의미 타입 Error인스턴스.message 에러 내용 문자열 [내용] 에러는 프로그램 실행 중 자동으로 발생하는 것 외에도 개발자가 의도적으로 발생시킬 수 있다. 이를 에러 던지기(Throw Error)라고 표현하며, 함수에 부정확한 값이 전달되거나 API에서 의도치 않은 값이 반환되는 경우에 사용할 수 있다. 에러 내용은 Error 객체로 표현하며, 인스턴스화 시 전달하는 인수에 에러 내용을 설정한다. JavaScript // Error 객체 인스턴스화 const error = new Error('에러가..

246_자바스크립트에서 에러 파악하기 [적용] 프로그램 실행 중 발생한 에러를 파악하고 싶을 때 [내용] 상수에 값을 재대입하거나 undefined.myValue와 같이 존재하지 않는 값에 액세스를 시도하면 에러(예외)가 발생한다. 에러가 발생하면 해당 시점에서 프로그램은 중단되며, 이후의 처리는 실행되지 않는다. 다음 코드에서는 에러를 의도적으로 발생시키고, 브라우저 콘솔에서 에러 발생을 확인한다. JavaScript main.js const a = 10; console.log(`상수 a의 값은 ${a}입니다.`); // '상수의 a의 값은 10입니다.' 출력 a = 20; // a에 값을 다시 대입하면 에러 발생 console.log(`다음 작업을 실행합니다.`); // 에러가 발생하였으므로 실행되지..

245_자바스크립트에서 객체 구조 출력하기 [적용] 깊은 계층의 데이터 요소를 확인하고 싶을 때 [문법] 메소드 의미 반환 console.dir(객체) 객체 구조 출력 없음 console.table(객체) 객체 구조 없음 [내용] 객체와 배열을 사용하여 깊을 계층의 데이터를 다룰 때, 데이터를 효과적으로 출력하여 확인하기 위해서 console.dir()과 console.table()을 사용할 수 있다. console.dir()은 객체의 구조를 출력한다. JavaScript dir/main.js const myObject = { id: 2, name: '사자' }; console.dir(myObject); // body 요소의 구조 출력 console.dir(document.body); 실행결과 구글 크롬..

244_자바스크립트에서 정보/에러/경고 출력하기 [적용] 자바스크립트의 실행 결과를 확인하고 싶을 때 상태에 따라 콘솔 사용을 분류하고 싶을 때 [문법] 메소드 의미 반환 console.log(값1, 값2, ...) 로그 표시 없음 console.info(값1, 값2, ...) 정보 표시 없음 console.warn(값1, 값2, ...) 경고 표시 없음 console.error(값1, 값2, ...) 에러 표시 없음 [내용] 콘솔은 동작 확인을 위한 경고, 에러를 표시하는 로그 등 상태에 따라 네 종류의 명령이 있다. 사용 분류를 통해 로그 종류를 콘솔 패널에서 쉽게 확인할 수 있으며, 종류에 따라 문자색으로 구분이 가능하다. JavaScript main.js console.log('로그 표시입니다.'..

243_자바스크립트에서 진동 모터 사용하기 [적용] 진동 피드백 기능을 설정하고 싶을 때 [문법] 속성 의미 타입 navigator.vibrate(진동시간(밀리초)) 디바이스 진동 처리 진리값 [내용] 진동은 주로 매너 모드의 알림 기능으로 사용되며, 기계 내부 모터의 회전으로 작동한다. Vibration API로 액세스가 가능하며, 자바스크립트는 'navigator.vibrate(진동시간(밀리초))'를 사용해 실행할 수 있다. 또한, 배열을 지정하면 진동 패턴을 설정할 수 있다. JavaScript // 진동 (1000밀리초) navigator.vibrate(1000); // 500밀리초 진동 후 100밀리초 정지, 다시 500밀리초 진동 navigator.vibrate([500, 100, 500]);..