loop

배열의 데이터를 꺼낼 때 for, for of, foreach 예제

1차원 배열

for문


let arr = ["가","나","다","라"];

for(let i=0;i<arr.length;i++){

    console.log(arr[i]);

}

for of문


let arr = ["가","나","다","라"];

for(let el of arr){

    console.log(el);

}

forEach 메서드


let arr = ["가","나","다","라"];

arr.forEach(function(el, idx){

    console.log("arr[" + idx "] = " + el);

})

결과

가
나
다
라

2차원 배열

for문


let arr = [

    ["서울시청","https://www.seoul.go.kr/"],
    ["경기도청","https://www.gg.go.kr/"],
    ["제주도청","https://www.jeju.go.kr/"],
    ["강원도청","https://state.gwd.go.kr/"]

];


for(let i=0;i<arr.length;i++){

    console.log("기관명 : " + arr[i][0]);
    console.log("누리집 : " + arr[i][1]);

}

for of문


let arr = [

    ["서울시청","https://www.seoul.go.kr/"],
    ["경기도청","https://www.gg.go.kr/"],
    ["제주도청","https://www.jeju.go.kr/"],
    ["강원도청","https://state.gwd.go.kr/"]

];


for(let el of arr){

    console.log("기관명 : " + arr[0]);
    console.log("누리집 : " + arr[1]);

}

forEach 메서드


let arr = [

    ["서울시청","https://www.seoul.go.kr/"],
    ["경기도청","https://www.gg.go.kr/"],
    ["제주도청","https://www.jeju.go.kr/"],
    ["강원도청","https://state.gwd.go.kr/"]

];


arr.forEach(function(el, idx){

    console.log("기관명 : " + el[0]);
    console.log("누리집 : " + el[1]);

})

출력결과

기관명 : 서울시청
누리집 : https://www.seoul.go.kr/
기관명 : 경기도청
누리집 : https://www.gg.go.kr/
기관명 : 제주도청
누리집 : https://www.jeju.go.kr/
기관명 : 강원도청
누리집 : https://state.gwd.go.kr/

객체 배열 (Object Array)

for문


let arr = [

    {
    orgname:"서울시청", 
    url:"https://www.seoul.go.kr/", 
    latitude:"37.56677014701592", 
    longitude:"126.97867491234639"
    },

    {
    orgname:"경기도청", 
    url:"https://www.gg.go.kr/", 
    latitude:"37.28893135508412", 
    longitude:"127.05347693534611"
    },

    {
    orgname:"제주도청", 
    url:"https://www.jeju.go.kr/", 
    latitude:"33.48889985012181", 
    longitude:"126.49822386525447"},

    {
    orgname:"강원도청", 
    url:"https://state.gwd.go.kr/", 
    latitude:"37.88530735666828", 
    longitude:"127.72982257639035"
    }

];


for(let i=0;i<arr.length;i++){

console.log("기관명 : " + arr[i].orgname);
console.log("누리집 : " + arr[i].url);
console.log("위도 : " + arr[i].latitude);
console.log("경도 : " + arr[i].longitude);


}


for of문


let arr = [

    {
    orgname:"서울시청", 
    url:"https://www.seoul.go.kr/", 
    latitude:"37.56677014701592", 
    longitude:"126.97867491234639"
    },

    {
    orgname:"경기도청", 
    url:"https://www.gg.go.kr/", 
    latitude:"37.28893135508412", 
    longitude:"127.05347693534611"
    },

    {
    orgname:"제주도청", 
    url:"https://www.jeju.go.kr/", 
    latitude:"33.48889985012181", 
    longitude:"126.49822386525447"},

    {
    orgname:"강원도청", 
    url:"https://state.gwd.go.kr/", 
    latitude:"37.88530735666828", 
    longitude:"127.72982257639035"
    }

];


for(let el of arr){

console.log("기관명 : " + el.orgname);
console.log("누리집 : " + el.url);
console.log("위도 : " + el.latitude);
console.log("경도 : " + el.longitude);

}

forEach 메서드


let arr = [

    {
    orgname:"서울시청", 
    url:"https://www.seoul.go.kr/", 
    latitude:"37.56677014701592", 
    longitude:"126.97867491234639"
    },

    {
    orgname:"경기도청", 
    url:"https://www.gg.go.kr/", 
    latitude:"37.28893135508412", 
    longitude:"127.05347693534611"
    },

    {
    orgname:"제주도청", 
    url:"https://www.jeju.go.kr/", 
    latitude:"33.48889985012181", 
    longitude:"126.49822386525447"},

    {
    orgname:"강원도청", 
    url:"https://state.gwd.go.kr/", 
    latitude:"37.88530735666828", 
    longitude:"127.72982257639035"
    }

];


arr.forEach(function(el, idx){

console.log("기관명 : " + el.orgname);
console.log("누리집 : " + el.url);
console.log("위도 : " + el.latitude);
console.log("경도 : " + el.longitude);

});

출력결과

기관명 : 서울시청
누리집 : https://www.seoul.go.kr/
위도 : 37.56677014701592
경도 : 126.97867491234639
기관명 : 경기도청
누리집 : https://www.gg.go.kr/
위도 : 37.28893135508412
경도 : 127.05347693534611
기관명 : 제주도청
누리집 : https://www.jeju.go.kr/
위도 : 33.48889985012181
경도 : 126.49822386525447
기관명 : 강원도청
누리집 : https://state.gwd.go.kr/
위도 : 37.88530735666828
경도 : 127.72982257639035

성능 차이

  1. for 문
    반복 조건을 미리 정하여 인덱스로 배열에 접근하기 때문에 빠르다.

  2. for of 문
    ES6에 도입된 반복문으로 배열또는 iterable 객체에서 순차적으로 요소를 가져오는 방식이다.
    for문보다 약간 느리지만 가독성이 좋다.

  3. forEach 메서드
    forEach는 배열의 각 요소에 대한 콜백함수를 실행하는 메소드.
    콜백 함수 호출로 인한 오버헤드 때문에 for, for of 보다 성능이 떨어질 수 있다고 한다.

반응형

Scanner 클래스

java.util 패키지에서 제공하는 Scanner 클래스를 이용하여 화면에서 입력받을 수 있다.

자바를 공부하면서 프로그램 입력처리할 때 가장 많이 사용한다.

1. import

아래와 같이 import 선언

import java.util.Scanner;

2. 객체 생성

// 키보드 입력
Scanner scanner = new Scanner(System.in);

// 파일 입력
Scanner scanner = new Scanner(new File("파일경로"));

// 문자열 입력
Scanner scanner = new Scanner("입력 문자열");

3. 주요 메소드

next()

공백을 기준으로 하나의 문자열을 읽음

공백을 기준으로 한 번에 입력 가능하다.


import java.util.Scanner;

public class J101_Scanner {

    public static void main(String[] args) {

        Scanner sc = new Scanner(System.in);

        System.out.println("데이터를 입력 : ");

        String a = sc.next();
        String b = sc.next();
        String c = sc.next();

        System.out.println(a);
        System.out.println(b);
        System.out.println(c);

        sc.close();

    }

}

실행결과

데이터를 입력 > 
a b c
a
b
c

nextLine()

한 줄을 읽음(공백도 포함)

import java.util.Scanner;

public class J101_Scanner {

    public static void main(String[] args) {

        Scanner sc = new Scanner(System.in);

        System.out.println("데이터를 입력 > ");
        String a = sc.nextLine();
        System.out.println("데이터를 입력 > ");
        String b = sc.nextLine();
        System.out.println("데이터를 입력 > ");
        String c = sc.nextLine();

        System.out.println(a);
        System.out.println(b);
        System.out.println(c);

        sc.close();

    }

}

실행결과

데이터를 입력 > 
a b c
데이터를 입력 > 
x y z
데이터를 입력 > 
1 2 3
a b c
x y z
1 2 3

자주 사용하는 타입별 메소드

필요한 입력값에 맞춰서 아래의 메소드를 사용

  • nextByte()
  • nextInt()
  • nextFloat()
  • nextDouble()

hasNext()

입력에 데이터가 남아 있는지 확인

hasNextInt()

다음 입력값이 정수인지 확인


import java.util.Scanner;

public class J101_Scanner_has {

    public static void main(String[] args) {

        String data = "1 q 2 w 3 e 4 r";
        Scanner sc = new Scanner(data);

        while (sc.hasNext()) {

            if (sc.hasNextInt()) {

                System.out.println("숫자: " + sc.nextInt());

            } else {

                System.out.println("문자열: " + sc.next());
            }

        }

        sc.close(); 
    }

}

숫자: 1
문자열: q
숫자: 2
문자열: w
숫자: 3
문자열: e
숫자: 4
문자열: r

형변환 필요할 때

next와, nextLine 메소드는 문자이기 때문에 숫자를 입력 받으면 형변환이 필요하다
nextInt를 사용하지 않고 정수 값이 필요할 때는 형변환을 한다.


// string -> Integer
String a = sc.next();
System.out.println(Integer.parseInt(a));

// Integer -> String
int b = sc.nextInt();
System.out.println(String.valueOf(b));
변환 방향 사용 방법 메서드/기법
문자 → 정수 Character.getNumericValue(), Integer.parseInt() 단일 문자 또는 문자열 처리
정수 → 문자 캐스팅 (char), Character.forDigit() ASCII 활용 또는 변환 함수
문자열 → 정수 Integer.parseInt() 문자열 전체 처리
정수 → 문자열 String.valueOf(), Integer.toString() 문자열 변환 함수
반응형

 

 

 


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


<form action="/submit.do" method="post" onsubmit="myValidator(); return false;" class="use_validator">

<fieldset> 
<legend>폼 양식</legend>


<ul>
    <li>input text only string</li>
    <li><input type="text" name="user_name" title="이름" class="use_vali only_string" placeholder="이름"></li>
</ul>

<ul>
    <li>input text only number</li>
    <li><input type="text" name="user_tel" title="연락처" class="use_vali only_number" maxlength="11" placeholder="연락처"></li>
</ul>

<ul>
    <li>input checkbox</li>
    <li>

        <input type="checkbox" name="ott[]" title="ott" value="넷플릭스" class="use_vali">
        <label for="">넷플릭스</label>

        <input type="checkbox" name="ott[]" title="ott" value="쿠팡플레이" class="use_vali">
        <label for="">쿠팡플레이</label>

        <input type="checkbox" name="ott[]" title="ott" value="왓챠" class="use_vali">
        <label for="">왓챠</label>

        <input type="checkbox" name="ott[]" title="ott" value="디즈니플러스" class="use_vali">
        <label for="">디즈니플러스</label>

        <input type="checkbox" name="ott[]" title="ott" value="티빙" class="use_vali">
        <label for="">티빙</label>

    </li>
</ul>


<ul>
    <li>input radio</li>
    <li>

        <input type="radio" name="gender" value="M" title="성별" class="use_vali">남
        <input type="radio" name="gender" value="F" title="성별" class="use_vali">여

    </li>
</ul>

<ul>
    <li>input password</li>
    <li>
        <input type="password" name="passwd" title="비밀번호" class="use_vali">
    </li>
</ul>


<ul>
    <li>textarea</li>
    <li><textarea name="remarks"  title="비고" class="use_vali"></textarea></li>
</ul>

<ul>
    <li>select</li>
    <li>
        <select name="site_list" title="사이트" class="use_vali">
            <option value="">:: 선택 ::</option>
            <option value="네이버">네이버</option>
            <option value="구글">구글</option>
            <option value="다음">다음</option>
        </select>
    </li>
</ul>


<ul>
    <li>취미</li>
    <li>

        <input type="checkbox" name="hobby[]" class="use_vali" title="취미" id="hobby1">
        <label for="hobby1"><span class="custom_inp"></span>독서</label>

        <input type="checkbox" name="hobby[]" class="use_vali" title="취미" id="hobby2">
        <label for="hobby2"><span class="custom_inp"></span>여행</label>

        <input type="checkbox" name="hobby[]" class="use_vali has_etc" title="취미" id="hobby3">
        <label for="hobby3"><span class="custom_inp"></span>기타</label>


        <input type="text" name="hobby_etc" class="use_vali" title="취미 기타" disabled>



    </li>
</ul>

</fieldset>

<input type="submit" value="확인">


</form>    




<script>


// form과 유효성 검사를 할 요소 
let frm = document.querySelector("form.use_validator");
let el = document.querySelectorAll(".use_vali");
let onlyStrEl = document.querySelectorAll(".only_string");
let onlyNumEl = document.querySelectorAll(".only_number");


// input, select, textarea 유효성검사 
function myValidator(){

    for(let i=0;i<el.length;i++){

        if(el[i].disabled) continue;

        let tagName = el[i].tagName;
        let type = el[i].getAttribute("type");
        let title = el[i].getAttribute("title");
        let name = el[i].getAttribute("name");
        let chkEl = document.getElementsByName(name);

        if(tagName == "INPUT"){

            if(type == "text" || type == "password") {

                if(el[i].value == ""){

                    alert(`${title}을(를) 입력해주세요`);
                    el[i].focus();
                    return false;

                }

            } else if(type == "checkbox" || type == "radio") {

                let count = 0;

                for(let j=0;j<chkEl.length;j++){

                    if(chkEl[j].checked) count++;

                }

                if(count < 1){

                    alert(`${title}을(를) 선택해주세요.`);
                    el[i].focus();
                    return false;

                }

            }

        } else if(tagName == "TEXTAREA"){

            if(el[i].value == ""){

                el[i].focus();
                alert(`${title}을(를) 선택해주세요.`);
                return false;

            }

        } else if(tagName == "SELECT"){

            let slctVal = el[i].options[el[i].selectedIndex].value;

            if(slctVal == ""){

                el[i].focus();
                alert(`${title}을(를) 선택해주세요.`);
                return false;

            }

        } 

    }

    return true;

}


// 유효성 검사를 사용하는 .use_vali에 대한 클릭 이벤트 
el.forEach(element => { element.addEventListener("click", isEtc); });

// 문자
onlyStrEl.forEach(element => { element.addEventListener("keyup", () => myValidator_onlyString(element)); });

// 숫자
onlyNumEl.forEach(element => { element.addEventListener("keyup", () => myValidator_onlyNumber(element)); });


// 클릭 이벤트 발생시 추가 인풋에 대한 disabled 처리 
function isEtc(){

    if(!this.classList.contains("has_etc")) return false;

    let name = this.getAttribute("name").replace("[]","");
    let etcEl = document.querySelector(`[name="${name}_etc"]`);

    if (this.checked) {

        etcEl.removeAttribute("disabled");
        etcEl.focus();

    } else {

        etcEl.setAttribute("disabled", true);
        etcEl.value = "";

    }

}


// 한영 제외 제거 함수
function myValidator_onlyString(el){

    el.value = el.value.replace(/[^ㄱ-ㅎ가-힣a-zA-Z]/g,'');

}

// 숫자 제외 제거 함수
function myValidator_onlyNumber(el){

    el.value = el.value.replace(/[^0-9]/g,'');

}



</script>


</body>
</html>
반응형

+ Recent posts