14.클로져 /틸드 연산자~
🚩부트캠프를 통해 얻고 싶은 나의 목표.
- 하루 평균 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 커링함수
- 모듈 패턴을 이용하면 특정 데이터를 다른 코드의 실행으로부터 보호할 수 있다.
클로저의 활용.
- 데이터를 보존하는 함수
- *커링
- *묘듈 패턴
Q 커링함수는 뭘까요?
커링함수란? 여러 전달인자를 가진 함수를 함수를 연속적으로 리턴하는 함수입니다.
함수의 일부만 호출하거나, 일부 프로세스가 완료된 상태를 저장하기에 용이합니다.
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();
2. ES6 주요 문법
let 키워드, const 키워드, *템플릿 리터럴 등이 이에 포함됩니다. ES6의 주요 문법 spread/rest문법과 구조분해, 그리고 화살표 함수에 대해 알아봅시다. Q. 템플릿 리터럴은 뭔가요?
템플릿 리터럴이란 백틱문자`` 를 이용한 태그가 지정된 템플릿입니다.
`${expression1} 와 ${expression2} `
2. spread/rest 문법
rest문법과 spread 문법은 모양새가 똑같지만 리턴하는 방식이 달라 둘을 확실히 구분할 수 있어야 합니다.
파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다.
클로저 더 공부하기 https://ko.javascript.info/closure
변수의 유효범위와 클로저
ko.javascript.info
함수 내장 함수중에 apply 가 있는거같다. Q. apply 가 뭐죠? -> 사실 미래의 나에게 건네는 질문같은 겁니다... 지금의 나는 오늘 복습 분량을 끝내는 것도 먹차기에 슬프진 않고 암튼 그렇다.