web/javascript

[js] 4. 클래스 함수 | 객체에 사용하는 연산자와 구문들

jeri 2024. 5. 15. 11:29
반응형

자바스크립트 = 객체지향 프로그래밍 언어

  • 자바스크립트는 객체 지향 프로그래밍 언어로 객체를 이용하여 프로그램을 작성하는 언어
  • 자바스크립트는 모든 값을 객체로 표현하여 처리 - 브라우저를 window 객체로 표현하여 사용

자바스크립트의 객체(Object)란?

  • 현실 세계에 존재하는 대상을 프로그램에서 사용하기 위해
    프로퍼티(Property - 표현대상의 속성)와 메소드(Method - 표현대상의 행위)로 표현
  • 인스턴스라는 용어 없음

vs 자바의 객체(Object)란?

  • 자바: 반드시 클래스 먼저 만들고 -> 객체 생성
  • 자바스크립트 : 클래스 만들지 않고 -> 객체 생성 : 어떻게? 클래스 함수 이용

자바스크립트의 클래스함수란?

  • 클래스 대신 함수(클래스함수 - 생성자)를 선언하고 new 연산자로 클래스 함수를 호출하여 객체를 생성함
  • ES6 : class 키워드를 사용하여 클래스를 선언하고 new 연산자로 클래스의 생성자(Constructor)를 호출하여 객체 생성 가능
  • 클래스 함수 class 키워드와 차이점 : class 키워드로 선언하면 상속 가능

클래스 함수(클래스)를 이용하여 객체를 생성하는 이유

  • 동일한 프로퍼티와 메소드를 가지고 있는 다수의 객체를 생성하기 위해
  • 생산성 향상 및 유지보수의 효율성 증가

 

 

 

 

 

 

1. 클래스 함수로 선언해 사용하기

1) 클래스함수의 개념

  • 객체를 생성하기 위한 함수
  • 일반 함수와 구분하기 위해 첫문자를 대문자로 작성 - 파스칼표기법
  • 클래스 함수에는 프로퍼티(값 저장)와 메소드(함수 저장) 선언
  • 클래스 함수의 매개변수로 값을 전달받아 프로퍼티의 초깃값으로 설정

2) 클래스 함수의 요소

  • 프로퍼티 & 메소드
  • this 키워드를 사용하여 표현
  • this키워드를 사용하지 않으면 객체의 프로퍼티와 메소드로 취급하지 않음
  • this키워드 : 클래스 함수에서 객체를 표현하기 위한 키워드

3) 클래스 함수의 선언 형식

function 클래스명(num,name,address) {
	//클래스 함수에서 this 키워드로 요소를 표현하여 값을 저장하면 프로퍼티 선언
	// => 프로퍼티(Property) : 객체의 속성값을 저장하기 위한 변수 - 멤버변수
	// => 클래스 함수의 매개변수에 저장된 값을 이용하여 프로퍼티의 초기값으로 저장

	//클래스 함수에서 this 키워드로 요소를 표현하여 함수를 저장하면 메소드 선언
	// => 메소드(Method) : 객체의 행위(기능)을 함수로 표현 - 멤버함수
	// => 메소드 내부에서는 this 키워드로 프로퍼티 사용 가능
}

4) 클래스 함수 선언 예시

function Student(num,name,address) {
	//프로퍼티(Property)
	this.num = num ;
	this.name = name ;
	this.address = address ;

	//메소드(Method)
	this.display = function() {
		alert("학번 = " +this.num+" , 이름 = " +this.name+" , 주소 = "+this.address);
	}
}

5) 객체 생성해 사용하기

//1.
//🎁객체 생성의 개념
//new 연산자로 클래스 함수를 호출하여 객체를 생성하고 변수에 저장 : 객체변수

//2.
//🎁클래스 함수로 객체 생성 형식
var 변수명 = new 클래스함수(값, 값, ...);

//3.
//🎁클래스 함수로 객체 생성 예시
//🖤객체 생성
var student = new Student(1000, "홍길동", "서울시 강남구");

//🖤객체의 타입 확인 - object
alert("변수의 자료형 = " + typeof(student)); //변수의 자료형 = object
//alert("변수의 자료형 = " + typeof student); //typeof에 () 빼도 됨

//🖤객체의 요소 사용 - 프로퍼티
//=> 객체는 .연산자를 사용하여 객체의 요소(클래스 함수의 프로퍼티와 메소드) 사용 가능
//=> .연산자로 객체의 프로퍼티 호출
alert("학번 = " +student.num+" , 이름 = " +student.name+" , 주소 = "+student.address);
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구
//=> .연산자 대신 []연산자를 사용하여 객체의 요소 사용 가능
//=> []연산자 사용 시 요소의 이름은 일반 식별자와 구분하기 위해 문자값으로 표현함
alert("학번 = " +student["num"]+" , 이름 = " +student["name"]+" , 주소 = "+student["address"]);
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구


//🖤객체의 요소 사용 - 메소드
//=> . 연산자로 객체의 메소드 호출
student.display();
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구
//=> [] 연산자로 메소드 호출
student["display"]();

//4.
//🎁객체 요소 추가, 변경, 삭제의 개념
//자바스크립트에서는 객체에 요소(프로퍼티와 메소드)의 추가, 변경, 삭제 가능
//자바는 객체의 요소들(필드,메소드) 변경이 어렵지만, 자바스크립트는 매우 자유롭다!
//장점 : 객체를 손쉽게 조작가능
// 단점 : 유지보수 어려움

//5.
//🎁객체 요소 추가, 변경, 삭제 예시
//🖤객체 요소 추가 - 프로퍼티 추가
student.phone="010-1234-5678"; //객체 요소 추가 (프로퍼티 추가)
alert("전화번호 = "+student.phone);
//전화번호 = 010-1234-5678

//🖤객체 요소 변경 - 메소드 변경
student.display=function(){//객체 요소 변경 (메소드 변경)
			alert("학번 = " +this.num+" , 이름 = " +this.name+" ,주소 = "+this.address+" , 전화번호 = "+this.phone);
	}
student.display();
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구 , 전화번호 = 010-1234-5678

//🖤객체 요소 삭제 - 프로퍼티 삭제
//🖤delete(객체요소)함수 : 객체에서 요소를 삭제하는 함수
delete(student.phone); //객체 요소 삭제 (프로퍼티 삭제)
student.display();
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구 , 전화번호 = undefined

 

 

 

 

 

2. class 키워드로 선언해 사용하기 - 상속가능 (ES6)

1) class키워드의 개념

  • ES6에서 class 키워드로 클래스를 선언하여 객체 생성 가능
  • 문법적으로 클래스로 선언했을 뿐 내부적으로 자료형은 함수임!
  • 클래스함수와 다른 점 : class키워드로 선언한 클래스함수는 상속 가능

2) class키워드로 클래스 함수 선언

//부모클래스
class Human{
	constructor(num) {
		this.num = num;
	}
}

//자식클래스 : extends 키워드로 부모 클래스를 상속받아 클래스 작성 가능
class Student extends Human{
	//constructor 키워드로 생성자 함수 선언 - 생성자 함수 : 객체를 생성하기 위해 호출되는 함수
	constructor(num,name,address) {
		super(num);
		this.name=name;
		this.address=address;
	}
	//메소드 선언 - function 키워드 생략 : 화살표힘수 말고, 일반함수로 작성하는 것 권장
	display(){
		alert("학번 = " +this.num+" , 이름 = " +this.name+" , 주소 = "+this.address);
	}
}

//🖤문법적으로 클래스로 선언했을 뿐 내부적으로 자료형은 함수
alert("자료형 = " + typeof(Student)); //자료형 = function

3) 객체 생성해 사용하기

//1. 🖤객체 생성
//const 보다 let 권장
let student = new Student(1000, "홍길동", "서울시 강남구");

//2. 🖤객체의 요소 사용 - 프로퍼티
//프로퍼티 호출
alert("학번 = " +student.num+" , 이름 = " +student.name+" , 주소 = "+student.address);
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구

//프로퍼티 호출
alert("학번 = " +student["num"]+" , 이름 = " +student["name"]+" , 주소 = "+student["address"]);
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구

//3. 🖤객체의 요소 사용 - 메소드
//메소드 호출
student.display();
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구
//메소드 호출
student["display"]();
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구

 

 

 

 

 

 

 

 

 

3.프로토타입 메소드(ProtoType Method)

  • 프로퍼티는 객체의 속성값을 저장하기 위해 객체마다 따로 생성되어 사용하는 것이 맞지만,
  • 메소드는 동일한 명령의 함수가 객체마다 따로 생성되어 저장되는 것은 비효율적인 방법임
  • 클래스 함수를 이용하여 객체를 생성할 경우 클래스 함수에 선언된 프로퍼티와 메소드가 객체의 요소로 생성됨
    • 메소드 : heap 영역에 만들어짐
  • 객체의 메소드를 프로토타입 메소드로 선언하면 객체의 갯수에 상관없이 메소드가 하나만 생성되어 모든 객체가 공유하여 사용 가능
    • 메소드 : 메소드(static) 영역에 만들어짐 , 무조건 딱 하나만 생성!
21_prototype.html

1) [HEAP영역]에 메소드 저장 - 객체 생성 시 객체마다 메소드 생성

function Student(num,name,address){
	this.num=num;
	this.name=name;
	this.address=address;

	//클래스 함수에서 선언된 일반 메소드는 객체마다 따로 메소드가 저장됨
	this.display=function(){
		alert("학번 = " + this.num +" , 이름 = " + this.name +" , 주소 = "+ this.address);
	}
	this.setValue=function(num,name,address){
		this.num=num;
		this.name=name;
		this.address=address;
	}
}

//🖤객체 생성 및 객체의 요소 사용
var student = new Student(1000, "홍길동", "서울시 강남구");
student.display();
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구
student.setValue(2000, "임꺽정", "서울시 종로구");
student.display();
//학번 = 2000 , 이름 = 임꺽정 , 주소 = 서울시 종로구

2) [Method영역]에 메소드 저장 - 미리 메소드가 딱 하나 생성

//클래스 함수에는 프로퍼티만 선언
function Student(num,name,address){
	this.num=num;
	this.name=name;
	this.address=address;
}

/*
//클래스 함수에 프로토타입 메소드 추가
//=> 객체에 상관없이 메모리(Method 영역)에 하나만 생성되어 모든 객체가 공유하여 사용
//🖤방법1 - 비권장
Student.prototype.display=function(){
	alert("학번 = " + this.num +" , 이름 = " + this.name +" , 주소 = "+ this.address);
}

Student.prototype.setValue=function(num,name,address){
	this.num=num;
	this.name=name;
	this.address=address;
}
*/

//프로토타입 메소드의 효율적인 관리를 위해 Object 객체({})의 요소로 메소드 선언
//🖤방법2 - 권장
Student.prototype={
	"display" : function() {
			alert("학번 = " + this.num + " , 이름 = " + this.name + " , 주소 = "+ this.address);
		},
	"setValue" : function(num, name, address) {
			this.num = num;
			this.name = name;
			this.address = address;
		}
	}

//🖤객체 생성 및 객체의 요소 사용 (위와 동일)
var student = new Student(1000, "홍길동", "서울시 강남구");
alert(student);
//[object Object] : Object 클래스로 만든 객체 입니다.
student.display();
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구
student.setValue(2000, "임꺽정", "서울시 종로구");
student.display();
//학번 = 2000 , 이름 = 임꺽정 , 주소 = 서울시 종로구

 

 

 

 

 

 

 

4. 객체에 사용하는 연산자와 구문들

1) instanceof 연산자 (ES6)

  • 변수에 저장된 객체가 클래스 함수로 생성되었는지를 비교하는 연산자
  • 비교하여 다른 경우 false 제공 , 같은 경우 true 제공
  • 언제 사용하면 좋을까? - 객체가 뭔지를 구분해서 객체에 맞는 프로퍼티와 메소드를 사용하고 싶을 때
//1.
//형식
//이 클래스로 이 객체가 만들어졌나요? 
객체변수 instanceof 클래스함수

//2.
//예시
alert(student instanceof Student); //true

2) in 연산자

  • 객체의 요소를 확인하기 위한 연산자
  • 객체에 요소가 없는 경우 false 반환, 있는 경우 true반환
//1.
//형식
//이 객체에 이 요소가 있나요? 
"요소명" in 객체

//2.
예시
alert("num" in student); //true
alert("phone" in student); //false
alert("display" in student); //true

3) for 구문 - 요소 일괄처리

  • for 구문을 이용하여 객체 요소에 대한 일괄처리 가능
//1.
//형식
//객체에 저장된 요소명을 하나씩 제공받아 변수에 저장하여 반복 처리 
for(변수 in 객체){명령; 명령; ...}

//2.
//예시
for(variable in student){
	alert(variable);
}
//num name address display setValue

for(variable in student){
	//요소의 이름을 제공받아 객체 요소를 사용하기 위해  . 연산자 대신 []연산자 사용
	if(typeof(student[variable]) != "function"){//객체의 요소가 메소드가 아닌 경우
		alert("객체의 속성값 = " + student[variable]);
	}
}
//객체의 속성값 = num
//객체의 속성값 = name
//객체의 속성값 = address

4) with 구문 - 요소를 변수처럼

  • with 구문을 이용하여 객체 요소를 변수처럼 사용 가능
//1.
//형식
with(객체) {명령; 명령; ...}

//2.
//예시
alert("학번 = " + student.num +" , 이름 = " + student.name +" , 주소 = "+ student.address);
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구

//student 객체의 요소에 접근할 때 student 키워드 없이 변수처럼 사용 가능
with(student) {
	alert("학번 = " + num +" , 이름 = " + name +" , 주소 = "+ address);
}
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구
반응형