지구정복

[JavaScript] 정리 본문

데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js

[JavaScript] 정리

eeaarrtthh 2020. 11. 12. 10:08
728x90
반응형
SMALL

-자바스크립트 : 웹의 동작 및 기능을 구현시킨다.
-V8 엔진 : 자바스크립트 코드를 마이크로프로세서가 이해할 수 있는 더 낮은 수준의 언어 혹은 

              기계어로 번환해주는 역할
-ECMAScript : ECMA 인터내셔널에서 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어이다.
                    ECMA 262에는 스크립트 언어에 대한 명세를 담고있다.
                    즉, 자바스크립트는 ECMAScript 사양을 준수하는 범용 스크립트 언어이다.
-변수 차이 (var / let / const)
  var : 전역변수
  let : 재할당가능한 지역변수
  const : 재할당 불가능한 지역변수
-콜백함수 : 함수가 다른 함수 또는 자기자신 함수를 호출하는 것
-타이머 메소드 (
    setTimeout(함수, 초*1000) : 지정된 시간 이후에 함수 한 번만 실행
    setInterval(함수, 초*1000) : 지정된 시간마다 함수 실행
)
-배열
    다차원배열 만들기 및 출력
    함수의 매개변수 값 모를 때 arguments 매개변수값 받기
    비구조화 할당 : 여러 개의 변수를 배열화해서 할당하는 것
        전개연산자 ... 사용 : 비구조화할당시 남는 값들을 남은 변수에 다 할당시키는 것
            두 개의 배열 합치기 : let obj = [...one, ...two];
            함수와 같이 사용 : func1(...one);
            rest 파라미터 사용 : let func1 = function(...rest) {  }
                                             func1(...[1, 2, 3]);
-객체 : 자바스크립트에서 객체란 프로퍼티와 값으로 구성되어 있고 값이 함수인 프로퍼티는 메서드라고 한다.
    1. JSON 형태로 만들기
    2. 함수를 이용해서 객체 만들기
    3. 생성자를 이용해서 객체 만들기
    4. 클래스를 이용해서 객체생성
-프로토타입 : 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.
    자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받고 
    이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다.
    보통 같은 기능을 하는 메소드를 각 객체마다 만들면 메모리낭비가 일어나므로 해당 객체 프로토타입에 공통 메소드를 정의한다
-String 객체

    str.charAt(0) / str.substr(6, 5) / str.substring(6, 11) / str.slice(6, 11) / 
    str.indexOf('a') / str.lastIndexOf('a') / str.includes('a) / str.startsWith('a') / str.endsWith('a') /
    str.replace('a', 'b') / str.toLowerCase() / str.toUpperCase() / str.concat('bbb') / 
    str.split('-') / 


-bom : browser 조작용 객체
 dom : html 조작용 객체
 JSON : 자바스크립트에서 객체를 만들 때 사용하는 데이터형식

 

-내장객체의 내장생성자

   -Number : Number생성자로 숫자를 저장하면 객체타입이다.

        -메소드: 객체.toFixed(1) : 소수점 첫 째자리에서 반올림

   -Date

       -메소드 : 객체.getFullYear(); / 객체.getMonth(); 등등

   -Math

        -메소드: 올림 - Math.ceil(값) / 내임 - Math.floor(값) / 반올림 - Math.round(값) / Math.max / Math.min

                   Math.random()

   -Array

        -메소드: 배열합치기 - 배열명1.concat(배열명2) / 배열요소 반복 - forEach() 

        -map() 맵은 키에 다양한 자료형을 허용한다. 배열의 각 요소를 순회하면서 callback함수를 실행하고

         return되는 값을 배열로 만든다.

 

-map 형식

    -만들기 : [] 안에 프로퍼티와 값 형태가 들어간다.

    -열거자객체: map.entries()를 통해 전체 map데이터를 가져온 뒤 next()를 사용하여 맵의 인덱스를 순회한다.

    -map.keys() : 맵의 키만 가져오기 / map.values() : 맵의 값만 가져오기

-set 형식

    -set은 배열과 비슷하지만 중복값을 자동적으로 없애준다.

    -add() : 데이터 집어넣기

-json 객체 관련 메소드   

    -json을 문자열로 만들기 : JSON.stringify( json객체 );

    -문자열을 json으로 만들기 : JSON.parse( 문자열 );



1. 웹페이지 구성 프로그램 종류 html/css/javascript
2. 자바스크립트를 해석하는 엔진 v8
3. html
   <script type="text/javascript" src="./default.js"></script>
  외부js파일 사용법
4. 변수와 상수를 선언하는 법

   변수 : 데이터를 저장할 때 쓰이는 '이름이 있는 저장소' let 사용한다.

   상수 : 변화하지 않는 변수를 선언할 땐 const를 사용한다.
5. 함수선언과 사용
   선언적함수 : 함수의 이름이 존재하고 컴파일 시점에 함수 정보를 등록한다(함수의 호이스팅)
   함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식
   익명함수 : 이름이 없는 함수로 , 즉시 실행이 필요한 경우 사용한다.
                  function() {
                          logic
                  }
   화살표 함수 : function() 키워드 대신 화살표를 사용하여 보다 간략한 방법으로 함수 선언할 수 있다.

                   화살표함수는 익명함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 

                   사용한다.

var pow = function (x) { return x * x; };
console.log(pow(10)); // 100

//화살표함수 사용
const pow = x => x * x;
console.log(pow(10)); // 100

                   또는 콜백함수로 사용할 수 있다. 

var arr = [1, 2, 3];
var pow = arr.map(function (x) { // x는 요소값
  return x * x;
});

console.log(pow); // [ 1, 4, 9 ]


//화살표함수 사용
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]

        () => { ... } // 매개변수가 없을 경우

        x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.

    (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

6. 내장함수
   setInterval
   setTimeout
   eval
7. 배열 1차원배열
8. 내장객체의 종류 (각각의 용도)
   기본객체 : 
   BOM : 브라우저에 관련된 모든 내용을 담고있는 객체(뒤로가기, 북마크, 즐겨찾기, 히스토리, URL정보 등등)

          브라우저가 가지고 있는 정보를 따로 객체화해서 관리함
   DOM : Document Object Model html 태그와 관련된 모델 (HTML, CSS 등)

          문서 즉 열려진 페이지에 대한 정보를 따로 객체화해서 관리함
   

728x90
반응형
LIST
Comments