07/18 함수,객체 + Getter,Setter

/*----------------------------------------------------함수---------------------------------------------------------------*/
function hello(name) {
  console.log('Hello,' + name + '!');
}
hello('sangju');

//ES6 템플릿 리터널 문법
// 중요 * 작은따옴표 ' (Single quote) 대신에 ~와 같이 적혀진 백틱 ` (Grave accent)를 사용해야함
function hello2(name) {
  console.log(`Hello, ${name}!`);
}
hello2('sangju');

//화살표 함수
const add = (a, b) => {
  return a + b;
};
console.log(add(1, 2));
//화살표 함수 짧게
const add2 = (a, b) => a + b;
console.log(add2(1, 2));
// 화살표 함수
// 익명함수, 즉시 실행이 필요할 경우에 사용하기 적합함.
// 기존 함수 표현식과 비교했을 때 간단함.
// this의 값으로 lexical scope를 참조 시킬 때나 map 사용 시 this를 넘겨주어 코드를 더 쉽게 작성할 수 있다.


/*----------------------------------------------------객체---------------------------------------------------------------*/
const spiderMan = {
  actor: '토비 맥과이어',
  role: '피터 파커',
  title: '스파이더맨',
};
const ironMan = {
  actor: '로다주',
  role: '토니스타크',
  title: '아이언맨',
  sound: '끼잉끼잉',
  say: function say() {
    console.log(this.sound); //<-- this는 자신이 속해있는 객체를 가르키게 됩니다.
    // 화살표 함수는 생성자 함수로 사용이 어렵고, arguments변수가 전달되지 않음.
    // 즉 객체 프로토타입으로 메소드를 선언할 때 화살표 함수는 적합하지 않음. this불가
  },
};
function movieinfo(info) {
  const { actor, role, title } = info; // <<- 아래 코드와 동일
  //   const actor = info.actor;
  //   const role = info.role;
  //   const title = info.title;
  console.log(`영화 배우 ${actor}는 ${title}에서 ${role} 역할을 맡음`);
}
console.log(movieinfo(ironMan));
ironMan.say();
//영화 배우 로다주는 아이언맨에서 토니스타크 역할을 맡음
//undefined <-- function의 console.log이 출력만하고 리턴값이 없어서 찍히는거

//그냥 이것도 있다
function movieinfo2({ actor, role, title }) {
  return `영화 배우 ${actor}는 ${title}에서 ${role} 역할을 맡음`; // <-- 이렇게하면 안찍힘
}
console.log(movieinfo2(spiderMan));

 

도대체 왜 getter와 setter 굳이 왜 쓰는지? 왜 써야하는거지?(자바에선 private 변수에 접근할때 사용했던 기억)

 

1. getter,setter로 접근함으로써 변수를 보호 -> 즉 캡슐화의 이점인 은닉화

 

이건 알겠는데 JavaScript에선 그냥 변수에 직접 접근해서 수정하면 되는거 아님?

 

2. 변수관계에 있어서 일관성을 깨뜨리는 경우가 생김

 

ex) 직접 접근할 경우

class Time {

    constructor(start, end) {
        this._start = start;
        this._end = end;
        this._duration = end - start; 
    }

}

const time = new Time(0, 20);

time._start = 5;
time._duration -= 5;

console.log(time._start)

->  duration의 일관성을 유지하기위해 time._duration -= 5;라는 코드 추가 됌

 

ex) getter,setter 사용

class Time {

    constructor(start, end) {
        this._start = start;
        this._end = end;
        this._duration = end - start 
    }

    setStart (newStart) {
        this._start = newStart;
        this._duration = this._end - this._start; 
    }

    getStart() {
        return this._start;
    }

}

const time = new Time(0, 20);

time.setStart(5);
console.log(time.getStart());

-> 깔꼼 + 일관성 유지

 

ps) 특정 목적이 있을때 사용하자 무작정 남발하면 코드 길이만 늘리는 결과 초래할듯