카테고리 없음

14.클로져 /틸드 연산자~

에밀오구 2023. 3. 3. 09:17

🚩부트캠프를 통해 얻고 싶은 나의 목표.

- 하루 평균 3시간 자기주도학습능력(몰입의 경험) -> 블로그 작성/ 플래너 작성   

=> TODAY SCORE: 60점

-앤트리 개발자 수준의 프론트 개발 실력 쌓기 -> 부트캠프 과제 기한 밀리지 않기!!!(매우 중요)

=> TODAY SCORE: 70점

- 주니어 개발자 수준의 협업능력과 커뮤니케이션 능력 -> 스터디 클럽 운영

 => TODAY SCORE: 70점

- 자바스크립트 딥다이브 책 정독 1회 -> 적극적인 스터디 활동

 => TODAY SCORE: 20점

🙇‍♀️오늘을 돌아보며

keep 유지해야할 것: 하루 세끼를 잘 먹은 것. 

problem 고쳐야할 것 : 배웠던 부분중 어떤 부분이 이해하지 못했는 지 체크하지 않은 점. 

Try 시도해야할 것:

1. 당일 저녁에 무조건 오늘치 복습할 것.

 2. 이해한 된 부분을  블로그 하단에 꼭 작성할 것.


🏃‍♀️성장한 부분 -📚지식

1. 틸드 연산자 비트부정~:

프로그래머스 양꼬치  문제를 풀고 다른 사람의 풀이를 참고하니 모르는 문법이 있었다. 찾아보니 틸드 연산자였다. 틸드에 대해 알아보자. 틸드 ~ (물결)  :  피연산자로 들어온 숫자의 비트를 뒤집는 기능을 한다.  공식은 다음과 같다. 

-(K + 1)

만약 K가 3이라면 ~3 은 -4 가 된다.  Q. 3과 비트부정수와의 관계의 특징이 뭘까? 두 수의 관계의 특징을 알면  틸드 연산자를 잘 활용할 수 있지 않을까?   암튼 우선 ~틸드는 비트부정 연산자이다만 알고 양꼬치문제에 사용된 더블 물결에 대해 알아보자. 

더블 물결(~~) : Math.floor 와 같은 역할이다 . Q. 왜 더블 물결과  Math.floor 가 같은 역할을 할까? (~를 다시 붙일 때 떨어져나가는 현상을 이용했다한다. 더 자세하게 공부하고 싶지만 지금은 먼저 공부할 게 많으니 여기까지만 알아보자.)  Math.floor 보다 더 빠르다는 의견도 있다.

출처:  https://stackoverflow.com/questions/5971645/what-is-the-double-tilde-operator-in-javascript

양꼬치 문제 :https://school.programmers.co.kr/learn/courses/30/lessons/120830

//틸드를 이용한 양꼬치문제 풀이
function solution(n, k) {
    k-=~~(n/10); //K=K-Math.floor(n/10); 할인적용한 음료수의 갯수
    if (k < 0) k = 0; //만약 9인분 먹고 0개 음료수 먹었을때 0-Math.floor(0.9) = 0이 된다. 
    return n*12000+k*2000;
    
    
}

2.클로져

?함수와 함수가 선언된 어휘적(lexical) 환경의 조합.

 

어휘적 환경은 뭘까? 특정 코드가 작성되고 정의된 환경을 의미한다. 함수가 호출된 곳이 아니라 정의된 기준으로 생각하면 된다.  클로저는 쉽게 말해 함수와 그 함수가 접근할 수 있는 변수의 조합이란다. 그리고 모든 함수는 클로져다. Q 함수가 전역함수이고  전역함수 밖에있는 전역변수가 아예없을 때도  그 함수는 클로져에 속한다고 했다. 그 이유가 뭘까? 우선 나중에 물어보자. 

클로저의 특징.

  • 함수 내에 데이터를 보존할 수 있다.
  • 함수의 일부만 호출하거나 프로세스가 완성전 중간 단계를 저장할 수 있다. with 커링함수
  • 모듈 패턴을 이용하면 특정 데이터를 다른 코드의 실행으로부터 보호할 수 있다. 

클로저의 활용.

  • 데이터를 보존하는 함수
  • *커링 
  • *묘듈 패턴

 커링함수는 뭘까요?

더보기

커링함수란? 여러 전달인자를 가진 함수 함수를 연속적으로 리턴하는 함수입니다.

함수의 일부만 호출하거나, 일부 프로세스가 완료된 상태를 저장하기에 용이합니다.

2-2.모듈 패턴

모듈 패턴, class가 없던 이전 클로저의 활용.

모듈? 코드를 모아둔 하나의 파일을 의미합니다. 수많은 *로직들을 재사용할 수 있는 단위로 구획화시켜서 모듈이라는 형태로 떼어내서 또다른 프로그램에 부품으로 사용하는 기법 / 부품들을 칭합니다. 아주 쉽게 말하면 하나의 자바스크립트 파일입니다. 그리고 모듈 패턴이란 정형화된 코딩 기법 입니다.(자세히는 나중에 알아봅시다.)자바스크립트에서는 모듈 module이라는 개념이 분명하게 존재하지 않습니다. 하지만 자바스크립트가 구동되는 *호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있습니다.  모듈은 다른 모듈에 의존적이지 않고 독립적이여야 합니다.  

Q 로직이란?

더보기

로직이란? 어떤 프로그램을 만들 떄의 논리적인 흐름을 말합니다. 예를 들어 1부터 9까지 곱하는 프로그램인데 추가로 입력값을 더 받는 다면 이는 프로그램 로직이 충돌한다고 말할 수 있습니다. 

Q호스트 환경이란? 

더보기

호스트 환경이란 자바스크립트가 구동되는 환경을 의미합니다.  호스트 환경  안에 JS 런타임이 있는 포함관계로 생각하면 됩니다.  브라우져, node.js는  호스트 환경이라고 볼 수 있습니다. - 김민재님 답변 

모듈의 장점 

  • 재활용성이 높다  
  • 유지보수성이 높다.
  • 필요한 로직만 로드할 수 있어서  메모리의 낭비를 줄임.
//함수 앞에 export를 하면 현재함수가 모듈의 기능으로 내보낼 수 있다.
export function greeting(){  
	console.log('hello');

}
//import를 이용해 외부에 있는 모듈 가져오기

Q 구체적으로 모듈은 어떤 파일이 모듈이라 볼 수 있나요? (답변 대기중)

모듈의 특성

  • 다른 모듈에 독립적이여야 합니다.
  • 외부 코드 실행을 통해 모듈의 속성이 훼손 되지 않아야 합니다.  => 캡슐화 ? 
  • 제한적으로 노출된 인터페이스에 의해 변경되어야 합니다. => 정보 은닉/ 클로져와 유사 

 Q. 정보은닉과 캐슐화의 정확한 개념이 뭘까? (답변 대기중)


📚종합퀴즈 오답풀이 

const Subject = function () {
  const observers = [];

  return {
    subscribeObserver: function (observer) { observers.push(observer); },
    unsubscribeObserver: function (observer) {
      const index = observers.indexOf(observer);
      if (index > -1) { observers.splice(index, 1); }
    },
    notifyObserver: function (observer) {
      const index = observers.indexOf(observer);
      if (index > -1) { observers[index].notify(); }
    },
    notifyAllObservers: function () { 
			for (let i = 0; i < observers.length; i += 1){
				observers[i].notify()
			}
		},
  };
};

const Observer = function (observerName) {
  let name = observerName;
  return {
    getName: function (name) { console.log("Observer Name:" + name); },
    notify: function () { console.log("Observer " + name + " is notified!"); },
  };
};

const subject = Subject();
const kimcoding = Observer('kimcoding');
const parkhacker = Observer('parkhacker');

subject.subscribeObserver(kimcoding);
subject.subscribeObserver(parkhacker);

subject.unsubscribeObserver(kimcoding);
subject.notifyAllObservers();

다시보기&nbsp; 흑

2. ES6 주요 문법

let 키워드, const 키워드, *템플릿 리터럴 등이 이에 포함됩니다. ES6의 주요 문법 spread/rest문법과 구조분해, 그리고 화살표 함수에 대해 알아봅시다. Q. 템플릿 리터럴은 뭔가요?  

더보기

템플릿 리터럴이란 백틱문자`` 를 이용한 태그가 지정된 템플릿입니다.

`${expression1} 와 ${expression2} `

2. spread/rest 문법

rest문법과 spread 문법은 모양새가 똑같지만 리턴하는 방식이 달라 둘을 확실히 구분할 수 있어야 합니다. 

파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다.

 

 

 

 

 

 

다시보기 2 흑흑..

클로저 더 공부하기 https://ko.javascript.info/closure

 

 

변수의 유효범위와 클로저

 

ko.javascript.info

console.log(sum.apply(null, numbers));

함수 내장 함수중에 apply 가 있는거같다.  Q. apply 가 뭐죠?  -> 사실 미래의 나에게 건네는 질문같은 겁니다...  지금의 나는 오늘 복습 분량을 끝내는 것도 먹차기에 슬프진 않고 암튼 그렇다.