[부스트코스] 웹 프로그래밍 FE: JavaScript 2 비교-반복-문자열

벌써 2. DB 연결 웹 앱 파트에 들어가면서 아래 학습 목표들에 대한 내용을 배우게 되는데 오늘은 그 중 JavaScript의 비교-반복-문자열에 대하여 알아보겠습니다.

학습 목표

1. JavaScript의 기본문법을 이해한다.
2. DOM, Browser Event, Ajax이 각각 무엇인지 이해하고, 이를 활용해 웹화면을 제어할 수 있다.
3. JSP의 라이프사이클을 이해하고 redirect & forward 와 scope를 이해하고 사용할 수 있다. 
4. JSTL과 EL을 사용할 수 있다. 
5. 데이터베이스를 설치하고 간단한 SQL을 사용할 수 있다. 
6. Maven을 이해하고 Maven을 이용한 웹 어플리케이션을 작성할 수 있다. 
7. JDBC 프로그래밍을 할 수 있다. 
8. Web API를 이해한다. 

[LECTURE] 2) 자바스크립트 비교-반복-문자열 : edwith

 

2) 자바스크립트 비교-반복-문자열

학습 목표

1. 분기, 반복문을 다룬다.
2. 간단한 자바스크립트 문자열 조작(parsing)을 할 수 있다.

핵심 개념

• If
• switch
• for
• while
• String replace메서드

 

 

조건문

조건문은 특정 조건이 참인 경우에 실행하는 명령의 집합입니다. JavaScript는 두 가지 조건문을 지원합니다: if...else and switch.

• if else
• switch

비교문: if else 문

특정 조건이 참인 경우 문장을 실행하기 위해 if 문을 사용합니다. 또한 선택적으로 조건이 거짓인 경우 문장을 실행하기 위해서는 else 절을 사용합니다. 조건이 여러개일 때는 else if를 사용하여 복잡하게 할 수 있습니다.

if (condition_1) {
  statement_1;
} else if (condition_2) {
  statement_2;
} else if (condition_n) {
  statement_n;
} else {
  statement_last;
}

다음과 같은 값은 거짓으로 평가됩니다:

• false
• undefined
• null
• 0
• NaN
• the empty string ("")

조건문에 전달되었을 때 모든 개체를 포함하여 다른 모든 값은 참으로 평가합니다.

if...else문 대신 삼항연산자를 대신해서 사용할 수 있습니다.

 

분기 - switch

로직을 분기하기 위해서 if문 이외에도 switch 문을 통해서도 해결할 수 있습니다. 케이스가 명확히 있고 주어진 케이스에 대해서 처리하는 개념으로 가독성이 좋고 대등한것들이 나열할 때 사용합니다.

default 절을 못 찾게 된다면 프로그램의 switch문은 종료됩니다. break문은 프로그램의 switch문을 벗어나게 합니다. 만약 break문이 생략된다면 그 프로그램은 switch문안에서 다음 문장을 계속 수행합니다. 

switch (fruittype) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Apples":
    console.log("Apples are $0.32 a pound.");
    break;
  case "Bananas":
    console.log("Bananas are $0.48 a pound.");
    break;
  case "Cherries":
    console.log("Cherries are $3.00 a pound.");
    break;
  case "Mangoes":
    console.log("Mangoes are $0.56 a pound.");
    break;
  case "Papayas":
    console.log("Mangoes and papayas are $2.79 a pound.");
    break;
  default:
   console.log("Sorry, we are out of " + fruittype + ".");
}
console.log("Is there anything else you'd like?");

 

제어 흐름과 에러 처리

 

반복문

• for
• while
• forEach
• for in
• for of

for 문이나 while문을 사용해서 반복문을 구현할 수 있습니다. 일반적인 경우 for를 사용합니다.

for 문

for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복합니다. 자바스크립트의 반복문은 C의 반복문과 비슷합니다. for 반복문은 다음과 같습니다.

for ([초기문]; [조건문]; [증감문]) 문장

function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

 

forEach

forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다.

하지만 for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다.
for문에 비해 좀 더 깔끔하고 직관적입니다. 변칙없이 arr내 모든 요소들이 callback을 호출합니다.

const arr = [0,1,2,3,4,5,6,7,8,9,10];
 
arr.forEach(function(element){
    console.log(element); // 0 1 2 3 4 5 6 7 8 9 10
});
// 혹은 arrow 함수 가능
arr.forEach(element => console.log(element));

 

for...in 문

for...in  문은 객체의 열거 속성을 통해 지정된 변수를 반복합니다. 각각의 고유한 속성에 대해, JavaScript는 지정된 문을 실행합니다. for...in 문은 다음과 같습니다:

function dump_props(obj, obj_name) {
  var result = "";
  for (var i in obj) {
    result += obj_name + "." + i + " = " + obj[i] + "<br>";
  }
  result += "<hr>";
  return result;
}

 

for...of 문

for...of 문은 각각의 고유한 특성의 값을 실행할 명령과 함께 사용자 지정 반복 후크를 호출하여, 반복 가능한 객체(배열, Map, Set, 인수 객체 등을 포함)를 통해 반복하는 루프를 만듭니다.

다음 예는 for of 와 for in 루프의 차이를 보여줍니다. 속성 이름을 통해 for in이 반복하는 동안, for of는 속성 값을 통해 반복합니다.

let arr = [3, 5, 7];
arr.foo = "hello";
 
for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}
 
for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}

for in와 같은 메서드의 사용법이 익숙하지 않다면, 우선은 for문으로 배열을 탐색하는 것으로 충분합니다.

 

루프와 반복

 

문자열 처리

• split
• replace
• trim

자바스크립트의 문자와 문자열은 같은 타입으로 모두 문자열입니다.

문자열에 다양한 메서드가 있습니다. 자바스크립트 특징을보면 문자열, 배열 등을 선언해놓고 . 뒤로 메서드를 쓸 수 있습니다. 이는 내부적으로 문자열이 객체로 변환이 되기 때문에 문자열도 순간적으로 객체로 변환이 돼서 어떤 객체 내에 있는 메서드를 쓸 수 있는 것입니다. 따라서 문자열 객체라고 말할 수 있고 모든 문자열에 메서드를 사용할 수 있습니다.

split

.split()은 문자열을 분할하는 메서드입니다.

string.split(separator , limit)

separator에는 분할의 기준을 넣습니다. 쉼표를 기준으로 분할할 때는 ','을 넣어주면 됩니다. limit으로 최대 분할 개수를 정합니다. 선택 사항으로, 값을 지정하지 않으면 전체를 다 분할합니다.

"ab:cd".split(":"); //["ab","cd"]

replace

.replace()는 특정 문자열을 찾아 다른 문자열로 바꾸는 메서드입니다.

string.replace('string1' , 'string2')

string에서 string1을 찾아 string2로 바꿉니다.

"ab:cd".replace(":", "$"); //"ab$cd"

trim

.trim()은 문자열 좌우에서 공백을 제거하는 함수가 trim() 함수 입니다.

" abcde  ".trim();  //"abcde"

 

JavaScript / Object / String.split() - 문자열 분할하는 메서드

 

 

[보강]

반대로 반복문을 동작시키는(reverse iteration이라고 함) 경우가 실제 브라우저에서 얼마나 성능차이가 있을까요?

 현대의 자바스크립트 엔진은 최적화를 통해 반복문을 최대한 빠르게 처리하는 과정을 거쳐왔습니다. 실제로 실험을 해보면 그 차이가 미미하다는 것을 알게 될 것입니다. 따라서 for문을 무조건 반대로 구현할 필요는 없습니다. 이런 상황이외에도 자바스크립트의 구현방법에 따라 (for 가 빠를까 while 빠를까? 등) 성능차이는 그리 크지 않습니다. 일반적으로는 코드의 가독성에 좀더 우선집중하는 게 좋습니다.

 

이렇게 자바스크립트의 조건문, 반복문, 문자열에 대하여 알아보았습니다. 더 나아가 정규표현식이라는 것도 있는데 정규표현식에 관련된 내용은 다음기회에 알아보도록 하고 다음시간에는 자바스크립트 함수에 대하여 알아보도록 하겠습니다.