[자바스크립트] 자바스크립트-기초-스터디-공유

Dan·2022년 11월 28일
JavaScript
0

자바스크립트

목록 보기
2/4

기본 자료형과 연결된 객체에서 자주 사용하는 기능

Number객체

메소드

  • toFixed()
    const l = 123.45678
console.log(l) //123.45678
let a = l.toFixed(3)
console.log(a) //123.457 (반올림)
console.log(l) //123.45678 (원시타입-원본은 안바뀜)
console.log(l.toFixed(2)) //123.46
  • Number.isNaN() - 숫자가 될 수 있는가?
    console.log(Number.isNaN('1')) //false
console.log(Number.isNaN('a')) //false
console.log(Number.isNaN(1)) //false
console.log(Number.isNaN(Number('1'))) //false
console.log(Number.isNaN(Number('a'))) //true

const m = Number('a')
console.log(m===NaN) //NaN은 비교 연산자로 비교 불가능
  • Number.isFinite() - 유한한 숫자인가 ?
    console.log(10/0) //Infinity
console.log(-10/0) //-Infinity
console.log(Number.isFinite(10/0)) //false 
console.log(Number.isFinite(-10/0)) //false
console.log(Number.isFinite(1)) //true
console.log(Number.isFinite(10)) //true

const n = 10/0
console.log(n===Infinity) // true -> Infinity는 비교연선자로 비교 가능

String 객체

주요 속성 및 메소드

  • trim() - 문자열 양 끝 공백 없애기
  • split() - 문자열 특정 기호로 자르기
  • indexOf() - 문자열의 특정 인덱스 (앞에서부터)
  • length - 속성. 문자열의 길이

기본 자료형과 관련된 객체 외 자바스크립트가 기본적으로 제공하는 내장 객체 (JSON, Math)

JSON 객체

문자열로 데이터를 주고 받는 방식에는 CSV, XML, CSON 등 다양한 자료 표현 방식이 있음
현재 가장 많이 사용되는 자료 표현 방식이 JSON 표현 방식임

  • JSON 형식의 규칙
    1. 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있음 (함수 등 사용 불가)
    2. 문자열은 반드시 큰따옴포로 만들어야함
    3. 키에도 반드시 따옴표를 붙여야 함

대부분의 프로그래밍 언어는 JSON 형식의 문자열을 읽어들이는 기능이 있음
그래서 네트워크를 통해서 각각의 프로그래밍 언어로 만든 애플리케이션들이 데이터를 교환할 때 JSON 형식을 활용함

JSON 객체의 메소드는 stringfy()와 parse() 2가지 밖에 없음

  • JSON.stringfy() - 자바스크립트 객체를 JSON으로 변환하는 메소드
    const data = [{name:"kim",age:"22"},{name:"su",age:"28"}]
console.log(JSON.stringify(data)) 
//[{"name":"kim","age":"22"},{"name":"su","age":"28"}]
  • JSON.parse() - JSON문자열을 자바스크립트 객체로 전개할 때 사용하는 메소드
    const obj = [{name:"kim",age:"22"},{name:"su",age:"28"}]
const jsonString = JSON.stringify(obj) //object to json 
console.log(jsonString) 
//[{"name":"kim","age":"22"},{"name":"su","age":"28"}]
console.log(JSON.parse(jsonString)) //json to object
//[ { name: 'kim', age: '22' }, { name: 'su', age: '28' } ]

Math 객체

수학과 관련된 기본적인 연산을 할 때 사용할 수 있는 객체

속성 - 수학 상수

메소드

  • Math.random() : 랜덤 숫자 만들기 (0이상 1미만)
    const num = Math.random()
console.log("0-1 사이 랜덤 숫자",num) // 0.10076737500665445
console.log("0-50 사이 랜덤 숫자",num*50) //5.038368750332722
console.log("0-100 사이 랜덤 숫자",num*100) //10.076737500665445
  • Math.sqrt() :제곱
    const sqrt = Math.sqrt(4)
console.log(sqrt) //2
  • Math.floor() : 버림
  • Math.ceil() : 올림
  • Math.round() : 반올림
    const mathNum = 34.76
console.log(Math.floor(mathNum))//34
console.log(Math.ceil(mathNum))//35
console.log(Math.round(mathNum))//35
  • Math.pow(밑,지수)
    Math.pow(2,4) // 16

외부 스크립트 파일 읽어들이기

//index.html
<head>
	<script src="main.js"></script> // 
</head>

Lodash 라이브러리

외부라이브러리 : 다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해부는 것
유틸리티 라이브러리 : 개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리
underscore, lodash 등 다양한 라이브러리 존재.
lodash - 최근 많이 사용

  • 설치 방법 - lodash 홈페이지
<head>
    <!-- //파일 다운 -->
    <script src="./lodash.min.js"></script>
    <!-- //cdn 방식 -->
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script> 
  </head>
  • CDN (Contents Delivery Network)
    • 한국에서 미국 서버에 있는 js 파일 가져다 쓰려면 전송속도가 느림
    • 이런 문제를 해결하기 위해 전 세계 여러 지역에 창고 서버를 만들어두어서 요청 시에 가장 가까운 지역에서 데이터를 전송 받을 수 있도록 만든 네트워크
  • min버전
    • 코드를 아래와 같이 집핑(zipping, 응축)한 파일을 의미함 (용량 감소 목적)
    /**
     * @license
     * Lodash lodash.com/license | Underscore.js 1.8.3 underscorejs.org/LICENSE
     */
    ;(function(){function n(n,t,r){switch(r.length){case 0:return n.call(t);case 1:return n.call(t,r[0]);case 2:return n.call(t,r[0],r[1]);case 3:return n.call(t,r[0],r[1],r[2])}return n.apply(t,r)}function t(n,t,r,e){for(var u=-1,i=null==n?0:n.length;++u<i;){var o=n[u];t(e,o,r(o),n)}return e}function r(n,t){for(var r=-1,e=null==n?0:n.length;++r<e&&false!==t(n[r],r,n););return n}function e(n,t){for(var r=null==n?0:n.length;r--&&false!==t(n[r],r,n););return n}function u(n,t){for(var r=-1,e=null==n?0:n.length;++r<e;)if(!t(n[r],r,n))return false;

메소드

기본적으로 lodash는 식별자를 이용함. (jQuery의 $와 같이)
javascript 는 와 $를 식별자로 사용할 수 있음

  • sortBy() - 정렬
  const books = [
            { name: "a", price: 12000 },
            { name: "b", price: 10000 },
          ];
          const sort = _.sortBy(books, (book) => book.price);
          console.log("sort",sort);
          // 0: {name: 'b', price: 10000} 1: {name: 'a', price: 12000}
          console.log("books",books)
          //0:{name: 'a', price: 12000} 1:{name: 'b', price: 10000}
	      //원본은 건들지 않음
  • 이 외에도 lodash document에서 다양한 메소드 확인 가능

기타 라이브러리

  • Luxon, data-fns : 날짜 라이브러리
  • Handsontable : 스프레드시트 출력하는 라이브러리리
  • D3.js ChartJS : 그래프를 그릴 수 있는 라이브러리
  • Three.js : 3차원 그래픽을 다루는 라이브러리

라이브러리를 많이 살펴볼 수록 자바스크립트로 할 수 있는 폭이 넓어짐
또한 라이브러리 코드를 읽어보면 잘 만드는 사람들이 어떤 식으로 작성하는지 알 수 있음

구글에서 popular javascript library 2021 등 키워드로 검색 추천

profile
Dan
이전 포스트

[자바스크립트] 데이터타입, rest operators, 구조분해 할당, 클래스

다음 포스트

[자바스크립트] 실행컨텍스트

0개의 댓글