Java Script 함수와 배열

Language/Java Script

Java Script 함수와 배열

원2 2021. 5. 11. 13:59

728x90

재귀

l 함수 선언 – 일반적인 방법(기본 함수)

<script>
    var text1 = "함수 선언 전 호출";
    var text2 = "함수 선언 후 호출";
    printMsg(text1); // 함수 선언 전 호출
    function printMsg(msg) {
        document.write("함수 호출 메세지 : " + msg + "<br>");
    }
    printMsg(text2);
</script>

onclick 속성값으로 함수 호출하기

<script>
    function printMsg(name, age) {
        document.write("학생 이름 : <b>" + name + "</b><br>");
        document.write("학생 나이 : <b>" + age + "</b><br>");
    }
</script>
<button type="button" onclick="printMsg('홍길동', 21)">학생 정보</button>

l 함수 선언 – 함수 표현식으로 작성하는 방법(무명 함수)

<script>
    var text1 = "함수 선언 전 호출 에러";
    var text2 = "함수 선언 후 호출만 가능";
    //printMsg(text1);
    var printMsg = function(msg) {
        document.write("함수 호출 메세지 :" +msg + "<br>");
    }
    printMsg(text2);
</script>

기본 함수와 무명 함수 호출 우선순위

<script>
    var printMsg = function(msg) { // 무명 함수 선언
        document.write("무명 함수 : " + msg + "<br>");
    }
    function printMsg(msg) {    // 기본 함수 선언
        document.write("기본 함수 :" + msg + "<br>");
    }
    printMsg("호출 되었습니다.");
</script>

변수를 이용하여 반환값 출력

<script>
    var result;
    function add(name, n) {
        document.write(name + "학생이 1 부터 " + n + "까지 덧셈 수행 <br>");
        var sum = 0;
        for(var i = 1; i <= n; i++) {
            sum+=i;
        }
        return sum;
    }
    result=add('홍길동',10);
    document.write("결과 : " + result + "<p/>");
    result=add('이영희',100);
    document.write("결과 : " + result + "<p/>");
    
</script>

변수 없이 반환값 출력

<script>
    function add(name, n) {
        document.write(name + " 학생이 1부터 " + n + "까지 덧셈 수행<br>");
        var sum = 0;
        for(var i = 1; i <= n; i++) {
            sum += i;
        }
        return sum;
    }
    document.write("결과 : " + add('홍길동',10) + "<p/>");
    document.write("결과 : " + add('이영희',100) + "<p/>");
</script>

서로 다른 변수로 같은 함수의 반환값 출력

<script>
    function add(x,y) {
        return x+y;
    }
    var calSum = add; // 함수를 변수에 할당
    var addUp = add;  // 함수를 변수에 할당 
    document.write("결과 값 : " + calSum(5,10) + "<br>");
    document.write("결과 값 : " + addUp(3,20) + "<br>");
    
</script>

인자와 매개 변수

서로 다른 변수로 같은 함수의 반환값 출력

자바에서는 오버로딩이 되는데, 자바 스크립트는 안된다.

자바에서는 객체등의 값에따라 자동 오버로딩이 된다.

현재 코드에서는 제일 밑의 코드를 인식한다고 생각하면 된다.

<script>
    function add() {
        var sum = 1;
        return sum;
    }
    function add(x) {
        var sum = x+1;
        return sum;
    }
    function add(x,y) {
        var sum = x+y;
        return sum;
    }
    function add(x,y,z) {
        var sum = x+y+z;
        return sum;
    }
    var r0 = add();
    var r1 = add(1);
    var r2 = add(2, 3);
    var r3 = add(4, 5, 6);
    var r4 = add(7, 8, 9, 10);
    document.write("함수 호출 인자 없음 : " + r0 + "<p/>");
    document.write("함수 호출 인자 부족 : " + r1 + "<p/>");
    document.write("함수 호출 인자 부족 : " + r2 + "<p/>");
    document.write("정상적인 함수 호출 : " + r3 + "<p/>");
    document.write("7, 8 , 9만 인자값으로 적용 : " + r4 + "<p/>");
    
</script>

인자의 개수가 적을 때 처리 방법

<script>
    function add(x, y, z) {
        var sum;
        if( (y===undefined) && (z===undefined)) {
            sum = x;
           }
        else if (z===undefined) {
                 sum = x+y;
        }
        else {
            sum = x+y+z;
        }
        return sum;
    }
    var r1=add(2);
    var r2=add(2, 3);
    var r3=add(4, 5, 6);
    document.write("함수 호출 인자 부족 : " + r1 + "<p/>");
    document.write("함수 호출 인자 부족 : " + r2 + "<p/>");
    document.write("정상적인 함수 호출 : " + r3 + "<p/>");
</script>

인자를 arguments 객체로 처리

arguments.length 를 사용하면 입력되어 있는 인수 만큼 실행을 하겠다.

arguments = 인수

<script>
    function add() {
        var i, sum = 0;
        for(i = 0; i<arguments.length; i++) {
            sum = sum+arguments[i];
        }
        document.write("수행 결과 : " + sum + "<p/>");
    }
    add(2, 3);
    add(2, 3, 4);
    add(4, 5, 6, 7, 8);
    add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
</script>

배열

자바 에서는 배열이 {} 지만

자바 스크립트에서는 [] 이다.

배열 변수에 초깃값을 할당하여 배열 만들기

<script>
    var city = ["Seoul", "Busan", "Incheon"]; // 배열 리터럴
    function printArr() {
        var i;
        for(i = 0; i < city.length; i++) {
            document.write("배열 데이터[" + i + "] = " + city[i] + "<br>");
        }
    }
    printArr();
</script>

배열 변수 먼저 선언하고 원소 값은 따로 할당

<script>
    var city=[];
    city[0] = "Seoul";
    city[1] = "Busan";
    city[2] = "Tokyo";
    city[3] = "Osaka";
    city[4] = "Hukuoka";
    function printArr() {
        var i;
        for(i = 0; i < city.length; i++) {
            document.write("배열 데이터 [" + i + "] = " + city[i] + "<br>");
        }
    }
    printArr();
</script>

배열에 공백 데이터 포함

<script>
    var city = ["Seoul", , "Busan", , "Tokyo"];
    function printArr() {
        var i;
        for(i = 0; i < city.length; i++) {
            document.write("배열 데이터 [" + i + "] = " + city[i] + "<br>");
        }
    }
    printArr();
</script>

공백 데이터를 포함한 배열 연산

<script>
    var com = [95, 88, , 72, 68, , 99, 82, 78, 85];
    var getAvg;
    function printAvg() {
        var i, sum = 0;
        var n = com.length;
        document.write(n + "명의 점수 입력 <p/>");
        for(i = 0; i < n; i++) {
            sum += com[i];
        }
        return (sum/n);
    }
    getAvg=printAvg();
    document.write("평균 : <b>" + getAvg + "</b><p/>");
</script>

공백 데이터 제외하고 연산

<script>
    var com = [95, 88, , 72, 68, , 99, 82, 78, 87];
    var getAvg;
    function printArr(){
        var i;
        var sum = 0; // 입력 점수 카운트 변수
        var count = 0;
        var n = com.length;
        document.write( n + "명의 점수 입력<p/>");
        for(i = 0; i < n; i++) {
            if(com[i]===undefined){
               continue;
               } // 만약 com 의  값이 없다면 세지 않고 for문으로 가서 나머지를 실행한다.
            else {
                sum += com[i];
                count++ // count는 1씩 증가
            }
        }
        document.write("점수를 입력한 학생 : " + count + "명<p/>");
        document.write("총합 : " + sum + "<p/>");
        return (sum/count); // sum/count의 값을 리턴해서 printArr에 집어넣음.
    }
    getAvg=printArr();
    document.write("평균 : " + getAvg + "<p/>");
</script>

배열에 다양한 데이터 타입을 가진 원소 저장

<script>
    var x = 5;
    var arr = [100, "Seoul", true, x];
    function printArr() {
        var i;
        for(i = 0; i < arr.length; i++) {
            document.write("배열 데이터 [" + i + "] = " + arr[i] + "<br>");
        }
    }
    printArr();
</script>

같은 데이터 타입을 가진 배열 연산

<script>
    var arr = [10, 20, 30, 40, 50]; // 같은 데이터 타입 요소
    function printArr() {
        var i, sum = 0;
        for(i = 0; i < arr.length; i++) {
            sum += arr[i]; // 배열 연산 코드
        }
        return sum; 
    }
    var result=printArr();
    document.write("배열 원소 합 : " + result + "<br>");
</script>

다른 데이터 타입을 가진 배열 연산

<script>
    var arr = [10, 20, 30, 40, '50']; // 수칙연산이 아닌 50이라는 문자가 뒤에 붙는다.
    function printArr() {
        var i, sum = 0;
        for(i = 0; i < arr.length; i++) {
            sum += arr[i];
        }
        return sum;
    }
    var result=printArr();
    document.write("배열 원소 합 : " + result + "<br>");
</script>

배열 객체 생성

* 객체 배열과 배열 객체는 다르다

<script>
    var city = new Array("Seoul","Busan","Hukuoka");
    function printArr() {
        var i;
        for(i = 0; i < city.length; i++) {
            document.write("배열 데이터 [" + i + "] = " + city[i] + "<br>");
        }
    }
    printArr();
</script>

배열 객체 생성 확인

<script>
    var city = new Array("Seoul", "Busan", "Tokyo");
    function printArr() {
        if(city instanceof Array) {
           document.write("배열 객체가 생성되었습니다.<p/>");
            var i;
            for(i = 0; i < city.length; i++) {
                document.write("배열 데이터 ["+ i +"] = " + city[i] + "<br>");
            }
       }else {
         document.write("배열 객체가 아닙니다.<br>");  
         document.write("데이터 : " + city + "<br>");
       }
    }
    printArr();
    document.write("<p/> city 변수 타입 : " + typeof city + "<br>");
    document.write("배열 객체 확인 결과 : " + Array.isArray(city) + "<br>");
</script>

배열에 1부터 100까지 저장한 후 모두 더하기

<script>
    var arrdata = [];
    function insertArr() {  // 배열 데이터 입력 함수
        var i = 0;
        for(i = 0; i <= 99; i++) {
            arrdata[i] = i + 1; // 1~100까지 저장 
            //0~99는 배열의 수 안의 값은 1부터 100이 박힌다. +1의 이유
            
        }
        selectArr();
    }
    function selectArr() {  // 배열 데이터 조회 함수
        var i;
        for(i = 0; i < arrdata.length; i++) {
            document.write(arrdata[i] + " ");   // 데이터 조회
        }
        addArr();
    }
    function addArr() {     // 배열 데이터 덧셈 함수
        var i;
        var sum = 0;
        for(i = 0; i < arrdata.length; i++) {
            sum += arrdata[i];  // 덧셈 연산.
        }
        document.write("<p/> 배열 데이터 뎃셈 연산 결과 : " + sum + "<p/>");
        document.write("<a href = 'ex10_21.html'>돌아가기</a>");
    }
</script>
<button type="button" onclick="insertArr()">배열 생성/조회/연산</button>

홀수 번째 저장된 데이터만 0으로 초기화

여기서의 홀수번째는 인덱스의 번호 [i]가 홀수 번째라는것. 0 ,1, 2, 3, 4 ....

<script>
    var arrdata = [];
    function insertArr() {
        var i = 0;
        for(i = 0; i <= 99; i++) {
            arrdata[i] = i+1; //  1~100 값의 저장
            document.write(arrdata[i]+ " ");
        }
    }
    function delArr() {
        var i;
        for(i = 0 ; i < arrdata.length; i++) {
            if(i%2==0) {
               arrdata[i] = 0;
               }
            continue;
        }
        selectArr();
    }
    function selectArr() {
        var i;
        for(i = 0; i <arrdata.length; i++) {
            document.write(arrdata[i] + " ");
        }
        document.write("<p>홀수 번째 데이터 초기화 완료!" + "</p>");
        document.write("<a href = 'ex10_22.html'>돌아가기</a>");
    }
    insertArr();
</script>
<p/>
<button type="button" onclick="delArr()">배열의 홀수 번째 데이터 초기화</button>

배열에 저장된 데이터 삭제

<script>
    var arrdata= [];
    function insertArr() {
        var i = 0;
        for(i = 0; i <= 99; i++) {
           arrdata[i] = i+1; // 데이터 저장
            document.write(arrdata[i] + " "); // 데이터 출력
        }
        document.write("<p>배열 크기 : " + arrdata.length + "</p>");
    }
    function delDataArr() {
        var i;
        for(i = 0; i < arrdata.length; i++) {
            arrdata[i] = 0; // 배열 데이터를 0으로 초기화
        }
        selectArr();
    }
    function allDelArr() {
        arrdata.length=0; // 배열 초기화
        selectArr();
    }
    function selectArr() {
        var i; 
        for(i = 0; i < arrdata.length; i++) {
            document.write(arrdata[i] + " ");
        }
        document.write("<p>배열 크기 : " + arrdata.length + "</p>");
        document.write("<a href = 'ex10_23.html'>냉정하게 돌아가버리기</a>");
    }
    insertArr();
</script>
<p/>
<button type="button" onclick="delDataArr()">배열 데이터 초기화</button>
<button type="button" onclick="allDelArr()">배열 데이터 삭제</button>

l join

- 배열에 저장된 모든 원소를 문자열로 변환한 후 연결하여 출력

조인() 메서드는 배열(또는 배열 유사 개체)의 모든 요소를 쉼표 또는
지정된 구분 문자열로 구분하여 연결하여 새 문자열을 만들고 반환합니다.
배열에 항목이 하나만 있으면 구분 기호를 사용하지 않고 해당 항목이 반환됩니다.

join 메소드 활용

<script>
    var city =["서울", "부산", "대구"];
    var joindata1 = city.join();
    var joindata2 = city.join('-');
    var joindata3 = city.join(' 그리고~ ');
    document.write("조인 결과1 : " + joindata1 + "<p/>");
    document.write("조인 결과2 : " + joindata2 + "<p/>");
    document.write("조인 결과3 : " + joindata3 + "<p/>");
</script>

l concat

- 지정된 배열에 두 개 이상의 데이터를 결합하거나 다른 배열 객체를 결합

<script>
    var city1 = ["서울", "부산", "대전"];
    var city2 = ["울산", "대구", "창원"];
    var city3 = ["마산", "정관", "김해"];
    var data1 = city1.concat("수원", "양평");
    var data2 = city1.concat(city2);
    var data3 = city1.concat(city2, city3);
    document.write("결과1 : " + data1 + "<p/>");
    document.write("결과2 : " + data2 + "<p/>");
    document.write("결과3 : " + data3 + "<p/>");
</script>

l reverse

- 배열 원소의 순서를 반대로 정렬

reverse를 하고나면 원래 데이터도 reverse되어 값이 변경된다.

<script>
    var data = [9, 8, 7, 6, 5, 4, 3, 2, 1];
    document.write("배열 : " + data.join() + "<p/>"); 
    var rdata = data.reverse();
    document.write("결과 : " + rdata + "<p/>");
</script>

l sort

- 배열 원소를 정렬

sort도 정렬하고 나서 원래 데이터도 변경된다.

function(a, b) {return a-b;} 는 함수 : 대~충 위치변경 함수.

<script>
    var nadata1 = [19, 24, 65, 43, 32, 14 , 43, 27];
    var nadata2 = [123, 342, 2, 54, 67, 1234, 34, 5467];
    var edata = ['Apple', 'Html', 'Java', 'Sql' , 'Jsc'];
    var kdata = ['서울', '부산', '대구', '연산', '사상'];
    document.write("수치 정렬1 : " + nadata1.sort() + " <p/>");
    document.write("수치 정렬2 : " + nadata2.sort() + "<p/>");
    document.write("수치 정렬3 : " + nadata2.sort(function(a, b) {return a-b;}) + "<p/>");
    document.write("영문정렬 : " + edata.sort() + "<p/>");
    document.write("한글 정렬 : " + kdata.sort() + "<p/>");
</script>

l slice

- 배열의 특정 범위에 속하는 원소만 선택하여 배열 생성

<script>
    var kdata = ['서울','부산','구포','대구','인천','대전','동래'];
    var str1 = kdata.slice(0, 4);
    var str2 = kdata.slice(2, -1);
    var str3 = kdata.slice(-4, -2);
    document.write("부분 배열 1 : " + str1 + "<p/>");
    document.write("부분 배열 2 : " + str2 + "<p/>");
    document.write("부분 배열 3 : " + str3 + "<p/>");
</script>

l splice

- 배열의 원소 추가 또는 제거

원본 데이터가 변경된다.

<script>
    var kdata = ['서울','부산','구포','대구','대전'];
    var str1 = kdata.splice(1, 2);
    document.write("삭제 데이터 : " + str1 + "<br>");
    document.write("남은 배열 : " + kdata + "<p/>");
    
    var str2 = kdata.splice(1, 1, '강릉', '세종'); // 0,1,2 에서 1에서 0,1 까지 삭제 그리고 그자리에 넣음
    document.write("삭제 데이터 : " + str2 + "<br>");
    document.write("남은 배열 : " + kdata + "<p/>");
    
    var str3 = kdata.splice(2, Number.MAX_VALUE);
    document.write("삭제 데이터 : " + str3 + "<br>");
    document.write("남은 배열 : " + kdata + "<p/>");
</script>

728x90

저작자표시 (새창열림)

'Language > Java Script' 카테고리의 다른 글

JavaScript - JSON (0)	2021.12.14
시계만들기 (0)	2021.05.14
Java Script 객체 (0)	2021.05.12
Java Script 배열 2 (0)	2021.05.12
Java Script 기본2 (0)	2021.05.11
Java Script 기본 (0)	2021.05.10

현재글Java Script 함수와 배열

처음부터 시작하는 Java

hello world!

Docker, Kotlin, 알고리즘, vue, useState, java, datatables, intellij, springboot, 프로그래머스, OpenLayers, useReducer, sql, array, SPREAD, jpa, GIS, react, Git, js,

Today :
Yesterday :

처음부터 시작하는 Java