객체 지향 프로그래밍의 원칙

2020. 12. 13. 16:58웹 프론트엔드 깊게 이해하기/자바스크립트 이해하기

이 글은 아래 영상의 내용을 바탕으로 작성되었습니다.

https://www.youtube.com/watch?v=PFmuCDHHpwk

 

 

객체 지향 프로그래밍이란?

프로그램의 함수보다도 '객체'에 더 초점을 두는 프로그래밍 방식(패러다임)입니다. 일반적인 절차지향 프로그래밍은 엄청나게 많은 함수와 데이터들로 이루어져 있고 이 함수와 데이터들의 관계가 한눈에 알아보기 힘들 정도로 이리저리 꼬여 있는 경우가 많습니다. 어디서 무엇을 가져다 사용하는지가 분명하지 않은 상태이기 쉽고, 이를 '스파게티 코드'라고 부릅니다.

 

 

 

캡슐화

객체 지향 프로그래밍에서는 이를 막기 위해 관련 있는 데이터(변수)들과 함수들을 서로 묶습니다. 이 묶음을 '객체'라고 부릅니다. 함수는 메서드로, 변수는 속성으로 부릅니다. 이런 식의 묶음 작업을 '캡슐화'라고 부릅니다. 캡슐화된 메서드는 같이 묶인 객체의 속성을 사용하기 마련입니다. 그래서 일반적인 함수와는 다르게 매개변수를 받아올 필요가 없을 때가 많습니다. 객체 지향에서는 이런 식으로 외부 매개변수를 사용하지 않는 메서드가 객체 지향에서는 최고의 메서드라고 봅니다.

 

적용 : 프로그램의 복잡도를 줄이기 + 재사용성을 높이기

 

 

 

추상화

일반적인 기계들을 보면 겉으로 드러나 있는, 사용하는데 필요한 몇가지 중요한 기능들만이 우리에게 보여지고, 사용되어 질수 있고, 그 외의 다른 내부적인 기능들을 숨겨져 있는 경우가 많습니다. 객체 지향 프로그래밍에서는 동일한 것을 지향합니다. 그럼으로써 객체의 인터페이스를 간단하게 만들고, 객체의 변화가 전체 프로그램에 미치는 영향을 최소화하는 효과를 얻을 수 있습니다.

 

적용 : 프로그램의 복잡도를 줄이기 + 변경사항의 영향을 좁은 영역에 제한시키기

 

 

 

상속

상속은 간단히 말해서 '중복'코드를 줄이는 한가지 방법입니다. 만일 여러 객체가 동일한 기능을 하게 된다면 그 기능은 상속을 받아 동작하도록 만들어서 중복 코드를 최소화 시킬 수 있습니다.

 

적용 : 중복코드를 없애기

 

 

 

다형성

상속을 통해 모든 객체가 동일한 메서드를 가질 수 있도록 만들 수 있지만, 많은 경우, 각각의 객체는 같은 메서드를 실행하더라도 조금은 다른 동작을 수행해야 할 때가 많습니다. 다형성은 이런 식으로 동일한 메서드라도 각 객체의 역할에 따라 다른 기능을 수행하게 만들어주는 것입니다.

 

적용 : 쓸데 없는 switch/case 코드 없애기

 

 

 

객체에 대한 이해

자바스크립트로 객체 지향을 위한 객체를 만드는 방식은 두가지가 있습니다. 하나는 객체 자체를 리턴하도록 만드는 팩토리 함수를 이용하는 것이고, 또 하나는 new 연산자를 통해 객체를 생성하도록 만드는 Constructor 함수를 사용하는 것입니다. 자바스크립트의 모든 자료형은 내부적으로는 이 constructor 함수를 통해 생성됩니다.

 

 

 

함수에 대한 이해

다들 '자바스크립트에서는 함수 또한 객체이다'라는 말을 들어보았지만 이 말이 정확히 무슨 의미인지 헷갈렸던 적이 있을 것입니다. 자바스크립트를 통해 함수를 정의하면, 내부적으로 new Function() 이 동작합니다. 즉, Function 객체가 하나 생성되는 것이고, 그 객체의 .name 속성에 선언에 사용된 변수 이름이 담기는 것입니다. 실제로 생성된 함수를 변수에 담아 .constructor 에 접근해보면 constructor 함수가 있는 것을 볼 수 있습니다.

 

더 자세히는 다음의 두 코드는 같은 일을 수행합니다.

 

 

또한 다음의 두 코드는 같은 일을 수행합니다. 즉, 우리가 정의한 함수를 수행하면 내부적으로는 저 call 메서드가 실행되는 것입니다.

 

 

call 의 첫번째 매개변수로는 this 로 지정될 객체가 담깁니다. 두번째 매개변수부터는 실행될 함수에 매개변수로 넘겨집니다. new 연산자는 call 메서드에 {} 를 this 로, 자기 매개변수들을 나머지를 매개변수들로 넘기는 것입니다. new 연산자를 쓰지 않으면 {} 가 아닌 window 가 자동으로 넘겨지는 것입니다. call 과 비슷한 메서드로 apply 가 있습니다. 이 경우, 두번째 매개변수를 배열로만 넣을 수 있으며 세번째 매개변수 부터는 입력이 불가능합니다.

'웹 프론트엔드 깊게 이해하기 > 자바스크립트 이해하기' 카테고리의 다른 글

이벤트 루프  (1) 2021.11.16
객체 및 프로토타입  (0) 2020.11.26
ES6 import & export  (0) 2020.10.22
화살표 함수에 없는 3가지  (0) 2020.10.22
THIS 의 이해  (0) 2020.10.22