□ 자바스크립트 - 2강 2/3

★ 작성코드

Git 링크.자바스크립트2

1. 반복문

• 조건을 만족하면 명령을 반복해서 실행함
• 무한반복(루프)에 빠지지 않도록 ‘조건’이 어느 시점에서 마무리 될 수 있도록 설정해야 함

※ 예시 → 구구단 2단의 경우

• 고정값 : console.log(2 * );
• 일정한 규칙을 갖고 있는 가변값 : 1, 2, 3, 4, 5, 6, 7, 8, 9

○ 반복문의 종류

● while

var num = 1;

while (num < 10) {
    console.log(2 * num);
    num++;
}
console.log("반복문 종료");

• num = 1; → 반복문의 시작점
• while(num < 10) → n이 10보다 작으면 { } 내용을 실행함
• num++; → num의 값을 1을 더함

● do ~ while

• 명령을 먼저 실행한 후, 반복문을 수행함

예시)

var i = 12;

do {
    console.log(i);
    i++;    
} while (i < 10);

• do { } 의 명령을 실행한 후 while이 실행되는데, 조건이 거짓이기에 ‘12’만 console에 출력되고 반복문이 끝남

● for

• 가장 많이 사용되는 반복문
• for( ) 안에 고정값과 일정한 규칙을 갖고 있는 가변값을 넣어주어야 함
• for ( ) 안에서 작성하는 규칙은 반드시 지켜야 함( ( 변수, 조건, 가변값) )

예시)

for (var i = 1; i < 10; i++) {
    console.log(3 * i);
}

● 중첩 반복문

• for 반복문 안에 for 반복문을 추가로 사용하여 반복문을 만듬
• 반복문의 실행 순서에 대해서 이해가 필요함

예시) 구구단 2단 ~ 9단 출력

for (i = 2; i < 10; i++) {
    for(j = 1; j < 10; j++) {
        console.log( i * j);
    }
}

• 첫 번째 for문에서 i=2 가 참인 상태에서 j=1에서 j=9까지 반복된 후, i=3으로 바뀌고 다시 j=1에서 j=9까지 반복함
• 이를 i=9까지 반복하고 i=10이 되면서 반복문의 조건이 거짓이 돼서 반복을 종료함

● break

• 반복문을 원하는 시점에서 바로 종료하고 싶을 때 사용함

예시) 구구단 2단에서 i=5가 되면 바로 종료하고자 할 경우

for (var i = 1; i < 10; i++) {
    
    if(i === 5) {
        break;
    }

    console.log(2 * i);
}

● continue

• 반복문에서 원하는 시점의 반복을 넘기고자 할 경우 사용함

예시) 구구단 3단에서 i=5가 되면 이를 넘기고, i=6부터 반복을 계속하게 할 경우

for (var i = 1; i < 10; i++) {
    
    if(i === 5) {
        continue;
    }

    console.log(3 * i);
}

● 배열의 내용을 반복문을 사용해서 출력하기

예시)

var arr = ['바나나', '사과', '수박'];

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

※ 배열의 데이터의 개수를 모르지만, 끝까지 반복하고자 할 경우 – 조건에서 array의 length를 사용함

예시)

var arr = ['바나나', '사과', '수박', '포도', '배'];
console.log(arr);
console.log(arr.length);

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

● for ~ in

• 범위지정을 할 필요 없이 in 이 범위가 되어 반복하도록 함

예시)

var arr = ['바나나', '사과', '수박', '포도', '배'];

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

● arr.forEach()

• 배열에서 사용가능한 메서드, for ~ in가 유사함
• 익명함수, 콜백함수를 사용함
• return 활용불가능

예시)

var arr = ['야구', '축구', '농구', '배구'];

arr.forEach(function(element, index) {
    console.log(element);
    console.log(index);
})

• element는 배열의 데이터를 의미하고, index는 배열의 좌표를 의미함
• function( )의 순서는 바뀌면 안됨, ( ① element, ② index ) 순서여야 함

● arr.map()

• arr.forEach()와 유사하지만 return을 사용 가능한 메서드

예시)

var arr = ['기타', '드럼', '베이스', '보컬'];

arr.map(function(element, index) {
    console.log(element);
    console.log(index);
})

var result = arr.map(function(element, index) {
    return element + " " + "10";    
})

console.log(result);

○ 객체에서 활용할 수 있는 반복문 - for ~ in을 사용해 객체 안의 데이터을 확인하기

예시)

var student = {
    name: "Kim",
    age: 20,
    skills: ["자바스크립트", "HTML", "CSS"],
    
    sum: function(num1, num2) {
        console.log(num1 + num2);
    }
}

// for ~ in

for (var prop in student) {

    console.log(prop + " = " + student[prop]);
}

※ for ~ in 사용시, 객체 안의 데이터에 접근하는 방법 중 한가지를 사용
① student.name
② student['name'] → 이 방법을 사용함

2. String(문자열)이 가지고 있는 주요 기능 (property, 메서드)

● length – 문자열의 길이를 가져오는 property, 공백(스페이스)의 길이도 포함해서 길이를 가져옴
예시)

var txtLength = " Hello world ! ";

console.log(txtLength.length);

→ console에서 ‘15’가 출력됨(문자 10 + 특수문자 1 + 공백 4 )

● trim( ) - 문자열의 앞뒤 공백들을 제외하고 출력함
예시)

var txtLength = " Hello world ! ";

console.log(txtLength);
console.log(txtLength.length);
console.log(txtLength.trim());
console.log(txtLength.trim().length);

● charAt( ) - 문자를 추출할 때 사용하는 메서드
예시)

var str = "Nice to meet you";

console.log(str.charAt(0));

→ console에서 ‘N’이 출력됨

※ 문자열의 길이를 모르는 상황에서, 마지막 문자를 출력하고 싶을 경우
예시)

var str = "Nice to meet you";

console.log(str.length);
console.log(str.charAt(str.length – 1));

● slice( ) - 문자를 추출할 때 사용하는 메서트, 출력되는 범위를 정할 수 있음
예시)

var str = "Nice to meet you";

console.log(str.slice(0, 6));
console.log(str.slice(2, 6));
console.log(str.slice(2));

※ str.slice(2, 6)의 경우, 좌표값 2와 6 사이의 교집합이 되는 부분을 출력함
※ str.slice(2)와 같이 시작 좌표만 설정하면 시작좌표에서부터 끝까지의 문자를 출력함

● split( ) - 일정한 규칙으로 문자를 잘라낼 때, 잘라낸 문자를 배열 안에 담을 때 사용하는 메서드
예시)

var str = "Nice to meet you";

console.log(str.split(' '));

예시2)

var str1 = "apple/pear/grape"

console.log(str1.split('/'));

※ split( )을 사용하게 되면, 데이터 타입이 배열로 바뀌게 됨

● replace( ) - 원하는 문자를 지정한 후, 이를 교체하고자 할 때 사용하는 메서드
예시)

var str = "This place is good";

console.log(str);
console.log(str.replace('place', 'apple'));

● indexOf( ) – 문자열에서 단어를 검색한 후, 단어가 시작하는 위치의 좌표를 알려주는 메서드
예시)

var str = "This place is good";

console.log(str.indexOf('place'));

→ ‘place’가 시작하는 좌표값 ‘5’가 console에 출력됨

※ 단어가 존재하지 않을 경우 → ‘-1’을 반환시킴
※ 단어 검색시, 대소문자를 구분함
※ 여러 개의 같은 단어가 문자열에 존재할 경우, 최초로 먼저 나오는 값을 반환시킴

● 모든 문자를 대문자 혹은 소문자로 변환하는 메서드

① toUpperCase() - 대문자로 변환
② toLowerCase() - 소문자로 변환

예시)

var str = "This place is good";

console.log(str.toUpperCase());
console.log(str.toLowerCase());

실무 사용 예시)

var search = prompt("검색어를 입력해 주세요");

if(search.toLocaleLowerCase() === "apple") {

    console.log("사과 데이터를 출력한다.");

} else {
    console.log("False");
}

→ 대문자 ‘APPLE’를 입력하더라도 true값이 출력됨

3. Array(배열)에서 가지고 있는 주요 기능 (property, 메서드)

● push( ) - 배열에 새로은 데이터를 추가할 때 사용하는 메서드(배열 뒤쪽에 삽입됨)
예시)

var arr = ["사과", "배", "수박"];
arr.push("포도");
console.log(arr);

arr.push("체리", "참외");
console.log(arr);

※ 배열 앞쪽에 삽입하고자 할 때는 unshift( )를 사용함

● 배열 안의 데이터를 삭제하고자 할 때 사용하는 메서드

① pop( ) - 배열의 뒤쪽에 있는 데이터를 삭제
② shift( ) - 배열의 앞쪽에 있는 데이터를 삭제

예시)

var arr = ["사과", "배", "수박"];

arr.pop();
console.log(arr);

arr.shift();
console.log(arr);

● join( ) - 배열 안의 데이터를 규칙을 지정하여 문자열로 나타내는 메서드

예시)

var arr1 = ["야구", "축구", "농구"];
var str1 = arr1.join(', ');

console.log(str1);

● concat( ) - 배열들을 합치고자 할 때 사용하는 메서드

예시)

var arr1 = ["농구", "축구"];
var arr2 = ["사과", "배"];

var merge = arr1.concat(arr2);

console.log(merge);

※ 예시에서는 arr1이 기준이 되고, 그 배열 뒤쪽에 arr2의 데이터가 들어가게 됨

□ 어려웠던 점

자바스크립트라는 내용 자체가 처음이라서 내용을 이해하기가 많이 어려웠습니다.

□ 해결방법

강의 내용 중 이해가 되지 않으면 그 부분을 반복해서 보고, 인터넷에서 추가적으로 검색하여 해결하고자 하였습니다.

□ 학습 소감

자바스크립트가 C언어와 유사한 점이 많아서 이해가 조금은 되지만, 아직 배워야할 것들이 많다고 느꼈습니다.