ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 재입문하기
    Computer Science/JavaScript 2019.07.11 03:31

     

    MDN Intermediate JavaScript 재입문하기

     

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript



    수 (Numbers)

     

    문자열 (Strings)

     

    null - 의도적으로 값이 없음 가리키는 '객체' 타입의 객체

     

    undefined - 어떤 값도 할당되지않은 변수임을 가리키는 객체

     

    false - 0, 빈 문자열(""), 수가 아님을 뜻하는 NaN, null, undefined



    true - 다른 모든 값

     




    변수 (Variables)



    var - 함수 스코프



    const - 값이 변경 X, let - 값이 변경, 둘다 블록 스코프

     




    연산자 (Operators)



    문자열에 어떤 수(또는 다른값)를 더하면 일단 모두 문자열로 바뀌게 됨.



    '3' + 4 + 5 = "345"



    == 타입 강제 변환을 수행



    === 타입 강제 변환을 하지 않게 함

     



    제어 구조



    조건문 if 와 else, 반복문 while, do while, for 



    &&와 || 연산자는 첫번째 식을 평가한 결과에 따라서 두번째 식을 평가를 실행



    객체에 접근하기 전에 null 객체인지, 아닌지 검사하는데 유용



    const name = o && o.getName(); 



    또는 기본 값 설정을 위해서

     

    const name = otherName || "default";



    삼항 연산자 ? :



    case별로 나눠야할 때는 switch

     


     

    객체(Objects)



    이름-값 쌍(name-value pairs)의 모임



    빈 객체를 생성하는데 두 가지 방법



    1. const obj = new Object();



    2. const obj = {} // 객체 리터럴 구문(JSON 구문의 핵심)



    객체의 속성에 접근하는 두 가지 방법

     

    obj.name = "JeongWoo";
    
    const name = obj.name;

     

    obj["name"] = "JeongWoo"; 
    const name = obj["name"];


    두번째 방법은 속성의 이름이 실행시간(run-time)에 계산될 수 있는 문자열로 주어진다.

    객체 리터럴 구문으로 객체의 전체적인 구조 초기화



    const obj = { name: "jeongwoo", "for": "Max", details: { color: "orange", size: 12 } };



    속성에 연속적으로 접근하기



    obj.details.color;



    obj["details"]["size"];

     



    배열(Arrays)



    배열은 실제로는 객체의 특별한 타입



    예를 들어 객체의 배열이나 DOM 노드들과 같은 배열에 사용되어야만 한다.



    for(let i = 0; item = a[i]; i++) { item으로 뭔가를 수행 }
    
    for(let i in a) { a[i]으로 뭔가를 수행 }
    
    a[a.length] = item; // a.push(item)와 같음. 배열 끝의 빈 공간에 할당



    배열 객체의 많은 메소드



    concat 해당 배열에 지정한 항목들을 추가한 새로운 배열을 돌려줌



    pop 마지막 항목을 제거한 다음 돌려줌



    push 마지막에 하나 이상의 항목을 추가



    slice 배열의 일부분을 돌려줌



    sort 비교에 사용할 함수를 따로 지정



    splice 구역을 삭제하거나 항목을 추가해서 배열을 수정



    unshift 배열의 시작 부분에 항복을 붙일 수 있음

     



    함수(Functions)



    function add(x, y) { const total = x + y; return total; } 



    기본 함수, return문은 언제나 값을 돌려주고 함수의 실행을 끝내는데 사용



    return 문이 없으면(혹은 값이 없는 리턴이)사용되면, undefined를 돌려줌



    매개변수로 넘겨진 모든 값을 가지고 있는 배열과 비슷한 객체인 arguments로 접근할 수 있음.



    함수 객체라면 모두 가지게 되는 apply() 메소드를 사용해서 임의의 매개변수 배열을 함수에 넘겨줄 수 있음.



    익명의 함수를 만들 수 있도록 허용. 내부에 다른 함수를 허용



    Ex) const avg = function(), function avg() // 의미적으로 같음.



    재귀적으로 함수를 부를 수 있음. 

     

    재귀함수는 브라우저 DOM 등에서 얻을 수 있는 트리 구조를 다루는데 유용



    this는 현재 객체를 참조, 즉 this의 값은 함수를 호출한 방버이 결정한다.



    객체에서 점 또는 괄호 표기법을 사용해서 부른 경우, 해당 객체는 this가 된다.



    함수를 부르는데 점 기호를 사용하지 않은 경우, this는 전역 객체를 참조한다.



    new는 this와 깊게 연관되어 있다.



    새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 this에 설정한다.



    this로 지정된 함수는 값을 반환하지 않고 단지 this 객체를 수정한다는 것을 명심



    this를 다시 설정할 수 있게 하는 apply(), call(), bind() 메소드



    new에 의해 불리도록 디자인된 함수는 생성자 함수



    새로운 함수 객체를 매번 만드는 건 비효율적



    그래서 프로토타입으로 코드를 공유



    기본적으로 들어있는 자바스크립트 객체의 프로토타입에 추가할 수 있음.

     




    클로져(Closures)



    함수와 함수가 선언된 어휘적 환경의 조합.



    내부함수는 외부함수의 지역변수에 접근 가능

     

    외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 

     

    내부함수가 외부함수의 변수에 접근할 수 있음.



    즉 클로저란 내부함수(Inner Function)가 외부함수(Outer Function)의 

     

    지역변수에 접근할 수 있고, 

     

    외부함수는 외부함수의 지역변수를 사용하는 내부함수가 

     

    소멸될 때까지 소멸되지 않는 특성을 의미한다.

    댓글 0