Javascript A to Z
- 값이라고 정의된 것들은 변수에 넣을 수 있다.
- 객체, 함수도 값으로 규정해서 변수에 넣을 수 있다.
var x =10;
let y = 10;
const z = 10;
let x={
a:'a'
}
함수
- 함수 또한 값으로 취급하여 대입이 가능
- 자바스크립트 함수는 값을 무조건 반환
함수 정의문)
- 함수 정의문은 ; (세미콜론) 필요 없음
funtion foo() {
return 0;
//return이 없으면 undefinded
}
new foo() //명시적 return이 없어도 객체 반환함수 정의식)
- 함수를 값으로 취급할 땐 함수 이름을 생략 할 수 있다.
const bar = function bar(){}; //함수 정의 식
const bar = function () {};
//함수를 값으로 취급할 땐 함수 이름을 생략 할 수 있다.
bar(); //호출 가능 변수 bar
(function(){})();
//만들자마자 바로 호출하면 사용할 수 있음.
//이름이 없기때문에 다시 호출은 불가능.
//딱 한번 호출되어야하는 함수들일 때 사용 ex) 초기화
함수가 함수를 리턴)
function foo(x) {
x();//매개변수가 함수이므로 호출가능
//return 값;
return function(){
//function도 return 가능
};
}
//그러므로 함수도 전달 할수 있다.
foo(function(){ //파라미터로 넘긴 함수
});
const y = foo(function() {
});
//반환된 함수를 바로 실행도 할 수 있다.
//(callback 함수 또는 함수 합성, 1급 함수)
함수를 리턴하는 함수는 해당 함수에서 끝맺음을 지을 수 없고, 추가적인 작업이 필요할 때 사용된다.
*리액트의 HoC가 이런 경우라고 보면 된다.???
HoC: Higher-order Component
반복될 수 있는 코드들은, HOC 를 만들어서 해결해줄 수 있다. HOC 는, 하나의 함수인데, 함수를 통하여 컴포넌트에 우리가 준비한 특정 기능을 부여한다.
함수= 코드를 묶고 있는 값. 그 안에 코드가 있어 실행이 된다.
변형된 함수
재귀 호출에서의 함수
const foo = function foo(){
foo()
//재귀호출일때는 function이름 생략하면 안됨.
}화살표 함수
const foo = function (x) {
};
const bar = (x) => {
}
const bar = x => x*2;
console.log(bar(10))
>20
const x = 10;
const y = () => 10;
console.log(x,y());
>10,10단일 인자의 경우 괄호를 생략할 수 있다.
const bar2 = x =>{ return x*2 }
const y = (x, y) => x*y;
//이거는 함수가 한줄이라서 return 명시 안해도 됨const y = (x,y) => {
return x*2;
}cf) JavaScript의 모든 함수는 일급 객체이므로 익명 함수이기만 하면 람다라고 볼 수 있다. ???
-실행의 결과가 값으로 나오면 -> 식
foo호출의 값은 undefinded 따라서 함수 호출은 식!
;으로 마무리 (for each 함수 ->식)
-실행했더니 값이 안나오면 -> 문
if문 while문 swtich문 for문
;으로 마무리 하지 않음
new 연산자
const x ={
};
x.name=10; // 새로 추가 동적 바인딩
function foo() {
this.name=10; //this 사용하는것도 동적 바인딩
}- new연산자는 새로운 객체를 만들어냄
- 인스턴스 객체
- 누가 만든 객체인지 알수 있음
- new로 선언하면 javascript 엔진에서 빈 객체가 생성된다.
- 또한 "instanceof"로 인스턴스 객체의 원형을 알 수 있다.
const y = new foo();
/* foo {name:"10", constructor: Object}
name: "10"
<constructor>: "foo"
*/
if(y instanceof foo){
//y가 foo함수가 만든 객체냐?
}
console.log(y);
>10/*ES6*/
function foo() {
this.name = 10;
}
class bar {
constructor() {
this.name = 10;
}
}
console.log(new bar())
//bar { name: 10 }//propotype?
함수와 class가 다른점) 명시적인 부분이다.
class는 생성자를 명시적으로 볼 수 있음.
함수는 new를 붙여도 되고 안붙여도 됨.
class로 만들면 new를 붙여야 호출됨.
cf) javascript 관련된 운영체제 지식알아보기(javascript는 싱글 쓰레드 ... ),os가 브라우저라고 생각하고 os공부해보기, 호이스팅?의 차이 ?????
this
const person = {
name: '김민태',
getName() {
return this.name;
}
}
console.log(person.getName())
>김민태
const man = person.getName;
console.log(man());
>TypeError!!!1.getName을 실행
2.자바스크립트 엔진이 getName의 소유자를 확인//실행 context
3.소유자 = person임을 확인
4.김민태 출력
man을 실행하는 순간 호출자가 확인이 안된다.
->확인이 안되는 경우 전역 객체에서 찾게 된다.
->전역 객체(window)에서 찾을 수 없기 때문에 에러가 나왔다.
소유자가 베껴진다고 함.
Bind 함수
/*위의 코드에서 이어짐*/
button.addEventListener('click', person.getName);
//소유자가 벗겨짐
button.addEventListener('click',
person.getName.bind(person))
//소유자가 고정this가 들어있는 함수를 이곳저곳 붙이는 경우,
이벤트 리스너와 같이 함수에 붙이게 되는 경우 소유자가 벗겨진다.
그렇지만 bind를 통해 소유자를 고정시켜 주게 되는 경우 정상적으로 person이 값을 반환하게 된다.
//call , apply -> this를 조작할 수 있음. ????
클로저
스코프 영역 외에 있는 값을 들고 있는 경우를 클로저라고 한다.
값을 보호할때 많이 씀
funciton foo(x) {
return function bar() {
return x;
};
}
const f = foo(10);
console.log(f())const person = {
age: 10,
}
person.age = 500; //변조 가능
function makePerson() {
let age = 10;
return{
getAge(){
return age;
},
setAge(x) {
age = x>1 && x<130 ? x: age;
}
}
}
person.age = 500;//이렇게 쳐서 age가 맞지않게 바껴지면 안되니까 closer 사용.
let p = makePerson();
console.log(p.getAge());//10getAge 만이 age에 접근할 수 있음.
makePerson 클로저 함수가 반환할때 age 변수의 값을 캡처하여 값을 반환한다. 하지만 set 할 때 이상한 값으로 변조를 되기 싫다면 매번 값을 확인해야 하는 불편함이 있다.
https://medium.com/ibare-story/e252506f8525
JavaScript에서의 비동기
비동기 함수 setTimeout
function foo(){
console.log('앗싸')
}
setTimeout(foo, 5000);
setTimeout(function (x) {
console.log('앗싸')
setTimeout(function(y) {
console.log('웃씨');
}, 2000)
}, 1000);CallBack 지옥
비동기 함수를 사용하고, 순차적인 실행이 필요한 경우 중첩 callBack 지옥에 빠지게 된다
setTimeout(function () {
}, 2000);
}, 1000);
promise
promise는 비동기 함수들을 동기적으로 실행될 수 있도록 만들어 주는 함수이다.
//인스턴스 하나 리턴. then함수 들어있음
//resolve, reject 함수
//setTimeout 안에 있는 애만 resolve에 접근 할 수 있음 (closer...)
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('응답1'); //성공
}, 1000);
//reject(); //실패
});
//resolve(); // 이거를 호출하면 then에 입력된 함수 호출
//reject(); // catch에 입력된 함수 호출
p1.then(function(r) {
console.log(r);
}).catch(function() {
})
>응답1
resolve()를 호출하면 하위에 then에 선언되어 있는 함수를 호출하고, reject()를 호출하면 하위에 catch에 선언되어 있는 함수를 호출한다.
프로미스를 then에서 또 리턴하여 then을 이어줄 수 있다.
비동기함수: 비동기지만 동기코드 처럼 일차로 펴는
Aysnc & Await
setTimeout은 callback
const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
//delay함수 호출되면 promise 객체 리턴됨
//async 붙혀놓으면 await 쓸 수 있음
//await는 promise객체다. resolve가 되면 ...???
async function main () {
console.log('1');
await delay(2000); //1찍고 2초 기다렸다가 2 찍힘
console.log('2');
}
async function main2 () {
console.log('1');
try{
await delay(2000);
}catch (e) {
console.error(e);
}
console.log('2');
}
main();main 함수가 실행이 되면, 1을 찍은 후 2초 딜레이 후에 2를 출력한다. await 명령어를 변수로 받을 수도 있다.
promise 객체 앞에 await를 붙여주면 async 함수 내에서 마치 동기적인 것 처럼 비동기를 실행할 수 있다.
promise에서 reject를 반환하고,, try ~ catch로 감싸서 사용하는 경우에는 catch에 잡힌다.
try{
const x = await delay(2000);
}catch(e) {
console.error(e);
}
-커링???
closer는 항상 커링이 됨.
function foo(a,b,c) {
}
function foo(a) {
return function(b) {
return function(c) {
return a+b+c;
}
}
}Redux
Redux는 상태 관리 라이브러리 이다.
수많은 React 컴포넌트의 depth에서, 상위 또는 하위에서 사용하는 데이터를 각자 컴포넌트들이 공용으로 사용하게 되는 경우 데이터의 요청 흐름이 뒤죽박죽 섞이는 경우가 생긴다.
그런 점을 보완하기 위해 하나의 상태 관리해주는 부분이 몽땅 관리를 한다.
이렇게 되는 경우 실제 Dom에서 값이 반영되고, 일부 값이 변경되면 전체 화면이 깜빡 거리는 현상이 벌어집니다만, 이 점을 보완한 콘셉트는 VDom을 사용한다.
VDom <=> Dom
vdom으로 다른 점만 dom으로 전달
변경 사항들은 VDom에 반영이 되고, VDom과 Dom을 비교하여 변경된 사항만 실제로 반영하여 미친듯한 화면 깜빡임이 없는 점이 특징이다.
컴포넌트가 데이터를 못바꾸게 하자.
store의 상태를 바꾸지 못한다.
immutable 해야함.
