'javascript'에 해당되는 글 5건

bind는 this를 변경 해주는 내장 메서드로 모든 함수에서 사용할 수 있습니다.

다음 예제는 this.foo는 전역으로 state 내의 foo는 지역으로 선언되어 있습니다.

(예1)처럼 bar객체를 생성해서 사용하면 전역의 this.foo 즉 10을 반환합니다.

state가 전역으로 선언되었고, this.foo도 전역에 있음으로 이를 반환하는 것입니다.
만일 전역에 this.foo가 없다면 어떻게 될까요?

브라우저 환경에서는 windows.foo를 찾게 되는데, windows.foo라는 것은 없으니 undefined라고 출력됩니다.

그렇다면 state내부에 있는 foo를 읽어오려면 어떻게 해야 할까요?

(예2)처럼 호출하면 지역의 state내의 foo, 즉 50 반환합니다.
이렇게 직접 호출하면 문제는 없지만 반복해서 여러번 호출해야 한다면 객체를 생성해서 사용하는 것이 편합니다.

객체를 생성해서 사용한 (예1)의 경우처럼 전역을 읽어오거나, undefined되는 것을 방지하기 위에서 (예1)에서 생성한 bar를 state와 binding시켜 새로운 객체를 생성하면 (예3)처럼 지역의 50을 반환하게 됩니다.

설명을 하기위해 예1, 예3의 과정을 거쳤으나 (예4)와 같이 바로 binding해서 사용하면 됩니다.

this.foo = 10
let state = {
  foo: 50,
  getFoo: function() { return this.foo }
}

// (예1)
let bar = state.getFoo
console.log(`전역 반환: ${bar()}`) // 10

// (예2)
state.getFoo()
console.log(`지역 반환: ${state.getFoo()}`) // 50

// (예3)
let bindBar = bar.bind(state)
console.log(`binding: ${bindBar()}`) // 50

// (예4)
let foobar = state.getFoo.bind(state)
console.log(`직접 binding: ${foobar()}`) // 50

소수점의 올림, 버림, 반올림이 필요할 때는 표준 내장 객체인 Math를 사용합니다.

물론 Math객체 외에도 여러가지 방법이 있지만 Math객체를 사용하는 것이 편합니다.

Math객체는 이밖에도 30여가지의 메소드를 포함하고 있어 소수점 외에 다른 수학적 처리를 위해서도 많이 사용되는 객체입니다.

소수점과 관련된 메소드는 다음과 같습니다.

Math.ceil( x )     : 올림. 인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다.
Math.floor( x )   : 버림. 인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환합니다.
Math.round( x ) : 반올림. 숫자에서 가장 가까운 정수를 반환합니다.

아래 리스트는 mozilla에서 제공하는 MDN Web Doc에 나오는 Math객체의 메소드 리스트입니다. 참고하세요.

1. Math.abs()
2. Math.acos()
3. Math.acosh() (en-US)
4. Math.asin() (en-US)
5. Math.asinh() (en-US)
6. Math.atan() (en-US)
7. Math.atan2() (en-US)
8. Math.atanh() (en-US)
9. Math.cbrt()
10. Math.ceil()
11. Math.clz32() (en-US)
12. Math.cos() (en-US)
13. Math.cosh() (en-US)
14. Math.exp()
15. Math.expm1() (en-US)
16. Math.floor()
17. Math.fround()
18. Math.hypot() (en-US)
19. Math.imul()
20. Math.log()
21. Math.log10() (en-US)
22. Math.log1p() (en-US)
23. Math.log2()
24. Math.max()
25. Math.min()
26. Math.pow()
27. Math.random()
28. Math.round()
29. Math.sign()
30. Math.sin()
31. Math.sinh()
32. Math.sqrt()
33. Math.tan()
34. Math.tanh()
35. Math.trunc()

JSON.stringify(object, replacer, indent)

• 1번째 인자: object - 변환할 객체.
• 2번째 인자: replacer - 함수를 이용해서 필터로 사용.
                 모든 객체를 변환할 경우는 생략해도 되지만, 3번째 인자를 사용하기 위해서는 null을 입력합니다.
• 3번째 인자: indent - 들여쓰기 space 갯수

아래 예제를 참고하세요.

첫번째 예제는 object만 변환한 예제이고,
두번째 예제는 들여쓰기는 하고 replacer는 사용하지 않은 예제, 그리고 마지막
세번째 예제는 replacer를 사용한 예제입니다.

( 예제1: object만 변환 )

// 객체 생성
const students = []
students.push({ 이름: '봄이', 국어: 87, 영어: 88, 수학: 89 })
students.push({ 이름: '여름이', 국어: 85, 영어: 81, 수학: 95 })
students.push({ 이름: '가을이', 국어: 67, 영어: 85, 수학: 80 })

// 출력
console.log(JSON.stringify(students))

( 예제1 결과 )

[{"이름":"봄이","국어":87,"영어":88,"수학":89},{"이름":"여름이","국어":85,"영어":81,"수학":95},{"이름":"가을이","국어":67,"영어":85,"수학":80}]

( 예제2: 들여쓰기는 하고 replacer는 미사용 )

// 객체 생성
const students = []
students.push({ 이름: '봄이', 국어: 87, 영어: 88, 수학: 89 })
students.push({ 이름: '여름이', 국어: 85, 영어: 81, 수학: 95 })
students.push({ 이름: '가을이', 국어: 67, 영어: 85, 수학: 80 })

// 출력
console.log(JSON.stringify(students, null, 2))

(예제2 결과)

[
  {
    "이름": "봄이",
    "국어": 87,
    "영어": 88,
    "수학": 89
  },
  {
    "이름": "여름이",
    "국어": 85,
    "영어": 81,
    "수학": 95
  },
  {
    "이름": "가을이",
    "국어": 67,
    "영어": 85,
    "수학": 80
  }
]

( 예제3: replacer를 사용한 예제 )

// 객체 생성
const students = []
students.push({ 이름: '봄이', 국어: 87, 영어: 88, 수학: 89 })
students.push({ 이름: '여름이', 국어: 85, 영어: 81, 수학: 95 })
students.push({ 이름: '가을이', 국어: 67, 영어: 85, 수학: 80 })

// replacer로 사용할 함수 선언
// value가 string인 key를 필터링
// 즉, 이름key의 value는 문자열이기 때문에 제외하고, 나머지 국영수 만 출력
function replacer(key, value){
  if(typeof value === 'string'){
    return undefined;
  }
  return value;
}

// 출력
console.log(JSON.stringify(students, replacer, 2))

( 예제3 결과 )

[
  {
    "국어": 87,
    "영어": 88,
    "수학": 89
  },
  {
    "국어": 85,
    "영어": 81,
    "수학": 95
  },
  {
    "국어": 67,
    "영어": 85,
    "수학": 80
  }
]

아주 유용한 CDN(Contents Delivery Network) 검색 사이트를 소개한다.
원하는 framework의 이름을 입력하고 검색하면 CDN full URL을 검색할 수 있다.
다음 사진은 검색 전후의 사진이다. jquery로 검색하면 관련 URL이 846개 검색되는 것을 확인한 수 잇다.

다음은 date() 메소드를 출력하는 코드와 출력화면 이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Developer N">
  <title>date methode</title>
  <script>
    setInterval(function () {          // 일정한 시간 간격으로 작업을 반복 실행
      var date = new Date();           // Data() 객체 생성
      document.body.innerHTML = date;  // date 전체 요소 출력
    }, 1000);                          // 1초 간격
  </script>
</head>
<body>
  
</body>
</html>

Thu Oct 24 2019 20:14:11 GMT+0900 (한국 표준시)

그런데 위의 화면처럼 연도, 날자, 시간 등을 전부 사용하기 보다는 필요한 부분만 골라서 사용하는 경우가 있다.

이럴경우 각각의 요소들은 어떻게 출력하는지 알아본다.

다음 코드는 년, 월, 일, 시, 분, 초를 각각 분리하여 추출하는 방법을 나타내고 있다.

출력은 편의상 추출된 데이터를 전부 팝쳐서 한번에 출력하고 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Developer N">
  <title>date methode</title>
  <script>
    setInterval(function () {                     // 일정한 시간 간격으로 작업을 반복 실행
      var date = new Date();                      // Data() 객체 생성
      var currenYear = date.getFullYear();        // Year 추출
      var currenMonth = ( date.getMonth() + 1 );  // Month 추출 
      var currenDate = date.getDate();            // Date 추출
      var currentHours = date.getHours();         // Hours 추출
      var currenMinutes = date.getMinutes();      // Minutes 추출
      var currenSeconds = date.getSeconds();      // Seconds 추출
      var dateAll = date + "<br />" +             // 출력 data 편집
                    currenYear+"년 <br />" + 
                    currenMonth+"월 <br />" +
                    currenDate+"일 <br />" + 
                    currentHours+"시 <br />" + 
                    currenMinutes+"분 <br />" + 
                    currenSeconds+"초 <br />" + 
                    "입니다." ;
      document.body.innerHTML = dateAll;  // dateAll 출력
    }, 1000);                             // 1초 간격
  </script>
</head>
<body>
  
</body>
</html>

출력된 화면은 다음과 같다.

Thu Oct 24 2019 20:52:05 GMT+0900 (한국 표준시)
2019년
10월
24일
20시
52분
5초
입니다.

일부분만 사용할 경우 필요한 부분만 적절하게 편집하여 사용하면 된다.