코린이[코딩 어린이]

for of반복문

for in반복문에 배열을 넣으면, 앞의 반복 변수에 '요소'가 아니라 '인덱스'가 들어갑니다.

for of반복문은 내부의 요소를 바로 넣어 활용할 수 있습니다. for in과 비슷한 형태이지만, 반복 변수에 '요소'가 들어갑니다.

for in반복문

var array = [1, 2, 3, 4];

for(var i in array) {
    alert(i + '번째 요소는 ' + array[i] + '입니다.');
}

for of반복문

for(var el of ['String', 2, 3, 4]) {
    alert('요소는' + el + '입니다.');
}

for of반복문은 ECMAScript6에서 추가된 기능입니다.

for of반복문은 현재 몇 번을 반복했는지 알 수 없기 때문에, 따로 변수를 만들어서 확인해야 합니다.

for of반복문에서 반복 횟수 확인 예

var i = 0;
var array = [1, 2, 3, 4];

for(var el of array) {
    alert(`${i}번째 요소는 ${el}입니다.`);
    i++;
}

코드가 복잡해 진것처럼 보일 수 있지만, 상황에 맞게 잘 활용하면 코드를 깔끔하게 사용할 수 있습니다.

continue키워드

cotinue키워드는 반복문 안의 현재 반복 작업을 멈추고 다시 반복문의 처음으로 돌아가 다음 반복작업을 진행시키는 키워드입니다.

for반복문에서 continue키워드 예

for(var i = 0; i < 10; i++) {
    continue; // 반복작업 중지 이후 다음 반복 작업 수행
    alert(i); // 실행안됨
}

continue키워드를 만나면 뒤에 있는 내용을 실행하지 않고 바로 다음 반복 작업으로 넘어가기 때문에 for반복문은 10번 작동하지만 경고창은 한번도 나오지 않게 됩니다.

for반복문에서 continue키워드 예2 ( 짝수의 합 구하기 )

var output = 0;

for(var i = 0; i <= 10; i++) {
    if(i % 2 === 1) {
        continue; // 홀수일때 그냥 넘어갑니다.
    }
    output += i;
}

alert(output); // 30

조건문을 활용해서 홀수일때는 output += i; 부분을 실행하지 않고 다음 반복작접으로 넘어가므로 짝수의 합만 구해집니다.

for in반복문

자바스크립트는 배열이나 객체를 더욱 쉽게 다룰 수 있도록 for in반복문을 제공합니다.

for in반복문 형태

for(var i in array) {

}

위 'for in반복문'은 아래 '단순 for반복문'과 동일한 기능을 수행합니다.

for(var i = 0; i < array.length; i++) {

}

for in반복문 예

var array = ['사과', '포도', '감', '귤', '파인애플'];

for(var i in array) {
    alert('과일: ' + array[i]);
}

중첩 반복문

중첩 조건문과 마찬가지로 반복문을 여러 겹 중첩해 사용하면 중첩 반복문이라고 합니다.

반쪽짜리 피라미드 예

var output = '';

for(var i = 0; i < 10; i++) {
    for(var j = 0; j < i; j++) {
        output += '*';
    }
    output += '\n';
}

alert(output);

역 반쪽짜리 피라미드 예

    var output = '';

    for(var i = 0; i < 20; i++) {
        for(var j = 20; j > i; j--) {
            output += '*';
        }
        output += '\n';
    }

    alert(output);

피라미드 예

var output = '';

for(var i = 0; i < 20; i++) {
    for(var j = 20; j > i; j--) {
        output += ' ';
    }
    for(var k = 0; k < 2 * i - 1; k++) {
        output += '*';
    }
    output += '\n';
}

alert(output);

이 방법 말고도 다양한 방법으로 피라미드를 만들수 있습니다.

for 반복문

while반복문이 조건에 비중을 두는 반복문이라면, for반복문은 조건보다 횟수에 비중을 둘 때 사용하는 반복문입니다.

for반복문 형태

for(초기식; 조건식; 종결식;) {
    내용
}

for반복문에서는 가장 먼저 초기식이 한번 실행된 후 조건을 비교합니다. 이때 조건식이 거짓이라면 반복문을 빠져나가고, 참이면 문장을 실행하고 종결식을 실행한 후 다시 조건식을 비교합니다. 

for반복문의 순서

1. 초기식 실행
2. 조건식 비교 ( 거짓이면 반복문 종료 )
3. 문장을 실행
4. 종결식 실행
5. 2번으로 이동 ( 조건식 비교 )

for반복문 기본형태

for(var i = 0; i < 10; i++) {
    내용
}

이와같이 반복문을 사용하면 조건식에 저장된 숫자만큼 쉽게 반복문을 작동시킬 수 있습니다.

for반복문 예

for(var i = 0; i < 5; i++) {
    alert(num + '번째 반복문');
}

for반복문의 초기문 변수는 i, j, k, m, n처럼 식별자를 간단하게 한 글자로 만드는 것이 일반적입니다. 물론 i대신 두글자 이상의 변수로 작성해도 문제는 없습니다.

for(var i = 0; i < 10; i++)와 같은 형태의 for반복문을 단순 for반복문이라고 합니다. 0으로 시작해서 10바로 전까지 반복 실행하는 이유는 배열의 인덱스가 0에서 시작하기 때문입니다.

for반복문과 배열 예

var array = ['사과', '귤', '바나나', '망고', '파인애플'];

for(var i = 0; i < array.length; i++) {
    alert('과일: ' + array[i]); // 사과, 귤, 바난, 망고, 파인애플 순서로 경고창 생성
}

단순 for반복문을 사용해 배열의 요소를 순서대로 모두 출력할 수 있습니다.

반면에 요소를 반대로 출력하는 것도 가능합니다. 이러한 반복문을 역 for반복문이라고 합니다.

역 for반복문 예

var array = ['사과', '귤', '바나나', '망고', '파인애플'];

for(var i = array.length - 1; i >=0; i--) {
    alert('과일: ' + array[i]); // 파인애플, 망고, 바나나, 귤, 사과 순으로 경고창 생성
}

이러한 단순 for반복문, 역 for반복문 같은 형태를 많이 사용하지만 다른 형태도 많이 사용됩니다.

for반복문의 특이한 예

var startTime = new Date().getTime();

for(var cps = 0; new Date().getTime() < startTime + 1000; cps++) {}

alert('초당 연산 횟수: ' + cps);

startTime에서 현재시간을 구하고 반복문을 시작합니다. 반복문은 startTime에서 구해진 시간에 +1초후에 종료됩니다.

그럼 1초동안에 연산속도가 어느정도인지 알 수 있습니다.

while 반복문

while반복문은 자바스크립트의 가장 간단한 반복문입니다. 형태는 if와 비슷하지만 if처럼 한번만 실행하는 것이 아닌 불 표현식이 true인 동안 지속적으로 문장을 실행합니다.

while 반복문의 기본적인 형태

while(불 표현식) {
    내용
}

무한 반복문 예

while(true) {
    alert('무한 반복문');
}

이런식으로 거짓 조건을 넣지 않으면 경고창이 무한으로 반복해서 열리는 문제점이 생긴다.

while반복문으로 반복문을 실행할 경우에는 무한으로 반복되는 것( 무한루프 )을 방지하기 위해 벗어날 수 있는 조건을 만들어 주어야 합니다.

while반복문 벗어나기

var num = 0;
while(num < 5) {
    alert(num + '번째 반복');
    num++;
}

위처럼 내부에서 조건을 변화시키면 무한루프에 빠지지 않을 수 있습니다.

do while 반복문

while반복문은 조건을 먼저 검사하고 코드블록을 반복적으로 실행합니다. 따라서 처음 조건을 검사했을 때 조건이 거짓이라면 내부의 문장을 한번도 실행하지 않습니다.

그런데 어떤 경우에는 조건의 참, 거짓여부에 상관없이 내부의 내용을 최소한 한 번은 실행해야 하는 경우가 있습니다. 이 때 do while반복문을 사용합니다.

do while반복문의 형태

do {
    내용
    while(불 표현식);
}

while반복문과 달리 조건의 비교보다 내용의 실행이 먼저 일어나기 때문에 문장을 무조건 한번 실행합니다.

do while반복문 예

var num = 0;

do {
    alert(num + '번째 반복문');
    num++;
} while (num < 5);

이렇게 보면 while반복문과 do while반복문의 차이점이 없어보이지만 내용을 한 번은 꼭 실행해야 하는 특수한 목적일 때에는 사용이 됩니다.

length속성

UTF-16코드 유닛을 기준으로 문자열의 길이를 나타냅니다.

:: length속성은 배열처럼 0부터 시작이 아닌 1부터 시작합니다.

length속성 예 ( 1 왼쪽에 있는 ``백틱을 사용하면 아래처럼 ${} 사용이 가능합니다. )

const string = '안녕하세요 오늘 날씨가 너무 좋네요';

// 백틱을 사용하지 않을 경우
console.log(string + ': ' + string.length); // 안녕하세요 오늘 날씨가 너무 좋네요: 19

// 백틱을 사용할 경우
console.log(`${string}: ${string.length}`); // 안녕하세요 오늘 날씨가 너무 좋네요: 19

push()메서드

push()메서드는 배열의 끝에 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

push()메서드 예

const animals = ['돼지', '고양이', '강아지'];

const count = animals.push('소');
console.log(count); // 4

console.log(animals); // '돼지', '고양이', '강아지', '소'

animals.push('닭', '물개', '캥거루');

console.log(animals); // '돼지', '고양이', '강아지', '소', '닭', '물개', '캥거루'

push()메서드는 배열 끝에 여러 값을 추가해줍니다.

count변수에는 추가한 배열의 새 길이 값을 포함한다고 생각하면 됩니다.

반복문의 장점

컴퓨터가 인간에 비해 월등히 뛰어난 능력이 반복능력입니다. 아무리 반복해도 컴퓨터는 지루해하지도, 능률이 떨어지지도 않습니다. 컴퓨터에게 반복작업을 시키는 방법은 굉장히 간단합니다. 

for 반복문

for(var i = 0; i < 100; i++) {
    console.log('반복 출력');
}

위 코드는 콘솔창에 내용을 반복해서 100번 띄워줍니다.

물론 반복할 작업을 복사한 후에 원하는 만큼 붙여넣기로 해줄수도 있습니다. 하지만 이게 1000번 10000번 이상 넘어가면 가능은 하지만 매우 비효율적입니다. 그렇기에 반복문을 사용해서 효율적으로 만들어줍니다.

배열

배열은 여러 개의 변수를 한꺼번에 선언해 다룰 수 있는 자료형입니다. 자바스크립트에는 문자열, 숫자, 불, 함수, 객체, undefined의 여섯가지 자료형이 있는데, 배열은 객체 자료형 중 하나입니다.

배열은 기본적으로 대괄호 ( [] )로 생성합니다. 대괄호를 사용하고 안에 있는 값을 쉼표로 구분해 입력합니다. 

배열 예

var array = [1, 2, 3, 4, 5, 6];

위처럼 배열( [] )안에 입력된 값을 요소(element)라고 합니다. 어떠한 종류의 자료형도 요소가 될 수 있습니다.

여러 자료형을 포함한 배열 예

var array = [100, '문자', true, function() {}, {}, [100, 101]];

console.log(array);

위처럼 요소를 순서대로 출력해줍니다.

요소 각각을 사용하려면 배열 바로 뒤에 대괄호를 입력하고 안에 숫자를 넣습니다. ( 자바스크립트는 기본적으로 0부터 시작하기 때문에 1번 자리를 0으로 생각하면 됩니다. )

:: 대괄호 안에 들어가는 숫자는 인덱스(index)라고 부릅니다.

배열에서 요소에 접근하기

    var array = [100, '문자', true, function() {}, {}, [100, 101]];

    console.log(array[0]); // 100
    console.log(array[4]); // {}
    console.log(array[6]); // undefined

6번째는 요소가 존재하기 않기 때문에 undefined를 출력합니다.

indexOf()메서드

indexOf()메서드는 배열에서 지정된 요소를 찾고 찾은 요소의 첫번째로 나타나는 위치의 index를 반환하고, 지정된 요소가 존재하지 않으면 -1을 반환합니다.

indexOf()메서드 기본

array.indexOf(<내용>, <위치>);

array에서 특정 '내용'을 찾고, 검색된 '내용'이 있으면 그 위치 index를 반환하고, 찾은 '내용'이 없으면 -1을 반환합니다.

• 내용 : 필수 입력값, 찾을 문자열 ( 대소문자를 구분 )
• 위치 : 기본값 = 0, array에서  내용을 찾기 시작할 위치

indexOf() 예

const array = ['ant', 'bison', 'camel', 'duck', 'bison'];

// 1
console.log(array.indexOf('bison')); // 찾은 위치: 1

// 2
console.log(array.indexOf('bison', 2)); // 시작 위치 2, 찾은 위치: 4

// 3
console.log(array.indexOf('Bison')); // 찾은 위치: -1

// 4
console.log(array.indexOf('giraffe')); // 찾은 위치: -1

배열은 0번부터 시작합니다. ( ant = 0번, bison = 1번, camel = 2번 ...)

1. 'bison'을 처음 나타나는 위치의 인덱스값을 반환합니다.
2. 'bison'을 2번째인 'camel'부터 시작해서 처음 나타나는 위치의 인덱스값을 반환합니다.
3. 'Bison'의 대소문자를 구분하기 때문에 Bison의 값을 찾을 수 없어서 -1을 반환합니다.
4. 'giraffe'라는 내용은 아예 없기 때문에 -1을 반환합니다.

짧은 조건문

짧은 조건문은 논리 연산자의 특성을 조건문으로 사용합니다.

논리합 연산자를 사용한 표현식 [ 어떠한 값이 들어가도 항상 참이 나옵니다. ]

true || 내용

자바스크립트는 이처럼 참이 확실할 때 추가 연산을 진행하지 않습니다. 즉, 논리합 연산자의 좌변이 참이면 우변을 실행하지 않습니다.

true || alert('실행 1');
false || alert('실행 2'); // 실행됨

첫번째 줄은 좌변이 참이므로 우변을 실행하지 않습니다. 반면에 두번째 줄은 좌변이 거짓이므로 우변이 참인지 거짓인지를 검사합니다.

논리합 연산자를 사용한 짧은 조건문 정리

<불 표현식> || <불 표현식이 거짓일 때 실행>

논리곱 연산자를 사용한 표현식 [ 양변이 모두 참일때만 나타나기 때문에 아래는 항상 거짓입니다. ]

false && 내용

따라서 논리합 연산자와 반대로 정리할 수 있습니다.

(<불 표현식> &&) && (<불 표현식이 참일 때 실행되는 내용>)

삼항 연산자보다 코드를 짧게 사용하고 싶을 때 짧은 조건문을 사용합니다. 

짧은 조건문 예

var num = Number(prompt('숫자를 입력해주세요.', '숫자'));

num % 2 === 0 || console.log('홀수입니다.');
num % 2 === 0 && console.log('짝수입니다..');

:: 다른 조건문들과 비교했을 때 이해하기 어려울 수 있으므로 짧은 조건문을 많이 사용하지는 않습니다.

삼항 연산자

조건문에는 if조건문과 switch조건문 외에도 삼항 연산자 조건문이 한가지 더 있습니다. 연산자이지만 프로그램의 실행을 조건에 따라 변화시킬 수 있으므로 조건문으로 분류되기도 합니다.

삼항 연산자의 형태

<불 표현식> ? <참일 때 실행하는 내용> : <거짓일 때 실행하는 내용>

삼항 연산자는 코드가 복잡해 질 수 있으므로 한줄로 표시할 수 있을 때만 사용하는 것이 좋습니다.

삼항 연산자 예

var num = 125;

(num > 0) ? console.log('num은 0보다 큽니다.') : console.log('num은 0보다 작습니다.');

삼항 연산자는 코드를 짧게 쓰려고 할 때 사용하기 편리합니다.