본문 바로가기
JavaScript

JavaScript(배열, 사용자정의함수, 호이스팅, 주민등록번호 문제)

by code2772 2022. 11. 4.

[ 목차 ]

    728x90
    반응형

    ✔ 배열(Array)

     

    - 이름과 index로 참조되는 정렬된 값의 집합(자료구조)
- 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 함

배열 선언
let 배열명;

배열 초기화
배열명 = [요소1, 요소2, 요소3 ....];

let arr;
arr =[ 100, 200, 300];

let arr = [100,2 00, 300];


배열 객체로 생성
let 배열명 = new Array(요소1, 요소2....)

자바스크립트 배열의 특징
1. 배열 요소의 타입이 고정되어 있지 않음
let arr = [1, 1.5, '김사과', true]
// 자바는 요소 타입이 동일해야 하지만 자바스크림트는 아니다.

2. 배열 요소의 인덱스가 연속적이지 않아도 됨
let arr;
arr[0] = 1;
arr[1] = 2;
arr[4] = 5; // 연속적이지 않아도 된다.
❗ arr[2](index2), arr[3](index2) 은 undefined가 된다.
// 처음 선언간 어떤것이 들어갈지 모르지만 배열을 넣어 배열로 사용할 수 있다


Array 객체의 메소드
push() : 배열의 요소로 추가
pop() : 배열의 마지막 주소에 있는 값을 제거
shhift() : 배열의 첫번재 주소에 있는 값을 제거
concat() : 두 개의 배열을 합침
join() : 배열 요소 사이에 원하는 문자를 삽입
reverse() : 배열을 역순으로 재배치
sort() : 배열을 오름차순으로 정렬 // 내림차순으로 따로 만들어야한다.


배열을 이용한 반복

user = {'userid : 'apple', 'name' : '김사과'} // 2번 돔
------------------
property


for in 문 : 변수에 배열의 인덱스 또는 객체의 key가 저장
for(변수 in 객체){ // 인덱스가 변수에 들어간다, 0, 1, 2....
객체의 property(ex-'userid : 'apple') 개수만큼 반복할 실행문
}


for of 문 : 변수에 배열의 값 또는 객체의 value가 저장
for(변수 in 객체){ //
객체의 property(ex-'apple') 개수만큼 반복할 실행문
}


forEach 문 : 배열에서만 사용 가능

let arr = [100, 200, 300];

배열명.forEach(function(변수1, 변수2, 변수3){
배열의 요서 개수만큼 반복할 실행문;
...
});

- 변수1 : 값(value) //100 -> 200 -> 300
- 변수2 : 번호(index) // 0 -> 1 -> 2
- 변수3 : 배열객체 // [100, 200, 300] -> [100, 200, 300] -> [100, 200, 300]

    ✔ 배열

    const  arr = [1, 'apple', '김사과', 20, '서울', '잠자기']
    //const는 바로 초기화를 해줘야 한다
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
    console.log(arr[4]);
    console.log(arr[5]);
    console.log(arr[6]);

    arr[5] = '먹기';
    console.log(arr[5]);

    console.log(arr.length);
    // undefined 는 마지막에 있으면  길이를 포함하지 않는다.

    arr[7] = 'A형';
    console.log(arr[6]);
    console.log(arr[7]);

    console.log(arr.length);
    // 가운데에 undefined가 있으면 길이를 undefined도 포함한다.

    console.log('---------------------');

    for(let i=0; i<arr.length;i++){
        console.log(arr[i]);
    }

    console.log('---------------------');
    // const  arr = [1, 'apple', '김사과', 20, '서울', '잠자기']

    arr.push('여자'); // 뒤에 추가해준다.
    console.log(arr);

    arr.shift(); // 가장 앞에있는 것을 삭제
    console.log(arr);

    const sub = ['isfp','천칭자리']
    const arr_concat = arr.concat(sub);
    console.log(arr_concat);

    const arr_join = arr.join('🍎')
    console.log(arr_join);
    //join() : 배열 요소 사이에 원하는 문자를 삽입
    // join시 String으로 변한다.
    console.log(typeof(arr_join));

    const arr2 = ['a','z', 'c','f','r'];
    arr2.sort();
    console.log(arr2);
    arr2.reverse(); // 내림차순 두번 해야한다.
    console.log(arr2);

    console.log('---------------------');
    // const  arr = [1, 'apple', '김사과', 20, '서울', '잠자기']

    for(let i in arr){
        console.log(`i: ${i}, arr[i] : ${arr[i]}`)
        //in 은 insdex로 0부터 대입하는것을 의미한다고 생각하자!
    }

    console.log('---------------------');

    for(let i of arr){
        console.log(`i: ${i}`)
    }

    console.log('---------------------');

    arr.forEach(function(v, i, arr){
        console.log(`v: ${v}, i: ${i}, arr: ${arr}`)
    });


    문제.
원하는 개수만ㅌ큼 숫자를 입력받아 오름차순으로 정렬하는 문서를 만들어보자.
(단, 입력은 prompt를 사용, 출력은 console)

입력받을 숫자의 개수를 입력하세요(prompt)

1번째 숫자를 입력하세요
2번째 숫자를 입력하세요
...
5번째 숫자를 입력하세요

10 20 30 40 50
     

    const cnt = Number(prompt('입력받을 개수를 입력하세요 '));

    let idx =0;
    let arr =[];

    while(idx < cnt){
        arr[idx] = Number(prompt(`${idx+1}번째 숫자를 입력하세요`));
        idx++;
    }

    arr.sort();// 같은 자리수 정렬(문자열 정렬)

    for(let i in arr){
        console.log(arr[i]);
    }


    ✔ 사용자 정의 함수(function)
    - 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
- 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있음(코드를 재활용)

1. 함수 선언식
function 함수명(매개변수1, 매개변수2...){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}

함수명(값1, 값2..); -> 호이스팅 발생

2. 함수 표현식
let 변수명 = function(매개변수1, 매개변수2...)
함수가 호출되었을 때 실행할 문장;
...
return 값;
}

변수명(값1, 값2..);


나머지 매개변수
생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한 번에 지정할 수 있음

function 함수명(매개변수1, ...매개변수2){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}

함수명(값1, 값2, 값3, 값4, 값5);
// 값1은 매개변수1에 들어가고 나머지 값들은 매개변수2에 배열의 형태로 저장하게 된다.


디폴트 매개변수
매개변수의 값을 정하지 않으면 기본값을 변수에 저장

function 함수명(매개변수1 = 값1, 매개변수 = 값2,..){
한수가 호출되었을 때 실행할 문장;
...
return 값;
}

함수명();
함수명(값1, 값2...); // 내가 선택한 개수만큼 변경
​
    ✔ 호이스팅

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>호이스팅</title>
        <script>

            func1();
           
           

            function func1(){// 먼저 위로 가서 위에서 함수를 호출해도 문제는 없다
                alert('func1 호출되었음!')
            } // 호이스팅이 된다. -> 변수선언은 var는 사용하지 말고 let이나 잘확인하자.

            const func2 = function(){
                alert('func2 호출되었음!')
            }// 표현형은 먼저 쓰는것은 불가능하다.
        // 이상한것을 사용하지 말자는 내용때문에 let이나 호이스팅이 안되는 방법이 나왔다.

            func2();
           
        </script>
    </head>
    <body>
        <h2>호이스팅</h2>
       
    </body>
    </html>

    ✔ 함수


    function func1(){
        console.log('func1() 호출')
    }

    const func2 = function(){
        console.log(`func2() 호출`)
    }
    func1();
    func2();

    function func3(num){
        console.log(`전달받은 매개변수의 값 : ${num}`)
    }

    func3(10)
    func3(`apple`)
    func3(true)


    function func4(start, end){
        let sum=0;
        for(let i=start; i<=end; i++){
            sum += i;
        }
        console.log(`${start}부터 ${end}까지의 총합${sum}`)
    }

    func4(1,100)
    func4(1);// 2개의 매개변수에서 1개만 넣을경우 0이 나온다 undefined 때문이다.


    function func5(){
        return '🍎';
    }

    func5(); // consol도 없고 아무것도 없어 미출력
    console.log(func5())
    const presents = func5()
    console.log(presents)

    console.log(`-------------`)

    function func6( x1, ...x2){
        console.log(`x1의 값: ${x1}`) // x1의 값: 30
        console.log(`x2의 값: ${x2}`) // x2의 값: 50,60,90,100,20,40
       
        for(i in x2){
            console.log(`i의 값 : ${i}, x2[i] : ${x2[i]}`)
        }

    }
    func1(30, 50,60,90,100,20,40)


    console.log(`-------------`)


    function func7(num1=1, num2 =1){
        console.log(`num1의 값 : ${num1}, num2의 값 : ${num2}`);    
        console.log(`${num1} * ${num2} = ${num1*num2}`);    
    }

    func7(2,8)
    func7();// 아무것도 넣지 않으면 그저 1로 취급


    // 보너스!

    (function(){
        console.log(`함수를 만들고 바로 호출합니다!`)
    })()// 생성과 동시에 생기고 삭제
    ✔ 주민등록번호 문제
    과제
주민등록번호 유효성 검사 프로그램을 자바스크립트로 구현
(입력은 prompt을 통해 저장)​


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>주민번호</title>
        <script>
             let my = prompt(`😈주민번호를 입력하세요  `);
                let result =0;
                let temp =0;
                let temp1 =0;
                let num = [2,3,4,5,6,7,8,9,2,3,4,5]
            for(let i =0; i < num.length;i++){
                console.log(my.substring(i,i+1+" "))
                result += num[i] *parseInt(my.substring(i, i+1))
            }

            temp = result%11;
            temp1 = 11-temp;
            if(temp1>=10){
                temp1%=10
            }
            if(temp1 == parseInt(my.substring(12,13))){
                alert(`유요한 주민번호입니다.`)
            }else{
               alert(`틀렸습니다.`)
            }

        </script>
        <style>html{background-color: red;}
    </style>
    </head>
    <body>
       
    </body>
    </html>




    반응형
    저작자표시 비영리 변경금지

    'JavaScript' 카테고리의 다른 글

    JavaScript(history, navigator, node, 문서객체모델/노드)  (0) 2022.11.09
    JavaScript(date, window, setTimeout, setInterval, 시계만들기, location, form)  (0) 2022.11.07
    JavaScript(화살표 함수, 객체, 프로토타입, Math/String함수)  (0) 2022.11.07
    JavaScript (대화상자, 연산자, 제어문, 반복문)  (0) 2022.11.04
    JavaScript (기본, 변수, 데이터타입)  (2) 2022.11.04

    관련글

    티스토리툴바