Object(객체) / Array(배열)

Object (객체)

객체(object) = 변수(property) + 함수(method);

 

🙾 새 객체 생성 할 때

<script>
        /* 
        새 객체를 생성
        var 객체명 = { } // 빈 객체를 생성
        객체명.변수명 = 값; */

        var s1 = {}
        s1.kor = 100;
        s1.eng = 80;
        s1.math = 90;
        console.log(s1);
        console.log(s1.eng);
        // s1(객체)안의 변수(eng)를 출력 할 때 .(점)찍기
</script>

🙾 객체를 생성과 동시에 값을 할당 할 때

<script>
               /* 
        객체를 생성과 동시에 값을 할당
        var 객체명 = {변수:값, 변수:값,...}*/
        
        var s1 = {
            kor : 100,
            eng : 80,
            math : 90,
            total:function(){
                var sum = this.kor+this.eng+this.math;
                return sum;  // this = s1 = 변수 이름
            }
        }
        console.log(s1);
        console.log(s1.eng);
        console.log(s1.total());
</script>

 

---

Array (배열)

- 비슷한 구조들은 묶어서 저장하기

- index 0부터 시작

 

🙾 새 배열 생성

    <script>
        /* 
        새 배열 생성
        var 배열명 = []; // 빈배열 
        */

        배열명 [0] = 값;
        배열명 [1] = 값;
    </script>

🙾 배열을 만들고 값을 할당

<script>
        // var 배열명 [값, 값, 값]
        
        var mynums = [];
        mynums[0] = 2;
        mynums[1] = 5;
        mynums[2] = 10;
        console.log(mynums);
        console.log(mynums[2]);
        console.log(mynums.length);
        
        var frontlangs = ['html', 'css', 'javascript'];
        console.log(frontlangs[1]);
        console.log(frontlangs.length);
</script>

 

▏join

- 배열의 문자열을 한 문장으로 묶어 주는 것

    <script>
        var frontlangs2 = frontlangs.join('/');
        console.log(frontlangs2);
    </script>

 

▏reverse

- 원소들을 반대로 정렬

- 원본도 수정됨

    <script>
        var reserveLangs = frontlangs.reverse();
        console.log(reserveLangs);
        console.log(frontlangs);
    </script>

 

▏sort

- 내림차순, 오름차순, 알파벳순, 가나다순

- 원본도 수정됨

    <script>
        var fruits = ['apple', 'orange', 'mango']
        console.log(fruits);
        fruits.sort();
        console.log(fruits);

        var nums = [10,50,20,40];
        nums.sort();
        console.log(nums);
        
        /* 
        위와 같은 오름차순 같은 방식
        */
        nums.sort(function(){
        return -1;
        });
        console.log(nums); 
        
        
        /*
        내림차순 방식
        */
        nums.sort(function(a,b){
        return b-a;
        });
        console.log(nums);
    </script>

➡ console에서 확인하면 순서대로 나열되어 있음

➡ 내림차순은 숫자만 가능 (문자 불가능)

 

▏push

- 기존의 배열 마지막에 값 추가

<script>
        var fruits = ['apple', 'orange', 'mango']
        fruits.push('grape');
        console.log(fruits);
</script>

 

▏pop

- 기존의 배열 마지막에 값 제거

<script>
        var fruits = ['apple', 'orange', 'mango']
        fruits.pop();
        console.log(fruits);
</script>

 

▏unshift

- 배열의 첫번째 값을 추가

<script>
        var fruits = ['apple', 'orange', 'mango']
        fruits.unshift('grape');
        console.log(fruits);
</script>

 

▏shift

- 배열의 첫번째 값을 제거

<script>
        var fruits = ['apple', 'orange', 'mango']
        fruits.shift('grape');
        console.log(fruits);
</script>

 

▏slice ★

- 배열에서 인덱스 번호로 원소를 복사(추출)
- 시작 번호부터 끝 번호 바로 앞 요소까지 복사

    <script>
        var orgArr = [0,1,2,3,4,5];
        var newArr = orgArr.slice(0,3);
        console.log(orgArr);
        console.log(newArr);
        console.log(orgArr.slice(2,5)); //2,3,4만 출력!
    </script>

 

▏concat (배열 병합)

    <script>
        var arr1 = ['html', 'css', 'javascript'];
        var arr2 = ['phh', 'asp', 'jsp'];
        var arr3= arr1.concat(arr2);
        console.log(arr3);
    </script>

 

▏filter

- 조건에 맞는 원소만 추출해서 새 배열을 만드는 것

    <script>
    	/* 5로 나눴을 때 나머지 값이 0으로 떨어지는 것들만 추출 */     
        var nums4 = [10,7,25,22,30];
        var mynums2 = nums4.filter(function(item){
            return item % 5 == 0;
        });
        console.log(mynums2);
    </script>