정리_JavaScript/유튜브 fcc - 1. JavaScript_1차 정리

인터넷 JavaScript playgound - freeCodeCamp 사이트, codepen.io, scrimba.com

 

나머지 구하기 - 11 % 3 → 짝/홀수 determine 

 

String을 declare - ", ', `

 

escape - \

  \n - new line

  \r - carriage return

  \t - tab

  \b - backspace

  \f - dorm feed

 

String 잇기

(1) var Str = "I am first. " + byunSoo + "I am second."

(2) var Str = "I am first. "

    Str += byunSoo

    Str += "I am second."

 

String 길이 - byunSoo.length   →   7

String (n+1)번째 글자 - byunSoo[n]

※ 마지막 글자 - byunSoo[byunSoo.length - 1]

※ String은 전체는 바꿀 수 있지만 byunSoo[n]를 사용해서 한글자씩은 못 바꾼다.

 

배열 - var arr = [ , ]

배열의 (n+1)번째 데이터 - arr[n]

배열 안에 배열이 있는 경우 - arr[n][m]

 

arr.unshift(); - 맨 앞에 데이터 추가

arr.shift(); - 맨 앞의 데이터 제거

arr.push(); - 맨 뒤에 데이터 추가

arr.pop(); - 맨 뒤의 데이터 제거

 

예제) 인자1로 배열을 넣고, 인자2로 원소 하나를 넣으면

 원래 맨 앞에 있던 원소가 빠지고, 인자2가 새로운 원소로 제일 뒤에 추가되는 함수를 만들어보자.

 

        function queue(arr, item) {
            arr.push(item);            
            return arr.shift();
        }
        var testArr = [1,2,3,4,5]
        queue(testArr, 6);
        document.write(testArr);

 

함수 밖에서 declare된 변수는 global scope이다.

함수 안에서 declare된 변수와 인자들은 local scope이다.

 

var fruit = "apple";

function myFruit() {
   var fruit = "banana"
   return fruit;

console.log(myFruit()); // banana
console.log(fruit); //apple

= assignment operator

== equality operator - data type이 다르면 같도록 변환해서 비교한다.

=== strict equality operator - data type이 다르면 false이다.

 

&& and

|| or

 

 

 

< if statement >

if ( ) {

} else if ( ) {

} else {

}

 

< switch statement >

switch (val) {

  case 1:

    (break;)

  case "Hi":

    (break;)

  (default:)

    (break;)

}

break를 만나면 switch statement의 끝으로 간다.

break가 없으면 다음 case로 간다.

 

 

 

객체

{ property1 : value1, property2 : value2 }

gaekche.property1 또는 gaekche [ property1 ]

cf) 배열의 (n+1)번째 데이터 - arr[n]

 

수정 - gaekche.property1 = newValue

추가 - gaekche.property3 = newValue

삭제 - delete gaekche.property2

property의 존재 여부 확인 - gaekche.hasOwnProperty → True/False 출력

 

 

nested 객체에서 value에 접근하는 방법:

        var myBag = {
            "school bag": {
                "inside": {
                    "left pocket": "pencils",
                    "right": "erasers"
                },
                "outside": {
                    "outer": "books"
                }
            }
        };
        var result = myBag["school bag"].inside["left pocket"] // pencils

 

 

nested 배열에서 원소에 접근하는 방법:

        var food = [
            {                
                type: "fruits",
                list: [
                    "apple",
                    "banana",
                    "kiwi"
                ]
            },
            {
                type: "vegetables",
                list: [
                    "cucumber",
                    "raddish"
                ]
            }     
        ];
        var result = food[0].list[2]; // kiwi

 

예제) Record collection - id, prop, value를 입력해서 update하는 함수

        var members = {
            "243": {
                "name": "Pikachu",
                "skill": "electric",
                "color": [
                    "yellow",
                    "brown"
                    ]
            },
            "135": {
                "name": "kkobugi",
                "skill": "fire",
                "color": [
                    "blue",
                    "skyblue"
                ]            
            },
            "357": {
                "name": "metamon",
                "skill": "general",
                "color": [ ]
            }
        };

 - 135, skill, water를 입력하면 fire를 water로 업데이트한다.

 - 만약 (id, prop, 빈칸)을 입력하면 그 property의 valaue를 삭제한다.

 - 입력한 property가 color라면 업데이트하는 대신 그 value를 맨 마지막에 추가한다.

 

 + 전체 members를 리턴한다.

 

※ var gaekcheCopy = JSON.parse(JSON.stringify(gaekche)); 를 하면

객체를 카피해둘 수 있다.

 

※ 만약 color property가 없다면, 그것을(string이 아닌 배열로!) 만들어야 한다.

 members[id][prop] = members[id][prop] || [];

 

 만약 그것이 존재한다면, 원래의 것과 equal하고,

 존재하지 않는다면, empty array를 만든다.

 

        var membersCopy = JSON.parse(JSON.stringify(members));

        function updateMembers(id, prop, value) {
            if (value === "") {
                delete members[id][prop];
            } else if (prop === "color") {
                members[id][prop] = members[id][prop] || [];
                members[id][prop].push(value);
            } else {
                members[id][prop] = value;
            }
            return members;
        }
        updateMembers("135", "skill", "water");
        console.log(updateMembers("357", "color", "purple"));

 

< while loop >

        var num = [];

        var i = 0;
        while(i < 5) {
            num.push(i);
            i++;
        }

 

 

< for loop >

        var num = [];

        for (var i = 0; i < 5; i++) {
            num.push(i);
        }

 

예제) nested array (ex. [[1, 2], [3, 4] , [5, 6, 7]]) 의 모든 값을 곱하는 함수 만들기

        function mAll(arr) {
            var result = 1;
            for (var i = 0; i < arr.length; i++) {
                for (j = 0; j < arr[i].length; j++) {
                    result *= arr[i][j];
                }
            }
            return result;
        }
        mAll([[1, 2,], [3, 4], [5, 6, 7]]);

 

< while loop와 do-while loop >

 while loop는 조건을 먼저 체크한 후에 돌아간다.

 do-while loop는 한 번 돌아간 후에 조건을 체크한다.

        var arr = [];
        var i = 10;

        while (i < 5) {
            arr.push(i);
            i++; 
        }
        // i = 10, arr = []

        var arr = [];
        var i = 10;

        do {
            arr.push(i);
            i++;
        } while (i < 5)
        // i = 11, arr = [10]

 

예제) fN과 property를 입력하면 value가 나오는 함수를 만들어보자.

 없는 이름이라면 No such name,

 없는 property라면 No such property가 나오게 하자.

        var contacts = [
            {
                "fN": "Joan",
                "lN": "Rowling",
                "num": "0212345678",
                "Likes": ["Pizza", "Coding", "Brownie"]
            },
            {
                "fN": "Harry",
                "lN": "Potter",
                "num": "0212341234",
                "Likes": ["Hogwarts", "Magic", "Hagrid"]
            }]

※ value가 존재하면 그것을 사용하고,

 존재하지 않는다면 다른 value를 사용해라

 → 존재 || 없음

 

        function lookup(name, prop) {
            for (var i = 0; i < contacts.length; i++) {
                if (contacts[i]["fN"] === name) {
                    return contacts[i][prop] || "No such property";
                }
            }
            return "No such name."
        }

 

 

< Conditional (Ternary) Operator >

 if-else expression을 한 줄로 쓸 수 있다.

 

        if(a === b) {
            return true;
        } else {
            return false;
        }

↓

        return a === b ? true : false;

 

Multiple Conditional (Ternary) Operator

숫자가 양수이면 positive를, 음수이면 negative를, 0이면 zero를 출력하는 함수를 만들어보자.

        function check (num) {
            return num > 0 ? "positive" : num < 0 ? "negative" : "zero";
        }

 

 

 

< 랜덤 숫자 만들기 >

0  ≤ x ＜ 1   →  Math.random();

0  ≤ x ＜ 20인 정수   →   Math.floor(Math.random() * 20)

 

a와 b 사이의 랜덤 정수 만들기

        function make (min, max) {
            return math.floor(math.random() * (max - min + 1)) + min;
        }

 

 

< parseInt 함수 >

parseInt("10011", 2)

string을 integer로 만들어준다.

integer로 변환될 수 없을 경우에는 Nan을 리턴한다.

 

두 번째 인자는 진법을 나타내고, 빈칸이면 10진법이다.

 

 

youtu.be/PkZNo7MFNFg