방장 공부하자 (WEB, JAVASCRIPT 3)

• 출처 : TCP 스쿨

반복문

• 반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문
• 프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 실행문중 하나이다.

반복문의 형태

1. while문
2. do/while문
3. for문
4. for/in문
5. for/of문(생략)

while문

• 특정 조건을 만족할 때 까지 계속해서 주어진 실행문을 반복 실행한다.
• 구문

while(표현식){
   표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문.
}

• 예제

  var i = 1;
  while (i < 10) { // 변수 i가 10보다 작을 때만 while 문을 반복함.
    console.log(i);
    i++; // 반복할 때마다 변수 i를 1씩 증가시켜 변수 i가 10보다 커지면 반복문을 종료함.
  }

• 표현식이 참일 경우에 while문 안에 있는 반복문이 수행된다.
• 반복문 수행 후 표현식으로 돌아와 표현식이 참인지 확인하고 다시 돈다.
• 이런식으로 수행하는 반복문을 loop라고 한다.
• 따라서 반복문을 멈추기 위해서는 표현식이 거짓인 조건을 갖는 실행문을 포함해야 한다.

do/while문

• while문은 루프에 진입하기 전에 먼저 표현식부터 검사한다.
• 그러나 do/while문은 먼저 루프를 한 번 실행한 후에 표현식을 검사한다.
• 즉 do/while문은 표현식의 결과와 상관없이 무조건 한 번은 루프를 실행한다.
• 구문

do{
   표현식의 결과가 참인 동안 반복적으로 실행하는 실행문
}while(표현식)

• 예제

   var i = 1, j = 1;
   while (i > 3) { // 변수 i의 초깃값은 1이기 때문에 이 while 문은 한 번도 실행되지 않음.
      console.log((i++));
   }  
   do { // 변수 j의 초깃값은 1이기 때문에 이 do / while 문은 단 한 번만 실행됨.
      console.log("j : " + (j++));
   } while (j > 3);

for문

• while문과 달리 자체적으로 초기식, 표현식, 증감식을 모두 포함하는 반복문이다.
• while문보다는 좀 더 간결하게 반복문을 표현할 수 있다.
• 구문

for(초기식;표현식;증감식){
   표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}

• 초기식, 표현식, 증감식은 각각 생략될 수 있다.
• 각 식에 쉼표(,)를 사용하면 여러개 초기식이나 증감식을 동시에 사용 가능하다.
• 예제

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

for in 문

• 해당 객체의 모든 열거할 수 있는 프로퍼티를 순회할 수 있도록 해준다.
  • 열거할 수 있는 프로퍼티란 모든 enumerable(열거 가능 여부)의 세팅이 true로 설정된 프로퍼티를 의미한다.
  • 쉽게말해 대충 어떤 객체(배열 등등)가 읽을 수 있는 모든 항목을 가져와 for문으로 접근하는 방법
• 구문

for (변수 in 객체) {
    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

• 다음 예제는 for/in 문을 사용하여 배열의 요소에 접근하는 예제

var arr = [3, 4, 5];

for (var i = 0; i < arr.length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함.
    console.log(i + " ");
}

for (var i in arr) { // 위와 같은 동작을 하는 for / in 문
    console.log(i + " ");
}

기타 제어문

1. continue

   • 루프 내에서 해당 루프의 나머지부분은 건너뛰고 바로 다음 표현식의 판단으로 넘어가게 한다.
   • 구문 및 예제

    1. continue;
    2. continue 라벨이름;
   
    var exceptNum = 3;
   
    for (var i = 0; i <= 100; i++) {
       if (i % exceptNum == 0) // exceptNum의 배수는 출력하지 않음.
           continue;
       console.log(i + " ");
    }

2. break

   • 루프 내에서 해당 반복문을 완전히 종료시키고 반복문 다음에 위치한 실행문으로 프로그램의 흐름을 이동시킴
   • 루프 내에서 표현식의 판단 결과에 상관없이 반복문을 완전히 빠져나가고 싶을 때 사용
   • 문법 및 예제

      1. break;
      2. break 라벨이름;
   
      var lectures = ["html", "css", "자바스크립트", "php"];
      var topic = "자바스크립트";
   
      for (var i = 0; i < lectures.length; i++) {
         if (lectures[i] == topic) {
            document.write(topic + " 과목은 " + (i + 1) + "번째 과목입니다.");
         break; // 원하는 값을 찾은 후에는 더 이상 for 문을 반복하지 않고 빠져나감.
         }
      }

배열

배열이란?

• 자바스크립트에서 배열은 이름과 인덱스로 참조되는 정렬된 값의 집합이다.
• 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다.
• 배열의 특징
  1. 배열 요소의 타입이 고정되있지 않으므로 배열 요소끼리 타입이 다를 수 있다.
  2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 배열 요소가 비어있을 수 있다.
  3. 자바스크립트에서 배열은 Array 객체로 다뤄진다.

배열 생성

• 배열을 만드는 법은 3가지가 존재
  1. 배열 리터럴을 이용하는 방법

        var arr = [배열요소 1, 배열요소 2]; 

  2. Array 객체의 생성자를 이용하는 방법

        var arr = Array(배열요소 1, 배열요소 2);

  3. new 연산자를 이용한 Array객체 생성법

        var arr = new Array(배열요소 1, 배열요소 2);

• 위 세 방법 모두 같은 결과의 배열을 만든다.

배열의 참조

• 배열의 요소를 참조하고 싶을 때는 []를 사용한다.
• 구문 및 예제

배열이름[인덱스]

var arr = [1,2,3,4,5];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr[4]);

• 배열의 인덱스는 항상 0부터 시작이다.
• 최대 2^32보다 작은 양수를 사용할 수 있다.

배열 요소의 추가

• 자바스크립트에서 배열에 새로운 배열 요소를 추가하는 방법은 다음과 같다.

arr.push(추가할 요소);
arr[arr.length] = 추가할 요소; // length란 해당 객체의 길이를 의미하며 arr배열의 전체길이를 뜻함
arr[특정인덱스] = 추가할 요소; //특정 인덱스를 지정하여 추가

배열의 순회

• 배열의 모든 요소에 접근하고자 할 때 for문과 같은 반복문을 사용하여 접근할 수 있다.
• 예제

var arr = [1,2,3,4,5];
console.log("for in을 이용한 배열순회")
for(var idx in arr){
   console.log(idx);
}
console.log("단순 for문 이용한 배열순회")

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

• 다차원 배열의 설명은 생략하고 관련 내용이 나올 시 설명하겠습니다.

함수

• 함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다.
• 함수는 필요할때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
• 예제

function addNum(x, y){
   return x+ y;
}

console.log(addNum(1,2));

자바스크립트에서의 함수

• 함수도 하나의 타입으로 취급한다.
• 함수를 변수에 대입하거나 프로퍼티를 지정하는 것도 가능하다.
• 자바스크립트의 함수는 다른 함수 내 중첩되어 정의될 수 있다.

함수의 정의

• 자바스크립트에서 함수는 function 키워드로 시작되며, 다음과 같은 구성요소를 가진다.
  • 함수의 이름
  • 괄호안에 쉼표로 구분되는 함수의 매개변수
  • 중괄호로 둘러싸인 자바스크립트 실행문

   function 함수이름(매개변수1, 매개변수2 ...){
      함수가 호출되었을 때 실행하고자 하는 실행문;
   }

function addNum(x, y){
   return x+ y;
}

console.log(addNum(1,2));

반환문 return

• 자바스크립트에서 함수는 반환(return)문을 포함할 수 있다.
• 이러한 반환문을 통해 호출자는 함수에서 실행한 결과를 전달받을 수 있다.
• 또 우려먹는 사골 예시

   function addNum(x, y){
    return x+ y; //x 와 y 더한값을 반환한다.
   }

함수의 호출

• 함수는 선언을 한 후 호출해야 실행이 된다.
• 일반적인 함수의 호출은 함수의 정의문과 같은 형태로 호출이 가능하다.

addNum(1,2);

var sum = addNum(1,2);