[javascript] javascript boot camp 16기 네번째 수업

2020-08-12

자바스크립트 부트캠프 16기 네번째 수업

오늘은 객체부터 베이스 다지기. 가장 중요한 수업

객체 생성

생각보다 객체가 복잡 js의 대부분이 객체로 되어있음 C R U D Create Read Update Delete 기본적인 오퍼레이션 c r u d 객체 역시 c r u d 기본연산으로 배워보자 테일컴마의 요구가 많아서 2015부터는 에러가 안뜲

  • 객체 리터럴이 가장 기본적인 표기법
  • 함수 사용 (값을 인자로 갖고 리터럴로 표현한걸 리턴해줌)
    함수 안에 리터럴로 만들고 있는건 똑같음. 왜 이렇게 만들까? 객체를 효과적으로 만들 수 있을지에 대한 연구를 많이 함 확장성을 고려해서.. 소프트웨어의 규모가 커진다면 편리함이 유지될까를 고려해서 코드를 짜야함 리터럴 열개 하는거보다 식 하나를 함수로 선언해서 호출하는게 더 효율적임

    객체안의 구성요소들 1. 값 2. 값의 이름 (key) 객체를 이루고 있는 일종의 스펙, 구성.구성을 하나로 통일 구성정보와 데이터로 이루어져있고 사이즈가 늘어나면 구성정보는 동일하되 데이터가 늘어난만큼 필요하다

    객체에는 스펙과 데이터가 있으니 스펙을 담고있는걸 재활용해보자~ 복잡도가 증가하지 않는 방법을 생각하고 고려하고 코드짜기

  • new 연산자 및 this
    this와 new 연산자는 자바스크립트의 허들쓰 함수를 호출할 때 new 라는 연산자 붙혀서 호출하면 암묵적 메카니즘 작동 암묵적 메카니즘은 배우기가 아무래도 힘듦. 암묵적으로 자바스크립트가 비어있는 객체를 만든 담에 arguments 처럼 전달해준다. 적시할 방법이 없으니 this라고 부르자 하고 this라는 키워드 명명 new붙혀진 함수 안에서 this는 해당 객체를 뜻한다 (규칙1)

    return이 없다 - 명시적 반환 / 암묵적 반환 (자동으로 undefined)

    new 연산자가 붙혀진 함수 호출할 땐 브레이스 안 것들이 자동으로 반환이 됌 (규칙2)

    동적바인딩을 이용해서 속성을 추가한거, 자동으로 new 연산자가 호출되어서 this가 빈 객체를 가르치고, 동적바인딩을 이용해서 속성이 추가된것이다..

    new 연산자로 만들어진 객체를 이 함수의 인스턴스 객체라고 한다. 인스턴스 객체 = 형상을 실체화한.. 데이터와 구성정보를 추상적으로 갖고있는것을 실체화 한 실제적인 객체.

    인스턴스를 여러가지 가질 수 있다.

객체

  • 속성을 추가하는 방법 (런타임 환경에서 추가하는 법)
    1. 간단하게 객체.속성 = 값; 추가하기 -> 동적바인딩 delete 객체.속성 -> 속성을 제거하는 방법 / 흔치않음

  1. computed property name 객체[‘속성’] = 값; 대괄호를 이용해서 왼쪽이 객체일 때 속성명을 주면 배열의 순서가 아니라 속성명으로 작동함. 계산된 ~ 연산을 한단건데 데이터 / 조작할까에 대한 연산자

    box[‘borderRadius’] = 값; => 속성명을 값으로 받음. 문자열 변수에 담아놓으면 다른걸로 바꿀 수 있음 box.borderRadius = 값; => 코드 식별자, 실행하는 순간엔 못바꿈.

    데이터는 실행하는 중간에도 바꿀 수 있고, 코드는 실행하는 순간엔 못바꿈. 변경할 수 있는 가능성을 열어놓는 문법

     function v(){
     return 'borderRadius';
 }

 box[v()] = 5; // 이런게 가능하고
 box[10 * 140] = 5; // 이런거도 가능

    식별자 명령규칙을 따르지 않아도 됀다. ex) box[‘border-color’] = 값; => 여기서 ‘border-color’는 값(데이터)이니깐 작동가능

    ※주의: 단계적으로 넘어가면 돼고 잊어먹었다가 코드리딩하면서 바꿔도댐ㅎㅎ 너무 다 알려고 골머리 앓으면 안댐

  2. 생성시 계산된 (Computed property name) 5.0 넘어가서는 객체 리터럴 표현력을 확장시킴 객체 리터럴 안에서 box[‘border-radius’] 이런게 가능해짐

출처: 객체의 기본

함수

Javascript에서 원시 데이타 타입을(기본형) 제외한 거의 모든 것은 객체입니다. 함수 또한 객체이며 객체와 같이 속성과 메소드(속성 값이 함수인)를 가질 수 있다. (함수는 코드를 묶는 칭그 / 이름 붙힌 값 묶은거 객체 / 값을 묶은거 배열 /코드를 묶은거 함수)

함수도 하나의 객체당.

    let double = function double(x) {
        return x * 2;
    };
    // 같은 공간 안에서 식별자가 중복된단거는 좌항의 double과 우항의 double은 다른 공간인식. 대입 되면서 우항의 double은 정체성 잃어버리고 좌항의 double이 됌

    let result = double(100);
    // 함수이름 뒤에 ()는 함수호출연산자.

    console.log(result);

    // ----------------- 이름이 필요 없어서 (생략이 가능해서)
    // 항상 값으로 취급될 때 익명함수 가능 eX) 아래처럼 변수에 넣는 값으로 작용할 때 익명함수 가능
    function empty(x, y){}
    // 함수정의문 (문이기 때문에 세미콜론 X)

    let double = function(x) {
        return x * 2;
    };
    // 함수표현식. 함수정의식 (식이기 때문에 세미콜론 O)

    let result = double(100);

    console.log(result);

함수의 유효범위.. 만든다는건 자원(resource, asset)을 만든다는것 - 언제 쓰이고, 언제 버려지느냐.. 프로그램에 할당된 메모리는 한계가 있기에 아껴써야하고, 프로그래밍 언어도 그렇게 디자인이 되어있다. 만들어놓고 종료시킬때까지 유지 시키지 않습니다. 그러므로 컴퓨터의 모든 자원은 생명주기가 있습니다.

바깥쪽에서 안쪽 함수에는 접근할 수 없다.. 호출할때 만들어지는 유효범위 / 리턴하고 사라짐

변수에 담을 수있는 값으로 취급되어지는 함수는 1급함수

객체에는 데이터를 갖고있는 속성 - 프로퍼티 / 행위를 할 수 있는(함수를 실행할 수 있는) 속성 - 메소드

익명함수 / 1급함수 / 화살표함수

화살표 함수

function의 축약형

    // 원래는 function과 브레이스, return이 있다.
    let double = function(a) {
        return a * 2;
    }

    // 란다 함수 (한줄식) 함수를 한줄로/인자를 받아서 연산한 후 돌려준다.
    let double = (a) => a * 2; // 입력을 받아서 => 출력을 한다

    // -> 값이 있으면 됀다. 
    // -> 인자가 하나일 때만 괄호 생략 가능, 두개 이상일 때는 괄호 꼭
    // 애로우함수는 한줄씩만 써야하나요? X

    let d3 = (x, y) => {
        let z = 100;
        return x + y * z;
    }
    // 이렇게 여러 줄 쓸 때는 브레이스로 묶어줘야합니다.
    // 애로우 펑션은 브레이스로 코드를 묶었을 때 반드시 return 을 명시해줘야합니다. (명시적 리턴)
    // new 연산자로 실행할 수 없는 차이가 有

    let result = double(100);

    console.log(result);

function으로 정의하는 함수는 이제 .. 일반함수고 왠만하면 화살표함수 씀

콜백함수 !!!

함수를 호출할 때 인자로 함수를 주는거.


// 인자를 함수로 받을거에용.
function foo(fn){
    fn(); // 함수를 호출할 수 있겠습니다.
}

foo( function(x){ 
    console.info(x) 
} ) // 왜 콜백함수라고 부를까? 호출한 다음에 부른다 라서 콜백함수

// 얘네는 콜백함수가 아니라 동기코드임.

비유적 관점: 위임 / 내가 모든 일 다할 수 없으니깐 여러가지 일을 동료나 후배들에게 위임한다. 한걸 다 받고 다시 결과를 내야하니깐..

foo함수에게 일을 위임한다. 근데 결과는 콜백에게 줘 값을 받는 함수에게 넘겨준다

왜 위임을 할까 / js에서 무진장 마니 씀

  • 계산의 결과가 너무 오래 걸려 기다리는 것이 비효율적일 때
    return이 오래 걸릴 때 ex) a = b(); => b함수의 리턴이 오래 걸리면, c = a * 3; => 밑의 c는 처리가 안됀다 ===> 이걸 동기식 코드 (a때문에 (dependancy) a를 받아야지 쓸 수 있기때문에) 종속성을 끊을 수 있다면

    a = b(); c = 3 * 3; ===> 종속성을 끊었다치고 개별적으로 실행해도 아무 문제가 없다

    자바스크립트가 그게 되게 해준대. 남은 문제 b의 return이 끝나면 a 어떻게 받지? 결과를 받는 함수를 넘겨주자

    a = b(); c = a * 3; => 코드 함수로 묶을 수 있음 k = 3 * 3;

    f(a){ c = a * 3; } => 얘를 b()에 준다.

    a = b(요기에);

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

  • 어떤 코드가 언제 실행되어야 할 지 코드상으로 특정할 수 없을 때
    언제 실행될지 모른단게 무슨 뜻이냐면 실행을 특정시점에 시켜야한다는 것 사용자가 버튼을 누르면 코드가 실행되야하는데..

    ex) c = a * b;

    function (){ c = a * b } 함수로 만들어서 클릭 event일어날 때 함수를 값으로 전달해줌 (전형적인 콜백함수)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

  • 호출할 함수를 특정할 수 없을 때
    큰 맥락에선 두번째랑 비슷한데 고급이라 추후에 예제풀면서.. ㅠㅠ 이건자습해야할듯?

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

애니메이션 틀 타이밍 없이 저장해버리면 안보여서 디자이너가 맘 상함 ㅠㅠ 한프레임 볼려면 2초정도 걸리는데 2초동안 보여주고싶다.. setTimeOut() 함수 => 인자를 두개 받음 / 함수, 시간

내가 만든 함수는 지연을 시킬 수 없다. 컴퓨터 사이언스는 timer가 있다. 천분의 일.. 1000ms

실제로 동시로 실행하려면 브라우저에게 넘겨줘야함


    // 계산이 엄청 오래걸리는 함수
    function lazyCalc(a, b, cb) {
        setTimeout(() => {
            cb(a * b);
        }, 1000);
    }

    lazyCalc(2345, 234366, function(result) {
        console.log(result);
    });

    console.log('다른일');
    console.log('또 다른일');

    // 이걸 왜 비동기라고 할까 ? 다음 교시에..

동시성과 관련된 background 지식…

CPU의 멀티태스킹을 억덕혜 하는가. 엄청나게 빠르게 처리를 하기 때문에 방법을 마련하면 사람이 인지하는 속도랑은 다르게 엄청나게 빨리 처리를 하는거 멀티태스킹 방법은 무엇인가?

시분할 방식을 예로 들자면.. 일을 시키는 쪽은 느림 1/2/3/4 네개를 시키려고 하면 1이 끝나야 2를 하고 등등.. 중간에 소프트웨어를 두고 1 이 5s, 2가 3s, … 걸린다 중간의 소프트웨어(스케줄러)가 그 시간을 다 받고 쪼갠다. 쪼개서 할당을 해준다 (운영체제 software core에 관여하는 스케줄러)

어떻게 그 시간을 쪼개서 할당을 하는가?

  • 비선점형 : 운영체제 관점에서 이 소프트웨어의 제어권을 운영체제가 갖고있음
  • 선점형 : 소프트웨어 잽싸게 돈다음에 운영체제한테 알려줌 ㄴ> 비선점형이 편함 / 빨리 쪼개서 나한테 나눠줘! 소프트웨어 제작 가이드라인.

웹어플리케이션의 운영체제는 브라우저입니다. (선점형 구조) 탭 하나. 자바스크립트가 실행되다가 브라우저한테 나 잠깐 쉴래!하고 돌려주지 않으면 다른 탭들이 일을 못함. 언제 돌려주느냐 정해주는게 setTimeOut() 타이머 시스템이라든가 이벤트 시스템들.. while같은거 잘못 돌리믄 브라우저 주금쓰

webGL = 3d 구현 gpu 어쩌고 저쩌고 병렬작업~ 경험 가능

반환값으로서의 함수

    function person(name) {
    return function() {
        return '안녕하세요. 제 이름은 ' + name + '입니다.';
    }
    }

    let hong = person('홍길동');
    // 식별자를 지을 때 데이터와 연관되게 짓고 있음.
    // person 함수식별자는 광범위함
    // 함수를 데이터와 연관되서 네이밍할 수 있음 -> 표현력 확장

    let kim = person('김민태');

    console.log(hong());
    console.log(kim());

함수안의 내용물은 호추 할 때 만들어진다 return하고나서 없어짐 객체 만들 때 createBox 할때마다 새로운 객체 나오는것처럼. 런타임에 함수를 만들어내고 있음

이걸 이용한 테크닉을 커링이라고 함

    function foo(a, b, c){
        return a + b + c
    }

    function bar(a){
        return function(b){
            return function(c) {
                return a + b + c
            }
        }
    }

    let x = foo(10, 20, 30);
    let y = bar(10)(20)(30);

    // 굉장히 해괴쓰~ 얘는 기본적으로 크게 2가지 테크닉으로 씀
    // 첫번째는 호출하자마자 계산, 
    // 특정시점까지 지연시킬 수 있는 방법이 없음
    // a, b 하고 c를 나중에 할 수 있는 방법이 없음

    // 두번째는 c가 만들어졌을 떄 호출을 할 수 있음

    let y = bar(10)(20);
    // 이렇게 먼저 b까지 계산을 하고, 호출하는 쪽에서 임의로 지연시킬 수 있음

    y(30);
    // 이렇게 c값이 생겼을 때. 호출해서 return 받을 수 있고
    // 사용자가 사용할 때 쓸 수 있는.... 
    // 리액트할 때 커링테크닉 많이 씁니다. 

    // 애로우함수로 쓰면은
    let foo = a => b => c => a + b + c;
    // 축약형식의 이점이 보입니다요.. 눈에 익숙하면 편리하고ㅎㅎ 안익숙하면 난해 ㅠ

    function salePrice(discountRate, price) {
    return price - (price * (discountRate * 0.01));
    }

    console.log('여름 세일 - ' + salePrice(30, 567000));
    console.log('겨울 세일 - ' + salePrice(10, 567000));

    function discountPrice(discountRate) {
    return function(price) {
        return price - (price * (discountRate * 0.01));
    }
    }

    console.log('여름 세일 - ' + discountPrice(30)(567000));
    console.log('겨울 세일 - ' + discountPrice(10)(567000));

    let summerPrice = discountPrice(30);
    let winterPrice = discountPrice(10);

    console.log('여름 세일 - ' + summerPrice(567000));
    console.log('겨울 세일 - ' + winterPrice(567000));

    // 커링을 이용하니. 식별자만 봐도 어떤 코드인지 알수있다 이말슴
    // 능숙하게 쓸 수 있는 경지에 오르면 내 코드의 표현력을 확장할 수 있당. 재밌당