JS 개념 정리

JS

1. Getter & Setter

Get과 Set을 이해하기 전에 JS의 클래스와 인스턴스라는 개념을 먼저 이해해야 한다. 클래스는 ES6에 도입된 개념으로 객체를 만들어내는 '틀'이다. 이 '틀'로 만들어진 것이 객체이면서 그 클래스의 '인스턴스'이다.

1-1. 객체
객체(object)란 두 종류의 정보를 담고 있는 집합체를 뜻한다. 첫번째 종류는 속성(attributes, properti es)이라 불리는 상태(state)를 나타내는 데이터이고 두번째 종류는 동작(behavior)을 나타내는 메소드(method)라 불 리는 코드들을 의미한다. 즉, 객체란 삼태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라 고 할 수 있다. JS는 객체 지향 프로그래밍으로 작성 가능하며 4가지 핵심 개념이 있는데, 캡슐화(encapsula tion), 추상화(abstraction), 상속(inheritance), 그리고 다형성(polymorphism)이다.

그렇다면 get 과 set은 무엇인가

Getter와 Setter는 객체 지향 프로그래밍에서 사용되는 개념이며, 일조의 메서드라고 보면 된다. 즉, 단어 그대로 Getter는 객체의 속성(property) 값을 반환하는 메서드이며, Setter는 객체의 속성 값을 설정, 변경하는 메서드라고 보면 된다.

const user = {
	name: 'lee',
    age: 20
}

console.log(user.name); // lee

user.name = 'park';

위와 같이 바로 접근하지 말고, getName(), setName() 메서드를 통해 경유해서 설정하도록 하는 기법이 바로 Getter와 Setter 개념이라고 보면 된다.

const user = {
	name: 'lee',
    age: 20,
    
    // 객체의 메서드(함수)
    getName() {
    	return user.name;
    },
    setName(value) {
    	user.name = value;
    }
}

console.log(user.getName()); // lee

user.setName('park');

그렇다면 굳이 Getter와 Setter를 사용하는 이유는 무엇일까?
Getter와 Setter를 사용하면 객체 내부 속성에 직접 접근하지 않아 객체의 정보 은닉을 가능하게 해주어 보안을 강화할 수 있고, 코드의 안전성과 유지보수성을 높일 수 있다는 장점이 있다. 또한 옳지않은 값을 넣으려고 할때 이를 미연에 방지할 수 있다.

출처)https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-getter-setter-%EB%9E%80

2. .reduce

공부하던 중 .reduce 를 도대체 어디에 쓸까라는 궁금증이 생겨 찾아보았는데 객체가 담긴 배열 데이터에서 원하는 값만 계산하기에 유용하다는 점을 알게 되었다. .reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

arr.reduce(callback[, initialValue])

2-1. callback function
다음 4가지의 인수를 가진다.
accumulator - accumulator는 callback함수의 반환값을 누적합니다.
currentValue - 배열의 현재 요소
index(Optional) - 배열의 현재 요소의 인덱스
array(Optional) - 호출한 배열
callback함수의 반환 값은 accumulator에 할당되고 순회중 계속 누적되어 최종적으로 하나의 값을 반환한다.

2-2. initialValue(Optional)
최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생한다.

const family = [
  {
    name: 'lee',
    age: 50,
    job: 'dad'
  },
  {
    name: 'kim',
    age: 50,
    job: 'mom'
  },
  {
    name: 'son',
    age: 20,
    job: 'baby'
  }
];

// 3명의 나이를 더해봅니다.
// 여기서 초기값 설정이 반드시 필요합니다.
const ageSum = family.reduce((x, y) => {
  return x + y.age;
}, 0);

console.log('가족 나이 합 ', ageSum); //120