javascript

✍️ for( )문을 이용한 연산 방식

i=0; 0<9; console.log(arr[0]); i++ //100
i=1; 1<9; console.log(arr[1]); i++ //200
i=2; 2<9; console.log(arr[2]); i++ //300
i=3; 3<9; console.log(arr[3]); i++ //400
i=4; 4<9; console.log(arr[4]); i++ //500
i=5; 5<9; console.log(arr[5]); i++ //600
i=6; 6<9; console.log(arr[6]); i++ //700
i=7; 7<9; console.log(arr[7]); i++ //800
i=8; 8<9; console.log(arr[8]); i++ //900

✍️ 실행 방법

첫번째 for(초기값; 조건식; 증감식){실행문}; 출력 후 두번째 for(초기값; 조건식; 증감식){실행문}; 전체 출력 한 다음에 다시 첫번째 for문으로 이동해서 증감식에 맞게 실행해서 반복해주시면 됩니다.

✍️ forEach문은 화살표 함수로 생략할 수 있습니다!!

forEach문은 함수를 사용하기 때문에 화살표 함수를 사용할 수 있습니다.

{
    const num = [100, 200, 300, 400, 500];

    // forEach문
    num.forEach(function(el){
        document.write(el);
    });

    //forEach문 : 화살표 함수
    num.forEach((el) => {
        document.write(el);
    });

    //forEach문 : 화살표 함수 : 괄호 생략(매개변수가 한 개일때 사용가능합니다.)
    num.forEach(el => {
        document.write(el);
    });

    //forEach문 : 화살표 함수 : 괄호 생략 + 중괄호 생략
    num.forEach(el => document.write(el));

}    

✍️ for in문을 통해서 element(값)도 출력할 수 있습니다.

{
    const arr = [100, 200, 300, 400, 500];
    for(let i in arr){
        document.write(arr[i]);
    };
}

결과 : 100, 200, 300, 400, 500

✍️ map( ) 화살표 함수로 생략이 가능합니다.

map( )은 함수를 사용하기 때문에 화살표 함수를 사용할 수 있습니다.

{
    const num = [100, 200, 300, 400, 500];

    // map문
    num.map(function(el){
        document.write(el);
    });

    //map문 : 화살표 함수
    num.map((el) => {
        document.write(el);
    });

    //map문 : 화살표 함수 : 괄호 생략(매개변수가 한 개일때 사용가능합니다.)
    num.map(el => {
        document.write(el);
    });

    //map문 : 화살표 함수 : 괄호 생략 + 중괄호 생략
    num.map(el => document.write(el));

}    

✍️ 객체의 map( )도 화살표 함수로 생략이 가능합니다.

객체의 map( )도 배열의 map( )와 같이 화살표 함수로 생략이 가능합니다.
* 참고 : 11. 배열 : 데이터 불러오기 : map( )

✍️ hasOwnProperty( ) 약식으로 사용 가능합니다.

 {
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    };

    console.log(obj.hasOwnProperty("a"));       // true
    console.log(obj.hasOwnProperty("b"));       // true
    console.log(obj.hasOwnProperty("c"));       // true
    console.log(obj.hasOwnProperty("d"));       // false

    // 약식
    console.log("a" in obj);                    // true
    console.log("b" in obj);                    // true
    console.log("c" in obj);                    // true
    console.log("d" in obj);                    // false
}

✍️ 데이터를 추가해서 불러올 수 있고, 두 개의 데이터를 합칠 수도 있습니다.

{ // 데이터 추가
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const spread = {...obj, d: "react"};    // 데이터를 추가로 입력해서 출력이 가능합니다.

    console.log(spread.a);      // 100
    console.log(spread.b);      // 200  
    console.log(spread.c);      // javascript
    console.log(spread.d);      // react
}

{ // 두 개의 데이터 합침
    const obj1 = {
        a: 100,
        b: 200
    }

    const obj2 = {
        c: "javascript",
        d: "react"
    }

    const spread = {...obj1, ...obj2};      // 두 개의 데이터를 합쳐서 출력이 가능합니다.

    console.log(spread.a);      // 100
    console.log(spread.b);      // 200  
    console.log(spread.c);      // javascript
    console.log(spread.d);      // react
}

✍️ 변수로 분해했을 때 값을 주고 그 데이터 값으로 데이터를 불러올 수 있습니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }

    const {a:name1, b:name2, c:name3} = obj;

    console.log(name1);     // 100
    console.log(name2);     // 200
    console.log(name3);     // javascript
}