Front-end/JavaScript

[JS] 리터럴 클래스

파리외 개발자 2022. 6. 14. 20:23

리터럴

변수는 값을 저장하고 이용한다. 그런데 이 변수는 여러개의 값 또한 저장할 수 있다.

 

중괄호로 묶고 각 속성을 , 로 구분지어 명시하면 개개의 속성들은 해당 개체가 가지는 멤버가 된다.

변수 뿐 아니라 함수까지 멤버로 넣을 수 있다.

이렇게 중괄호로 여러 속성과 함수를 묶어서

, 로 구분지어서 사용하는 방식을 리터럴이라고 한다.

 

리터럴 클래스 멤버 접근

리터럴 클래스 내의 멤버들에 접근하기 위해서는 

해당 클래스의 이름과 닷 ( . ) 연산자로 클래스 내의 멤버를 적어서 접근한다.

user클래스 내의 showInfo 멤버메소드를 호출했다.

user의 age속성에 접근하기 위해서 user.age로 적어준다.

 

리터럴의 데이터포장

만약 한 사람의 인적사항을 일반 함수로 출력하고 싶다면 속성만큼의 인자를 받아주고

함수를 호출할 때 인적사항을 인자로 전달하면 된다.

여러 사람의 인적사항을 출력하고 싶다면

매번 인자를 함수에 입력해 줘야한다는 것을 알 수 있다.

리터럴 형태로 같은 기능을 구현한다면 

한 사람의 인적사항은 userInfo라는 리터럴에 한번에 묶여서 전달할 수 있다.

리터럴은 이처럼 데이터 포장용과 매개변수로 전달하는데에 주사용점이 있다.

JSON등 키값으로 이뤄진 데이터를 다루는 데 효율적인 방식이라 볼 수 있다.

 

리터럴의 인스턴스 생성

같은 효과를 내는 메뉴 두개를 구현한다고 했을 때 리터럴 클래스를 적용해보도록 한다.

모든 내용을 해석할 필요없이 앞서 메뉴의 기능을 구현하기 위해선 이런 코드가 필요하단 것만 참고한다.

두 번째 메뉴에도 같은 기능을 구현하기 위해 또 다시 똑같은 코드에 가르키는 메뉴이름만 다르게 해서 클래스를 생성한다.

재사용은 클래스의 이점 중 하나인데 리터럴 방식은 인스턴스를 하나만 생성할 수 있기 때문에

재사용을 위해서는 같은 클래스를 매번 생성해줘야 한다.

리터럴의 사용법

리터럴은 같은 항목에 속하는 속성들을 잘 묶어서 포장해서 보내기 용이하며

어떤 데이터가 어디에 속하는지 잘 분류해서 가독성을 높일 수 있어 데이터 포장과 전달에 사용하지만

인스턴스를 하나만 생성할 수 있기 때문에 재사용하기엔 무리가 있다.

재사용을 위해서는 함수형 클래스를 사용하도록 한다.

 

 

[JS] 함수형 클래스

함수 선언 함수 선언을 위해서 function을 명시하고 사용할 함수 이름과 ()를 넣어주며 {}안에 내용을 넣는다. 여기서 this란 {}의 내용이 적힌 곳, 즉 Person의 주소가 들어가며 this.name은 Person의 name변

developefeel.tistory.com