ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [부스트 코스] 자바스크립트 - FE
    프로그래밍 언어/Javascript 2020. 3. 13. 23:39
    728x90
    반응형

    변수

    유효범위가 달라진다.

     

    var - ES6 에서 이제 안씀

    const - 한 번 할당 후에 재할당 안됨

    let 

     

    *var 은 전역객체에 생성이 되고, let 과 const 는 전역객체에 생성이 되지 않는다.

    타입

    원시타입

        -숫자

        -문자열

        -논리값

        -특수한 값(undefined, null)

        -심벌

    객체타입

       -원시타입 외 값. 배열, 함수, 정규 표현식 등등

     

    타입은 선언할 때가 아닌, 실행타임에 결정된다. 

     

    타입체크를 할때는 기본타입은 typeof 키워드를 사용하고, typeof 로 확인할 수 없는 것들은 toString.call 을 이용한다. 배열의 타입을 체크할 경우에는 isArray 함수가 표준으로 있다.

     

    비교연산자

    0 == false;
    "" == false;
    null == false;
    0 == "0";
    null == undefined;

    === 는 값과 타입까지 비교를 한다.

    == 같은 경우는 임의적으로, 암묵적으로 타입을 바꾸서 비교하려는 성질이 있다.

     

    조건문

    if

    else if

    else

     

    삼항연산자로도 깔끔하게 조건문이 작성할 수 있다.

    let result = (a) ? "ok" : "not ok";

    a 가 true 면 ok. false 면 not ok 가 출력된다.

     

    반복문

    for, while

     

    반복문을 돌 때 배열의 길이를 계속 체크하므로, 비효율적인 것으로 알려져 있다. 따라서 다음과 같이 많이 사용한다.

    var arr = [1,2,3];
    
    //len 을 선언
    for(var i = 0, len=arr.length; i<len ;i++){
    	...
    }
    
    //또는 반대로 for문을 돌리는 것도 많이 한다.
    for( var i = arr.length ; i > 0 ; i--){
    	...
    }

    배열의 경우 forEach 메서드를 이용할 수 있고, for-of 를 통한 탐색도 자주 사용된다. for-in 은 객체를 탐색할 때 사용한다.

     

    자바스크립트는 문자열, 배열을 선언하면 내부적으로 객체로 변환되어 동작한다. 따라서 어떤 객체 내에 있는 메서드들을 사용할 수 있다.

    "ab:cd".split(":");  // ["ab", "cd"] 
    "ab:cd".replace(":","$");  // "ab$cd"
    "  abcd  ".trim();  // "abcd"

    split 는 일반적으로 배열로 만들어주는 메서드다.

     

    함수 - 함수 선언문

    여러개의 인자를 받아서, 그 결과를 출력한다.

    function printName(firstname){
        var myname = "jisu";
        return "name is " + firstname; // 만일 firstname 이 인자로 넘어오지 않았다면 undefined 출력
    }
    
    console.log(printName());

    자바스크립트는 파라미터의 갯수와 인자의 갯수가 맞지않아도 오류를 발생시키지 않는다.

     

    함수 - 함수 표현식

     

    function test() {
        console.log(printName());
        var printName = function() {
                return 'anonymous';
        }
    }
    
    test();
    //TypeError: printName is not a function

    printName 이 표현식으로 되어있는 경우, 선언하기 전에 호출되면 printName 은 undefined 다(함수로 인식 안함).

    반면, printName 이 선언문으로 선언되어있다면, 먼저 호출해도 printName 함수가 정상적으로 작동한다.

     

    분명 자바스크립트는 한 라인씩 해석이 되는데, 어떻게된걸까?

     

    자바스크립트 함수는 실행되기 전 해당 함수 안에 필요한 변수값들을 미리 다 모아서 유효범위 최 상단에 선언한다.

    자바스크립트 parser가 함수 실행 전 해당 함수에 대한 코드를 한번 쓱 훑고 기억해둔다. 

    따라서 아래쪽에있는 함수선언문을 위로 끌어올리게 된다. 

    반면 함수 표현식은?

    var printName; // 이렇게 변수만 끌어올려진다. 함수로 인식하지 못한다.
                   //반면 함수 선언문은 통째로 끌어올려진다.
    
    console.log(printName());
    
    var printName = function() {
    ...
    }
    

     이것을 호이스팅이라고 한다.

     

    함수- 표현식과 호이스팅

    자바스크립트 함수는 실행되기 전에 함수안에 필요한 변수값들을 미리 다 모아서 선언한다. 함수 안에 있는 변수들을 모두 끌어올려서 유효범위의 최 상단에 선언한다고 해서, hoisting 이라고 한다.

     

    호이스팅은 var 변수선언함수선언문에서만 호이스팅이 일어난다.

     

    호이스팅은 함수 표현식과 선언문에서 약간 다르게 동작한다.

     

    더 자세한 내용은, 이 블로그 를 읽어보았다.

    함수- 반환값과 undefined

    자바스크립트 함수는 기본적으로 return 값은 undefined 을 반환한다. (다른걸 명시해주지 않으면)

     

     

    함수 - arguments 속성

    함수가 실행되면 그 안에서 arguments 라는 특별한 지역변수가 존재한다.

    자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수 있으며, 넘어온 인자를 arguments 로 배열의 형태로 하나씩 접근한다. ( array-like 로서, 배열타입은 아니므로 배열의 메서드는 사용할 수 없다. ) 

     

    function a() {
    	console.log(arguments);
    }
    a(1,2,3); 
    //결과는 { '0':1, '1':2, '2':3 }

     

    arguments 도 너무 이용하면 안좋다. 상황에 맞게 적당히 쓰는것이 좋다.

     

    화살표 함수

    화살표 함수는 항상 익명이며, 생성자로서 사용할 수 없다.

    또한, 이 표현은 메소드 함수가 아닌 형태로 사용 가능하다.

    자신의 this, arguments, super 를 바인딩하지 않는 것이 특징이다.  ( 일반함수의 내부함수, 콜백함수에 사용되는 this 는 window(전역객체) 를 말한다. )

    function getName(name) {
       return "Kim " + name ;
    }
    
    //위 함수는 아래 arrow함수와 같다.
    var getName = (name) => "Kim " + name;
    // 매개변수가 없는 경우
    var foo = () => console.log('bar');
    foo(); // bar
    
    // 매개변수가 하나인 경우
    var foo = x => x;
    foo('bar'); // bar
    
    // 매개변수가 여려개인 경우
    var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없이 값이 반환됩니다.
    foo(1, 2); // 3
    
    var foo = (a, b) => { return a + b }; 
    foo(1, 2); // 3
    
    var foo = (a, b) => { a + b }; // "{}"를 사용했는데 return이 없을 때 
    foo(1, 2); // undefined
    
    var foo = (a, b) => { // 여러줄 썼을 때
    	var c = 3;
    	return a + b + c;
    }
    foo(1, 2, 3) // 6
    /*
    "{}"를 사용하면 값을 반환할 때 return을 사용해야합니다.
    "{}"를 사용하지 않으면 undefied를 반환합니다.
    "{}"을 사용할 때는 여러줄을 썼을 때 사용합니다.
    */
    
    // 객체를 반환할 때
    var foo = () => ( { a: 1, b: 2, c: 3 } );
    foo(); // { a: 1, b: 2, c: 3 };
    // 출처: https://velog.io/@ki_blank/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98Arrow-function

     

     

    중요한 비구조화 할당도 보자.

    비구조화 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 한다.

     

    var x =[1, 2, 3, 4, 5]; // 객체 및 배열 리터럴 표현식을 사용해 데이터 뭉치 만들기
    var [y, z] = x; // 할당문 좌변에서 사용해 원래 변수에서 어떤 값을 분해해 할당할지 정의
    console.log(y); // 1
    console.log(z); // 2
    

     

    변수에 기본값을 할당해놓으면 분해한 값이 undefined 일때 기본값을 대신 사용한다.

     

    var a, b;
    
    [a=5, b=7] = [1];
    console.log(a); //1
    console.log(b); //7

     

    변수 값을 한줄로 교환할 수 있다

    var a = 1;
    var b = 3;
    
    [a, b] = [b, a];  // a=3 b=1

     

    객체 구조 할당으로 함수 매개변수의 기본값을 설정할 수 있다.

     

    function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
      console.log(size, cords, radius);
      // 차트 그리기 수행
    }
    
    drawES2015Chart({
      cords: { x: 18, y: 30 },
      radius: 30
    });

    좌변에 빈 오브젝트 리터럴을 할당하는 이유는, 이 함수가 어떠한 매개변수 없이 호출 가능하게 한다. 

    무조건 객체를 넘기길 원한다면 빈 객체 할당을 하지 않는게 좋다.

     

    객체에서 필드를 해체하거나, 배열의 구조를 분해할 수 있다.

    더 많은 예시는 여기 에서 볼 수 있다.

     

     

    함수 호출

    메모리는 우측의 Call Stack 에서와 같이 순서대로 쌓이게 된다.

     

    (GIF 오류 : 최종적으로 100 을 return 한다.)

     

    728x90

    댓글

Designed by Tistory.