4장 부터는 심플한
메모로 진행한다.

메서드와 this

메서드(method) - 사전적으로는 객체와 관련된 서브루틴이라고 하는 사전적인 용어.

어... 메서드연기 메쏘드연기 뭐 그런말 들어 봤을거다. 캐릭에 몰입해서 특정한 행동을 하는.......
그런 것 처럼.. 앞에서 배운 객체 내부에서 특정한. 정해져있는 연기를 하는 녀석(함수)을 말한다.

 

this - 아래에서 후술

---------------------------------

메서드 만들기

코어자바 스크립트 페이지에서... 연기를 시키는 과정을 설명하고 있다.

user 객체에 sayHi를 표현식으로 할당. 이렇게 객체 속, 프로퍼티에 할당 된 함수를 메서드 라 함.

 

단축해서 쓰는 방법이 있다.

요즘 프레임워크에선 단축해서 전부 작성하는듯.

 

메서드와 this

this를 이용하면, 지금 여기 이곳의 객체의 동등한 선상에 존재하는 프로퍼티에 있는 정보에 접근하는게 가능하게 하는 키워드

이 메서드를 호출할 때 사용한 객체가 이것. 을 말하고 있음. => 현재 객체

 

물론 this를 사용하지 않고, 외부에서 참조해 접근하는 방법도 쓸 수 있다.

- 이 경우 객체를 잘못 덮어쓰면 참조하는 부분이 문제가 발생할 수 있다고 함.

 

this는 실행 하는 곳(컨텍스트)에 따라 결정된다.

 

동일한 기능을 하는 메서드를 

어떤 데이터를 소지하고 있는 객체에 따라 결과가 달라진다.

 

그래서 단순하게는 이런 기능을 만들 수 있다.

 

동일한 기능을 하는 this.현금뿌리기총(머니건)을

돈을 많이 소지하고 있는 사람에게 할당하면 1억을 뿌리고

돈을 적게 가지고 있는 사람에게 쥐어주면 동작하지 않듯...

 

.

 

화살표 함수는 this 가 없음. 외부에서 this를 가져옴.

 

 

- new 연산자 생성자 함수

 

생성자 함수는 첫글자가 대문자에 new 가 붙는거

생성자란 무엇인가... 사수가 붕어빵틀이라고 했는데. 근데 다른곳에서 클래스랑 헷갈릴듯.

 

예를들면 동일한 기능을 하지만, 이름만 다른 여러객체를 쉽게 만들 수 있게 한다.

 

온라인모바일게임에서 계정 리세마라 하는 경우 많이 호출 될 함수다...

 

new.target 생성자 함수에 대한 내용인데, 음.. 잘 안쓰인다고 함.

잉는 뭐, new 생성자로 만들어졌는지 확인하는 친구라서 근데 이걸 쓰면 반대로 hack 같은 느낌으로 

 

그, 모던 JS 본문에 나와있듯 편법으로 new 생성자를 이용해서 객체를 만든 것 처럼 활용해서 쓸 수 있다.

function User(name) {
  if (!new.target) { // new 없이 호출해도
    return new User(name); // new를 붙여줍니다.
  }

  this.name = name;
}

let john = User("John"); // 'new User'를 쓴 것처럼 바꿔줍니다.
alert(john.name); // John

 

위에 코드가 그 코드니까... (원문에도 있고. 쓸 사람은 필요하면 쓸 것 같음.)

 

아무튼 생성자에도 return 구문을 때릴 수 있는데, 보통은 없다.

 

원래 되돌려주는게 this에 다 저장되어 있는데, 그래서 강제로 객체를 리턴하면 this대신에 객체가 리턴될거고

원시형은 무시!

반대로 처음으로 돌아가서 빈 return을 하면 this가 리턴 됨.

 

let add = new Add() 처럼 써야하지, let add = new Add괄호생략은 좋지 않음.;;;;;;;

 

옵셔널 체이닝

새로운 문법이다.

쩜찍어서 객체 접근방법을 쓰다보면 에러가 나는데, 에러나지 않고 무시하는 옵셔널하게 스무스하게 넘어간다.

?. 이니까 능구렁이 담넘어가듯이 조심해서 쓸 것.

 

아. 아까 저~ 위에서 this랑 조합해서 머니건을 쥐어주었는가 안쥐어주었는가 체크할 떄 좋겠다.

읽기/삭제는 되지만, 쓰기론 쓸 수 없다.

 

 

심볼형

이친구는 좀 특이한 친구이다.

유니크한 자료형이기 때문에, 여러개를 만들어도 다 다른 친구들이다.

 

즉, 일반적인 자료형과 궤를 좀 달리하는 심볼.

유일무이한 천상천아 유아독존의 자체스팩이 있는
특이한 형태로 되어있기 때문에, 문자형 같은걸로 자동으로 변환되지 않는다.

 

선언하면서 "설명"을 입력하면, 그 "설명" 프로퍼티에 접근해서 설명을 찍어봐야 그게 문자로 나온다.

 

사용처는 주로 다른곳에서 가져온 비슷한 라이브러리 충돌을 막기 위해 쓸 수 있곘다.

for ... in 은 불가능하고, Object.assign으로 복사해낼 순 있다.

 

 

전역심볼이란 특수한 것으로 여기저기서 (본문예제에서) id 라는 심볼을 만들었으면 가져다 써야하는 경우,

Symbol.for('id') 같은걸(for!) 이용해서 전역에다 생성해서 가져다 쓴다고 생각 하면된다.

- 존재하지 않으면 거기서 새 심볼을 만드니까 주의.

 

전역심볼은 description 없음. keyFor 를 쓸 것. 이걸로 전역심볼인지 구분할 수 있을듯

 

객체 원시형으로 변환

 

ToPrimitive

-> 원형으로.............  일반적으로 자동으로 변환한다는 의미라, 특정 연산을 하게되면 절로 문자형, 숫자형으로 변환되는 걸 이야기한다.
근데 가~ 끔 ... 가~ 끔 디폴트상태라고 하는 애매~ 한 상황에 빠지는데, 이땐 디폴트 선언을 해버린다.

 

보통은 Date 객체 빼놓고 모든 내장 객체는 알아서 잘 변환하고, 기본적으로 사용할 수 있는 적당한 녀석으로 추천해주는데,

 

우리가 만든 커스텀한 객체인 경우, 근데 이 객체가 다양한 타입의 프로퍼티를 소유하고 있다면,

연산에 따라, 적정한 toPrimitive를 생성해서, 힌트를 제공해 더 좋은 결과로, 더 좋은 코드로 나아가는 길라잡이가 될 수 있다.

 

(뭐, 보통은 toString, 이나 valueOf로 튀어나오지만...) 그리고 이친구들은 객체도 반환할 수 있.....

 

...그래서 일반객체는 힌트없이 object를 alert 찍으면 [object Object] 뜨는것.

귀찮으면 toString()을 만들어서 처리해주자. ... .... ... 이런걸 가르쳐도 되는것인가! ㅎㅎ

 

아무튼 과거랑 달리 심볼.toPrimitive는 새로 만들어졌으니 무조건 원시형으로 반환하도록 하자. 에러나지않게.

 

...

 

끝!

'프론트 > 모던JS요약' 카테고리의 다른 글

6장 - 함수 심화 학습(~나머지 매개변수와 전개 문법 까지)  (0) 2021.03.09
5장 - 자료구조와 자료형  (0) 2021.03.07
4장 - 객체(0)  (0) 2021.01.21
3장 - 코드품질(1)  (0) 2021.01.16
3장 - 코드품질(0)  (0) 2021.01.13

+ Recent posts