아래와 같이 중첩된 값이 있다면, 각각의 단계별로 객체가 존재하나 여부를 확인하고 값을 꺼내는 코드를 작성해야 합니다. 옵셔널 체이닝 없이 꺼낸다면, 코드가 길어지고, 무엇보다 직관적이지 못합니다.

<script type="module">

    const some = {
        deeply:{
            nested:{
                value:99
            }
        },
        dialog:{
            say:"hello"
        }
    };

    const x = some && some.deeply && some.deeply.nested && some.deeply.nested.value;
    const y = some && some.dialog && some.dialog.say && some.dialog.say;
    console.log(x, y);

</script>

하지만 옵셔널 체이닝을 사용하면, 아래와 같이 코드가 간결해 지며, 중간에 null 이나 undefine을 만나면 undefine을 반환하고 코드를 수행하지 않습니다.

<script type="module">

    const some = {
        deeply:{
            nested:{
                value:99
            }
        },
        dialog:{
            say:"hello"
        }
    };

    const x = some?.deeply?.nested?.value;
    const y = some?.dialog?.say;
    console.log(x, y);

</script>

디스트럭처링은 객체나 배열에서 값을 쉽게 가지고 오는 방법입니다. 디스트럭처링이 없을 때는 객체나 배열에서 값을 가지고 올 때 다소 코드가 길었지만, 아래 예들 처럼 디스트럭처링을 사용한다면, 코드가 상당히 간결해 질 것 입니다.

객체

기존에는 아래와 같이 사용해 값들을 가지고 왔습니다.

<script>

    const hotel = {
        door:3,
        light:6
    };

    const door = hotel.door;
    const light = hotel.light;

    console.log(door, light);

</script>

하지만 아래와 같이 디스트럭처링을 하면 길이가 상당히 짧아 집니다. 아래 처럼 변수를 또 나눌 일은 없지만, 함수에서 결과로 객체를 받을 경우에 사용한다면 상당히 효과적입니다.

<script type="module">

    const hotel = {
        door:3,
        light:6
    };

    const {door, light} = hotel;
    console.log(door, light);

</script>

배열

기존의 방법

<script type="module">

    const soldier = ['jake', 'jun', 'jane', 'Paul'];

    const soldier_0 = soldier[0];
    const soldier_2 = soldier[2];
    console.log(soldier_0, soldier_2);

</script>

디스트럭쳐

<script type="module">

    const soldier = ['jake', 'jun', 'jane', 'Paul'];
    const [soldier_0, , soldier_2,] = soldier;
    console.log(soldier_0, soldier_2);

</script>

중첩된 디스트럭쳐

객체 속에 배열이 있는 경우 아래와 같은 방법으로 가지고 올 수 있습니다.

<script type="module">

    const jade = {
        mountain:["한라산","백두산"],
        river:["한강","낙동강"]
    };
    const {mountain:[choice_m],river:[,river_nak]} = jade;
    console.log(choice_m, river_nak);

</script>

디스트럭처와 스프래드는 궁합이 좋으므로, 같이 사용하면 매우 간결한 코딩이 가능합니다.

for-of : 배열의 값을 반복해 줍니다.

for-in : 객체의 키값으로 반복을 해 줍니다.

아래 소스로 차이를 느껴보세요.

<script>

    const one = [6,8,2,4,0];
    for( let o of one ){
        console.log('o', o);
    }

    const two = {'과일':'사과','나라':'미쿡','언어':'바디랭귀지'};
    for( let key in two ){
        console.log( key, two[key] );
    }

</script>

javascript는 다른 언어와 다르게 선언하는 방법이 var 하나만 있었습니다. c++, c# 처럼 형식을 정의하지 않았고 변수로 바로 사용하기에 하나만 밖에 필요가 없었습니다. 하지만 javascript는 눈부시게 발전해 복잡하고, 기능이 다양해 지며 아주 많은 문제를 만들어 냈습니다. 특히 promise 전까지 함수 중첩 지옥에서는 전역변수인 var는 정말 오류를 만들기 쉬웠습니다. 이를 극복하기 위해 ES2015에서는 let과 const가 도입됩니다.

var, let

var는 선언된 바깥 스코프에서도 사용이 가능합니다. 같은 function 속이 scope 입니다. let 을 실행하면 외부에서 사용이 불가능합니다. try-catch 문 같이 try 부분에 사용된 변수중 catch로 전달될 값이 있다면, var 그 외에 일반적인 경우 let을 사용하면 좋을 듯 합니다. 아래의 코드를 실행해 보세요.

<script>

    for(var i=0;i<10;i++){

    }
    console.log("i", i);

    for(let u=0;u<9;u++){

    }
    console.log("u", u);

</script>

const

const는 상수를 정의할 때 사용합니다. javascript같은 경우 언어가 유연해, override 되기 쉬온데, cosnt를 사용하면 그럴 우려는 없습니다. 하지만, const 내부의 값들은 변경이 가능합니다. 아래의 코드를 실행해 차이를 느껴보세요.

<script>

    let spr = {in:1};
    console.log('spr', spr);

    spr.in += 4;
    console.log('spr', spr);

    spr = {in:2};
    console.log('spr', spr);



    const ho = {out:1};
    console.log('ho', ho);

    ho.out+= 6;
    console.log('ho', ho);

    ho = {out:3};
    console.log('ho', ho);

</script>

css 7가지단위에 대해서 잘 설명 되어 있는 사이트가 있어서 링크를 걸어 둡니다.

https://webclub.tistory.com/356

Ajax를 사용하면, 같은 호스트명, 포트 번호가 아니면, 브라우저에서 받아 온 데이터를 적용하지 않고 오류를 내어 버린다.
이를 해결하려면, 서버에 설정을 해 주어야하는 데, iis 같은 경우 아래와 같이 설정하면된다.
(참고로, 이 설정은 Ajax로 데이터를 가지고 오는 서버에 설정되어 있어야 한다.)

iis에서 웹서버 메인 폴더를 열어 보면, web.config 라는 파일이 있다. (없을 경우 만들어 야 하며, 자동으로 만들어 지게 하고 싶은 경우, mime 설정을 하나 해 주면된다.)

<Configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="원하는 주소">
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</Configuration>