추상화와 캡슐화

김형석·2023년 6월 30일
0

코어 JavaScript

목록 보기
1/2

객체지향 프로그래밍

Object Oriented Programming

OOP (객체 지향적 프로그래밍) 는 데이터가 객체 내에 캡슐화되고 구성 요소 부분이 아닌 객체 자체가 운용되는 프로그래밍 방식이다
-mdn-

추상화(Abstraction)

복잡함 속에서 필요한 관점만을 추출하는 행위

즉, 특정 기능을 하는 그룹의 공통된 기능(프로퍼티와 메서드)을 정의하는 작업을 말함.

JS에서 추상화 방식

  1. 리터럴
  2. 함수 활용
  3. 프로토 타입

참고 - 프로토타입 02

핵심은 복잡하고 불필요한 세부 사항을 숨겨 코드를 더 간단하고 읽기 쉽고 유지 관리하기 쉽게 만드는 프로세스

const lstOfStrings = ['6', '7', '8'];
let sum = 0;
for (let i = 0; i < lstOfStrings.length; i++) {
  sum += parseInt(lstOfStrings[i]);
}
console.log(sum); // Output: 21

함수를 사용하여 추상화

function stringToInt(str) {
  return parseInt(str);
}

function sumList(lst) {
  let sum = 0;
  for (let i = 0; i < lst.length; i++) {
    sum += stringToInt(lst[i]);
  }
  return sum;
}

const lstOfStrings = ['6', '7', '8'];
const result = sumList(lstOfStrings);
console.log(result); // Output: 21
function sumList(lst) {
  function stringToInt(str) {
    return parseInt(str);
  }

  let sum = 0;
  for (let i = 0; i < lst.length; i++) {
    sum += stringToInt(lst[i]);
  }
  return sum;
}

const lstOfStrings = ['6', '7', '8'];
const result = sumList(lstOfStrings);
console.log(result); // Output: 21

캡슐화(Encapsulation)

이제 사용자는 speaker.volumeUp()와 speaker.volumeDown() 함수를 호출하여 원하는만큼 볼륨을 조절할 수 있다.

그런데 문제는 외부에서 speaker.volume에 직접 접근하여 값을 변경할 수 있다는 점이다.

이렇게 되면 볼륨의 최대 허용 크기가 100인데, 의도치 않게 10000이란 값을 부여하여 오류를 발생시킬 수 있을 것이다.

이 때 volume 변수를 외부에서 변경할 수 없도록 보호하는 것을 캡슐화라고 한다.

const Speaker = () =>{
  let volumn = 0;

    return {
        volumnUp(){
            volumn +=10;
        },

        volumnDown(){
            volumn -= 10;
        },

        getVolumn(){
            return volumn;
        }
        
    }
}
profile
코드로 소통하기 위해 힘쓰는 프론트엔드 개발자 입니다.

0개의 댓글