본문 바로가기

JavaScript/DAY 34 _ 23.10.11

배열

            // 배열
            // --> 자바스크립트에서 배열은 Array 객체로 다뤄집니다.

            // 1. 배열의 생성

            const arr1 = [];    // --> 1. 빈배열 : (배열이 안바뀐다는 가정하에) 보통 배열은 const겠지?
            const arr2 = [1, 5, "안녕", false];     // --> 2. 초기값을 넣은 배열★★★


            // 2. 값의 추가

            arr2.push("push사용");        // push() 메소드를 이용하는 방법 --> 가장 일반적인 방법★★★

            arr2[6] = "자바스크립트";      // 특정 인덱스를 지정하여 추가하는 방법 --> 가능은하나, 사용X (수정용도로는 ㄱㅊ아)

            arr2[arr2.length] = 100;      // length 프로퍼티를 이용하는 방법

 

            // 3. 값의 접근

            console.log(arr2);            // [1, 5, '안녕', false, 'push사용', empty, '자바스크립트', 100]
            console.log(arr2[2]);         // 안녕

 

            // 4. 반복문 활용

	 	 // 4-1. for-in : (ES5이전방식) 잘 안쓴다 (in : 배열의 길이만큼 나오네)
            for(i in arr2){
                console.log(i);
            }   // --> 0, 1, 2, 3, 4, 6, 7 : 5번째의 배열이 empty니까.... 숫자도안나오네

            // 4-2. for-of : (ES6방식) (of : 배열의 내용이 순서대로 나온다. empty면 undefined로)
            for(e of arr2){
                console.log(e);
            }   // --> 1, 5, 안녕, false, push사용, undefined, 자바스크립트, 100

            console.log(arr2.length);   // 8

 

            // 5. 배열의 해체

            const arr3 = ["배열해체", 1, true]; // 예시 배열

            const [a, b, c] = arr3;

            console.log(a);
            console.log(b);
            console.log(c);

 

// 배열 해체 (Destructuring):
            // JavaScript에서 변수 할당 및 값 추출을 수행하는데 사용됨

            {
                // 1. 함수 리턴 값 분석 : 
                // 함수가 여러 값을 반환할 때, 배열 해체를 사용하여 해당 값을 변수에 쉽게 할당할 수 있습니다.
                function getCoordinates() {
                    return [10, 20];
                }

                const [x, y] = getCoordinates();
                console.log(x); // 10
                console.log(y); // 20
            }
            
            {
                // 2. 배열 순환 : 
                // 반복문을 사용하여 배열의 각 요소에 접근할 때 배열 해체를 사용할 수 있습니다.
                const numbers = [1, 2, 3, 4, 5];
                
                for (const num of numbers) {
                    console.log(num);
                }

            }    

            {
                // 3. 함수 매개변수 : 
                // 함수의 매개변수를 객체 해체 또는 배열 해체를 통해 전달할 수 있습니다.
                // 이렇게 하면 함수가 예상한 순서로 인수를 받을 수 있습니다.

                console.log("함수매개변수");
                
                function printNumbers([x, y, z]) {
                    console.log(x, y, z);
                }

                const numbers = [1, 2, 3];
                printNumbers(numbers); // 1 2 3
                printNumbers([23,324,true]);
            }
    
            {
                // 4. 객체 속성에 접근 : 
                // 객체 속성에 접근할 때도 객체 해체를 사용할 수 있습니다.
                const person = { name: "Alice", age: 30 };
                const { age, name } = person;
                console.log(name); // "Alice"
                console.log(age); // 30

                // {}안의 변수명은 다 같아야하고, {} 안에서의 순서는 상관없음!!!!

            }

 

            // === 추가내용 : 몰라도됨!!!! ===

            arr1[0] = 3;
            arr1[1] = 5;
            console.log(arr1);      // [3, 5]

            arr1[5] = 10;
            console.log(arr1);      // [3, 5, empty×3, 10]

            console.log(arr1[2]);   // undefined : null보다 상위. 값이 정의되지 않았음을 정의하고있음
            arr1[6] = undefined;    // --> 이렇게 넣을 수도 있으나.... 금지금지
            console.log(arr1);

'JavaScript > DAY 34 _ 23.10.11' 카테고리의 다른 글

함수2  (0) 2023.10.11
함수 Basic  (0) 2023.10.11
조건/반복문  (1) 2023.10.11
연산자  (0) 2023.10.11
변수  (0) 2023.10.11