생활코딩 - 자바스크립트(JavaScript) 기본

5. 반복문

5.1 while

while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행.
조건이 false면 반복문이 실행되지 않음

반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다.

while (조건){
    반복해서 실행할 코드
}

5.2 for

for문은 제일 먼저 '초기화'를 한다.
반복조건이 참이면 중괄호 안의 내용이 실행된다.

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

for(var i = 0; i < 10; i++){
    document.write('coding everybody'+i+'<br />');
}

5.3 반복문의 제어

break : 반복문을 즉시 중단함
continue : 실행을 중단하고 반복문을 다시 지속함

반복문 중첩에 관한 예시 :

for(var i = 0; i < 10; i++){
    // 0부터 9까지의 변수를 j의 값에 순차적으로 할당
    for(var j = 0; j < 10; j++){    
        // i와 j의 값을 더한 후에 출력
        // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. 
        // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.
        document.write(String(i)+String(j)+'<br />');
    }
}

---

6. 함수

함수 : 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.

function 함수명( [인자...[,인자]] ){
   코드
   return 반환값
}

function 뒤에 함수의 이름이 오고, 소괄호가 따라온다.
소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수다.
인자는 생략 할 수 있다.
함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 온다.

function numbering(){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering();

return
함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환한다.
동시에 함수를 종료시킨다.

function get_member1(){
    return 'egoing';
}
 
function get_member2(){
    return 'k8805';
}
 
alert(get_member1());
alert(get_member2());
// 출력 결과는 egoing과 k8805다.

function get_member(){
    return 'egoing';
    return 'k8805';
    return 'sorialgi';
}
alert(get_member()); // 결과는 egoing이다.

6.1 인자(argument)

인자 : 함수로 유입되는 입력 값을 의미

function get_argument(arg){
    return arg;
}
 
alert(get_argument(1));
alert(get_argument(2));

복수의 인자

function get_arguments(arg1, arg2){
    return arg1 + arg2
}

alert(get_arguments(10, 20)); //. 결과는 30
alert(get_arguments(20, 30)); // 50 

함수를 호출 할 때 전달한 인자 10과 20은 함수의 선언부(1행)의 arg1, arg2에 차례로 할당된다.
전달된 값은 함수 내부로 전달되서 더해진 후에 반환된다.

6.2 함수를 정의 하는 다른 방법

var numbering = function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering();

(function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
})(); //1회성으로 출력 

---

7. 배열

배열(array): 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다.
여러 개의 데이터를 하나의 변수에 저장하기 위한 것
각각의 데이터를 원소(Element)이라고 부른다

var name = 'egoing'
alert(name);

7.1 배열의 생성/크기

배열에 담겨있는 값을 가져올 때는 대괄호 안에 숫자를 넣는다.
이 숫자를 색인(index)라고 부르고 0부터 시작한다

var member = ['egoing', 'k8805', 'sorialgi']

var member = ['egoing', 'k8805', 'sorialgi']
alert(member[0]);
alert(member[1]);
alert(member[2]);

출력결과:

egoing
k8805
sorialgi

function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려준다. 
for(i = 0; i < members.length; i++){
    // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
    document.write(members[i].toUpperCase());   
    document.write('<br />');
}

egoing
k8805
sorialgi

.length: 배열의 크기를 확인가능

var arr = [1, 2, 3, 4, 5];
alert(arr.length);

7.2 배열 추가/제거

1. .push
   : 배열의 끝에 원소를 추가하는 방법
   인자로 전달된 값을 배열(li)에 추가하는 명령이다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f');
alert(li);

2. .concat
   : 복수의 원소를 배열에 추가하는 방법

var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li);

3. .unshift
   : 배열의 시작점에 원소를 추가하는 방법

var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li);

4. splice
   : 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴한다.
   그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가한다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B');
alert(li);

5. . shift
   : 배열에서 첫번째 원소를 제거하는 방법

var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
alert(li);

6. .pop
   : 배열 끝점의 원소를 배열에서 제거

var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();
alert(li);

7. .sort / .reverse
   : 정렬 및 역순 정렬

var li = ['c', 'e', 'a', 'b', 'd'];
li.sort();
alert(li);

var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse();
alert(li);