254_자바스크립트에서 클래스 사용하기(인스턴스화) [적용] 클래스를 인스턴스화 하고 싶을 때 생성한 클래스를 사용하고 싶을 때 [문법] 구문 의미 new 클래스명() 클래스 인스턴스화 [내용] class 선언으로 정의한 클래스를 실제 데이터로 사용하기 위해서는 new 연산자를 사용하며, 인스턴스화가 필요하다. 인스턴스화한 데이터는 클래스 내 각 요소와 메소드에 접근이 가능하다. JavaScript class MyClass { constructor() { this.classField = 12; } classMethod() { console.log('메소드가 실행되었습니다.'); } } const myInstance = new MyClass(); console.log(myInstance.classField..

253_자바스크립트에서 클래스 정의하기 [적용] 특정 기능을 클래스로 만들고 싶을 때 자바스크립트에서 객체지향 프로그래밍을 구현하고 싶을 때 [문법] 구문 의미 class 클래스명 {} 클래스를 선언 [내용] 키워드 class를 사용해 클래스를 선언하며, 클래스명은 카멜 케이스(CamelCase(첫 글자를 대문자로 하여 단어를 연결하는 방법))을 이용하는 것이 일반적이다. JavaScript class MyClass {} 클래스에 constructor()를 삽입하면 초기화 시 해당 메소드가 실행되며, constructor()문의 삽입은 한 번만 가능하다. JavaScript class MyClass { constructor() { console.log('클래스가 초기화 되었습니다.'); } } 클래스 초..

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); 실행결과 구글 크롬..