[JavaScript] 자바스크립트에서 this 기능(화살표함수) 사용하기

261_자바스크립트에서 this 기능(화살표함수) 사용하기 [적용] 클래스의 멤버 변수를 메소드 내부와 이벤트 리스터에서 참조하고 싶을 때 [문법] 구문 의미 () => {} 화살표 함수 정의 [내용] 자바스크립트에서 this는 실행하는 영역에 따라 참조하는 곳이 변한다. 화살표 함수를 사용하면 실행 영역에 상관없이 this의 참조가 변하지 않으므로 코드의 가독성이 좋아진다. 클릭 횟수를 계산하는 프로그램을 통해 조금 더 자세히 알아보자. 다음은 LikeCounter 클래스의 멤버 변수 ClickedCount를 사용해 클릭 횟수를 카운트하는 목적의 프로그램이다. 우선 정상 동작하지 않는 코드를 먼저 확인해 보자. JavaScript ERROR class LikeCounter { constructor() ..

2022.08.08

[JavaScript] 자바스크립트에서 클래스 데이터의 setter/getter 사용하기

260_자바스크립트에서 클래스 데이터의 setter/getter 사용하기 [적용] 클래스의 필드처럼 동작하는 함수를 사용하고 싶을 때 [문법] 구문 의미 set 속성명(값) {} setter 정의 get 속성명 getter 정의 [내용] setter/getter는 클래스의 필드와 같은 방식으로 작동하며, set은 값을 설정하고 get은 값을 가져온다. MyClass 클래스에 customField 이름의 setter/getter를 정의하는 샘플을 확인해 보자. JavaScript class MyClass { // 'customField'의 setter set customField(value) { this._customField = value; } // 'customField'의 getter get cust..

2022.08.07

[JavaScript] 자바스크립트에서 클래스 계승하기

259_자바스크립트에서 클래스 계승하기 [적용] 다른 클래스의 기능을 확장한 클래스를 생성하고 싶을 때 빌트인 객체(Built-in Object)를 계승하고 싶을 때 [문법] 구문 의미 class 클래스명 extends 생성 클래스명() 부모 요소를 계승하는 새로운 클래스 선언 [내용] 클래스에는 다른 클래스의 속성과 메소드를 그대로 이어받는 계승의 기능이 있다. MyParent 클래스를 계승하는 MyChild 클래스의 샘플을 확인해 보자. JavaScript // 계승 대상 클래스 (부모 클래스) class MyParent { parentMethod() { console.log('MyParent 클래스의 메소드입니다.'); } } // MyParent를 계승하는 클래스(자식 클래스) class MyCh..

2022.08.07

[JavaScript] 자바스크립트에서 인스턴스 생성없이 정적 메소드 사용하기

258_자바스크립트에서 인스턴스 생성없이 정적 메소드 사용하기 [적용] 클래스 인스턴스화 없이 메소드를 호출하고 싶을 때 [문법] 구문 의미 static 메소드명() {처리내용] 정적 메소드 정의 [내용] 클래스의 인스턴스화 없이 호출하는 메소드를 정적 메소드(Static Method)라고 한다. static 선언으로 정의하며, 호출은 '클래스명.메소드명'을 사용한다. JavaScript class MyClass { static method() { console.log('정적 메소드입니다.'); } } // 정적 메소드 호출 MyClass.method(); // '정적 메소드입니다.' 다양한 용도로 사용할 수 있는 범용 메소드를 정의하거나 클래스 속성에 의존하지 않는 함수를 정의할 때도 사용된다. 전달받..

2022.08.07

[JavaScript] 자바스크립트에서 인스턴스 생성없이 정적 메소드 사용하기

257_자바스크립트에서 인스턴스 생성없이 정적 메소드 사용하기 [적용] 클래스 인스턴스화 없이 메소드를 호출하고 싶을 때 [문법] 구문 의미 static 메소드명() { 처리내용 } 정적 메소드 정의 [내용] 클래스의 인스턴스화 없이 호출하는 메소드를 정적 메소드(Static Method)라고 한다. static 선언으로 정의하며, 호출은 '클래스명.메소드명'을 사용한다. JavaScript class MyClass { static method() { console.log('정적 메소드입니다.'); } } // 정적 메소드 호출 MyClass.method(); // '정적 메소드입니다.' 다양한 용도로 사용할 수 있는 범용 메소드를 정의하거나 클래스 속성에 의존하지 않는 함수를 정의할 때도 사용된다. 전..

2022.08.06

[JavaScript] 자바스크립트 클래스에서 메소드(Method) 사용하기

256_자바스크립트 클래스에서 메소드(Method) 사용하기 [적용] 클래스에 메소드를 정의하고 싶을 때 [문법] 구문 의미 메소드명() {처리내용} 멤버 함수 정의 [내용] 클래스 내부의 함수를 클래스 메소드 멤버 함수라고 한다. 클래스에 멤버 함수를 정의하기 위해서는 다음과 같이 기술한다. 클래스 멤버 함수에 function은 사용하지 않도록 주의하자. 정의할 수 있는 멤버 함수의 수는 제한이 없다. JavaScript class MyClass { constructor() {} myMethod() { return 'Helloworld'; } } 인스턴스(new 클래스명())의 멤버 함수 접근은 '인스턴스.멤버함수명'을 사용한다. JavaScript class MyClass { myMethod() { ..

2022.08.06

[JavaScript] 자바스크립트 클래스에서 변수 사용하기

255_자바스크립트 클래스에서 변수 사용하기 [적용] 클래스에 변수를 사용하고 싶을 때 API 통신 결과 클래스를 생성하고 싶을 때 [문법] 구문 의미 this.변수명 = 값 멤버 변수 정의 [내용] 클래스에 속하는 변수를 클래스 필드, 클래스 변수, 멤버 변수라고 한다. 클래스에 멤버 변수를 정의하기 위해서는 다음과 같이 constructor() 내부에 'this.변수명'을 사용한다. 여기서 this는 클래스 자신을 가리킨다. 클래스 멤버 변수에 let과 const를 사용하지 않도록 주의하자. JavaScript class MyClass { constructor() { this.myField1 = 100; this.myField2 = '사자'; } } 멤버 변수는 초기값 대입이 가능하며, 대이하지 않으..

2022.08.06

[JavaScript] 자바스크립트에서 클래스 사용하기(인스턴스화)

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

2022.08.05

[JavaScript] 자바스크립트에서 클래스 정의하기

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

2022.08.05

[JavaScript] 자바스크립트 함수 내부 변수와 상수의 범위알기

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

2022.08.05