시베리안 허숙희의 자바스크립트 비기닝 10 (배열 Array)

자바스크립트

by e7e 2023. 6. 7. 17:14

문자열, 배열, JSON 중에 문자열은 아라보았으닝, 다음은 배열을 보장!

배열은 차므로 쉬운데, 초보자들은 처음에 이상하게 느껴질 수 있당!

박스 속에 박스, 그 속에 또 박스를 넣을 수 있음을 기억하장! (생각하는 대로...)

사실 컴퓨터 세계에선 돌고래 속에 돌고래를 그 안에 사람 넣는 것도 가능하당!

배열(박스)엔 length라는 속성이 있어서, 배열속에 몇개가 있는지 알려주는 데,

사실 이 속성이 배열을 잘 쓰는데 가장 중요하당! 콜백(callback)함수를 잘 만들게 되면,

대부분의 메소드들은 아주 쉽게 그냥 맹글어 쓸 수 있게 된당! (만들 수 있다면 어렵지않당)

배열.html을 아래 내용으로 작성하고 length값의 변화에 주목하장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // 배열 선언법
    // 아래는 잘 안쓰는 선언법 6개짜링, 써도 아무도 뭐라 안함
    var bts = new Array(6); 

    // 자주 쓰는 선언법(리터럴방식), length 값의 변화 누느로 추적
    var blackPink = []; // 빈배열 선언, 요따구로 많이 씀
    alert("length: " + blackPink.length);
    blackPink[0] = "로제";
    alert("length: " + blackPink.length);
    alert("blackPink: " + blackPink);

    blackPink[1] = "제니";
    alert("length: " + blackPink.length);
    alert("blackPink: " + blackPink);

    blackPink[2] = "리사";
    alert("length: " + blackPink.length);
    alert("blackPink: " + blackPink);

    blackPink[3] = "지수";
    alert("length: " + blackPink.length);
    alert("blackPink: " + blackPink);

    //선언과 동시에 초기화
    var myBlackPink = ["로제","제니","리사","지수"];
    alert("myBlackPink:" + myBlackPink);

    //length를 이용하여 값넣깅(length를 이용하면 좋당! 왱? index와 연관지어보장)
    var oneToTen = [];
    for(var i=1; i<=4; i++){
        oneToTen[oneToTen.length] = "값"+i;
    }
    alert("oneToTen: " + oneToTen);
    
</script>

요기서 억지로 한가지 짚고 넘어가면 alert(배열이름) 했을 때

실제는 alert(배열이름.toString())이 실행된당! 그래서 ,(꼼마)로 구부된 값이 출력된당!

배열속의 배열도 아래 코드를 실행시켜 누느로 꼬옥 화긴해 보장!

(일단 배열안의 모든 데이타는 쉽게 문자열로 통일시켰당!)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // 배열 속 배열
    var momArr = [];
    
    var boyArr = ["정국","뷔","지민","슈가","진","RM"];
    momArr[momArr.length] = boyArr; // momArr[0] = boyArr

    var girlArr = ["로제","제니","리사","지수"];
    momArr[momArr.length] = girlArr; // momArr[1] = girlArr

    alert(boyArr[1]);   // 아래 표현과 동일
    alert(momArr[0][1]); // boyArr은 momArr[0]와 같당! 

    // 선언과 동시에 초기화
    var papaArr = [boyArr,girlArr];
    papaArr[1][3] = papaArr[1][3] + " 메롱"; // girl[3] += "메롱" 
    alert("참조 확인: " + momArr[1][3]);  
    // papaArr[1] 과 momArr[1]은 똑같은 girlArr배열을 가리킴! OK?

    // 배열 반복 돌려보깅!
    for(var i=0; i<momArr.length; i++){
        var childArr = momArr[i];
        for(j=0; j<childArr.length; j++){
            alert("i=> " + i + " j=>" + j + " 값=>" + childArr[j]);
            // 윗 라인과 동일한 의미! 누느로 결과 화긴!
            alert("i=> " + i + " j=>" + j + " 값=>" + papaArr[i][j]);
        }
    }
</script>

자바스크립트 배열은 자바의 배열,List보다 편하다,변수 타입이 다른 것을 마구 담아도 상관없당!

아래 코드도 차분히 눈이 코드를 따라잡을 수 있을 때까지 확인하장!

(당신은 긍정의 힘이 넘치는 사람이당. 결코 이상하게 모르면 반복하게 된당!)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // 배열 속에 서로 다른 변수 타입
    var mixedArr = [];
    mixedArr[mixedArr.length] = "roze";// 문자열
    mixedArr[mixedArr.length] = 26;    // 숫자
    mixedArr[mixedArr.length] = ["Gone","On the ground"];
    mixedArr[mixedArr.length] = {
        realName:"박채영",
        mbti:"ENFP",
        family:["파파","맘"],
        friend: {
            name:"E7E",
            like:["JS","SPRING"]
        }
    };

    // 위의 나열 방식을 한번에 초기화 하면 아래와 같당!
    var mixedArr2 = [
        "roze",
        26,
        ["Gone","On the ground"],
        {
            realName:"박채영",
            mbti:"ENFP",
            family:["파파","맘"],
            friend: {
                name:"E7E",
                like:["JS","SPRING"]
            }
        }
    ];

    //디버깅 실력을 키우려면 로그를 습관적으로 찍으며, 누느로 값 확인!
    console.log("체킁1: ", mixedArr);
    console.log("체킁2: ", mixedArr2);

    alert("진짜이름: " + mixedArr2[3].realName);
    alert("frend name: " + mixedArr[3].friend.name);

</script>

훌륭하당!!, 아직 Callback(콜백)함수는 많이 연습 안했으니, 콜백 안쓰는 메소드 몇개만 확인하장!

나머진 function 키워드가 가진 class의 의미를 확인한 다음에 하도록 하장

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    var blackPink = ["로제","제니","리사","지수"];
    
    //push는 아주 많이 사용된당(배열 요소 추강)
    blackPink.push("주현영"); // blackPink[blackPink.length]="주현영"
    alert("일단 전체값 확인: " + blackPink + " 갯수: " + blackPink.length);

    alert("배열 값 찾깅: " + blackPink.includes("로제")); // true/false
    alert("배열 값 찾깅: " + blackPink.indexOf("제니") ); // index번호
    alert("배열 값 찾깅: " + blackPink.indexOf("e7e") ); // 없으면 -1

    blackPink.splice(3,1); // index 3번부터 1개 삭제
    alert("일단 전체값 확인: " + blackPink + " 갯수: " + blackPink.length);

    // 요건 일단 그냥 참조만 요따구로는 잘 안씀!
    blackPink.splice(2,1,"슈퍼맨","원더우먼"); 
    // index 2번 부터 1개 지우고, 2번에 슈퍼맨을 3번에 원더우먼을 넣어랑
    alert("일단 전체값 확인: " + blackPink + " 갯수: " + blackPink.length);

</script>

혹 너무 수동적일지도 모를 당신을 위해 특별 생각해 볼 문제를 준비했당!

아래 코드를 실행해 보고, 결과를 설명할 수 있겠는강? 힌트: 사기성 문제당

아래와 같은 코드는 Usual? / Good? / Bad?

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
 var testArr = ["흥","치","뽕"];

function arrClr1(pArr){
    pArr = [];
}
arrClr1(testArr);
alert("체킁1: " + testArr);


function arrClr2(){
    testArr = [];
}
arrClr2();
alert("체킁2: " + testArr);

</script>

어떻게 공부해야 프로그램을 잘 할 수 있습니깡? 많이 받는 질문이당!

일단 학교에서 시험 준비하는 방식은 완전 No! No! No!당!(입은 대우 받을 것이다)

만들어진 의도된 Problem을 많이 풀어보는 방식 -> 성취감을 위해 쪼메 필요!

거창한 이야기보다는 초보자는 끊임없이 로그를 찍어서 값을 누느로 보는 습관을

만들어서 , 디버깅에 상상력이 아닌 보이는 값을 이용한다면 기초공사 벨이 굿!

먼저 잘못된 곳이 어딘지? 그걸 찾는 것이 Problem 해결의 시작이당!

https://www.youtube.com/watch?v=yiSVoXw3FX4

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 12 (콜백함수 callback) (0)	2023.06.09
시베리안 허숙희의 자바스크립트 비기닝 11 (JSON) (0)	2023.06.08
시베리안 허숙희의 자바스크립트 비기닝 9 ( 문자열 메소드) (2)	2023.06.06
시베리안 허숙희의 자바스크립트 비기닝 8 (연산자) (0)	2023.06.05
시베리안 허숙희의 자바스크립트 비기닝 7 (함수 function) (0)	2023.06.03