게시 됨 업데이트 됨typescript2분안에 읽기 (약 244 단어)

js bind

  • typescript 코드다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface myType {
  name: string;
  age: number;
}

const me: myType = {
  name: 'name',
  age: 99,
};

[1, 2, 3, 4, 5].forEach(function (this: myType, value, index) {
  console.log(this);
  console.log(value, index);
}, me);
// 0 1 { name: 'name', age: 11 }
// 1 2 { name: 'name', age: 11 }
// 2 3 { name: 'name', age: 11 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class MyClass {
  me: Person;

  constructor(person: Person) {
    this.me = person;
  }

  someFunction() {
    [1, 2, 3].forEach(function (value) {
      console.log(value, this);
    });
  }

  someFunctionBindThis() {
    [1, 2, 3, 4].forEach(function (this: MyClass, value) {
      console.log(value, this);
    }, this);
  }

  someFunctionWithArrow() {
    [1, 2, 3].forEach((value) => {
      console.log(value, this);
    });
  }
}

const myclass = new MyClass(me);
myclass.someFunction();
// 1 undefined
// 2 undefined
// 3 undefined

myclass.someFunctionBindThis();
// 1 MyClass { me: { name: 'name', age: 11 } }
// 2 MyClass { me: { name: 'name', age: 11 } }
// 3 MyClass { me: { name: 'name', age: 11 } }

myclass.someFunctionWithArrow();
// 1 MyClass { me: { name: 'name', age: 11 } }
// 2 MyClass { me: { name: 'name', age: 11 } }
// 3 MyClass { me: { name: 'name', age: 11 } }
  • bind 함수를 배워보았다
  • bind를 배우면서 function과 arrow function 차이를 실감하게 되었다
  • arrow function은 this를 바인딩하지 않는다
  • 고로 arrow function은 bind를 사용할 수 없다
  • 이 함수 표현은 메서드 함수가 아닌 곳에 적합하다

참고

 게시 됨 업데이트 됨javascript1분안에 읽기 (약 139 단어)

setTimeout Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const delay = (ms) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      resolve(ms);
    }, ms)
  );
};
const main = async () => {
  console.log(`main start`);

  const result = delay(1000);
  result.then(console.log);
  console.log(`main end`);
};

const main2 = async () => {
  console.log(`main start`);

  const result = await delay(1000);
  console.log(result);
  console.log(`main end`);
};

main();
// main2();
  • promise를 알려주는 여러 글, 영상에서 setTimeout으로 예제로 진행한다
  • setTimeout을 promise로 감싸면 딜레이를 만들 수 있다
  • promise가 처음에 엄청 헷갈리는데, 막힐 때마다 이 예제를 먼저 작성해보고 적용해보았던 것 같다

참고

 게시 됨 업데이트 됨nodejs1분안에 읽기 (약 142 단어)

forEach await 안되는 문제

상황

  • 배열로 저장되어 있는 데이터를 forEach로 순회하면서 db에 INSERT하는 쿼리를 만들려고 했다
  • 근데 비동기적으로 동작했다
1
2
3
await data.forEach(async (element: ArticlePreview, idx: number) => {
  // insert query
});

해결

1
2
3
4
5
6
7
8
9
for (const element of data) {
  // ...
      try {
        const a = await databaseConnection.query(queryString, [
          // ...
        ]);
      }
      // ...
    }
  • for of에서는 await을 통해서 순차적으로 처리가 가능했다

시도해보지 않은 다른 방향

참고

 게시 됨 업데이트 됨javascript몇 초안에 읽기 (약 97 단어)

string to number 요상한 문법 (js)

  • string type 변수앞에 + 기호를 넣으면 number type 으로 캐스팅된다…
  • 이런 문법은 wow…
example.ts
1
2
3
4
5
6
7
function squareValue(x: any) {
  return Math.pow(x * 1, 2);
}

function squareValue(x: string | number) {
  return Math.pow(+x, 2);
}
  • any 사용을 피하라는 예제를 코드를 보는데 우연히 알게되었다

참고

 게시 됨 업데이트 됨nodejs1분안에 읽기 (약 143 단어)

SyntaxError: Unexpected end of input

  • vscode에서는 아무 에러, 경고없이 잘 실행되었는데,
  • SyntaxError-Unexpected-end-of-input 에러가 날 때가 있다
  • 나의 경우에는 api 서버가 host가 달라 cors mode로 리퀘스트를 보내야하는데
  • ‘no-cors’ mode로 보내서 생긴 에러이다
  • 그 외에도 api서버에서 연산이 잘못되어 응답을 반환하지 않을 때에도 똑같은 에러가 나왔다
  • 그냥 서버로부터 결과를 제대로 받지 않으면 생기는 오류 같다
 게시 됨 업데이트 됨javascript몇 초안에 읽기 (약 79 단어)

Clamp number (js)

1
2
3
4
const clampNumber = (num, a, b) =>
  Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
console.log(clampNumber(-10, 0, 5)); // 0
console.log(clampNumber(10, 0, 5)); // 5
  • 지정한 범위가 있고, 그 범위를 벗어나는 값이 들어왔을 때,
  • 그 입력을 최소, 최대값 치환할 때 유용하다

참고

 게시 됨 업데이트 됨javascript3분안에 읽기 (약 399 단어)

js object access by index


의미없는 변수이름들..

  • api를 사용하다보면 주기적으로? 변수명이 바뀌는 상황이 나온다
  • 카카오 맵 api 가 그러하다
  • 이렇게 직접 객체의 변수에 접근해서 사용하는 것은 바람직하지 않다고 한다
  • 그런데 객체의 값에 직접 접근하고 싶은경우가 있을 수 있다
  • 하지만 키의 이름은 주기적으로 바뀐다
  • 그래서 obj.key 이런식의 접근은 당장에는 가능하나,
  • 언젠가는 동작하지 않는 코드가 된다
  • 키의 이름이 주기적으로 바뀌는 것을 무시하고 접근한다고 생각하니까
  • 인덱스로 접근하는 방법을 알아보았다

access by index

access by index
1
2
3
4
5
a = { la: 1, ma: 2 };
Object.keys(a)[0]; // 'la'

a.la; // == 1
a[Object.keys(a)[0]]; // == a.la
  • Object.keys(a)를 통해 key의 배열을 받을 수 있다
  • 이를 통해서 인덱스를 통한 접근이 가능해진다
인덱스 부여 실험
1
2
3
4
5
a = { ma: 2, la: 1 };
Object.keys(a)[0]; // 'ma'

a = { la: 1, ma: 2 };
Object.keys(a)[0]; // 'la'
  • 인덱스가 어떻게 부여되나 실험을 해보았는데,
  • 직관적으로 왼쪽에서 오른쪽으로 번호가 매겨진다
  • 키의 알파벳이나, 그 안에 들어있는 값이나 일절 상관없다

참고

 게시 됨 업데이트 됨web2분안에 읽기 (약 225 단어)

JSON.stringify 예쁘게 출력하기

1
JSON.stringify(my, null, 2);
  • 두번째 인자로 null 과
  • 세번째 인자로 space argument 를 설정해주면된다
  • space argument 는 들여쓰기를 간격에 대한 것이다

TMI

비교해보기

example
1
2
3
4
5
6
7
8
9
10
11
let my = {
  key: 'a',
  altKey: false,
  code: 'KeyA',
  ctrlKey: false,
  keyCode: 65,
  shiftKey: false,
};

console.log(JSON.stringify(my));
console.log(JSON.stringify(my, null, 2));
  • F12 로 개발자도구를 열고, 콘솔에 복붙해보자

html로 출력하고싶을 때

example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<pre><code id="message"></code></pre>

<script>
  'use strict';

  const message_span = document.querySelector('#message');

  let my = {
    key: 'a',
    altKey: false,
    code: 'KeyA',
    ctrlKey: false,
    keyCode: 65,
    shiftKey: false,
  };

  message_span.innerHTML = JSON.stringify(my, null, 2);
</script>
  • 로그로 남기는 것이 아니라 html로 그 결과를 보여주고 싶을 때에는
  • 위처럼 pre태그 안에서 보여주면된다

참고

카테고리

아카이브

광고

×