[TIL-008] 20.07.29

1. Summary(3 Line)

프리코스 3일차(3줄 요약)

- 페어 리뷰를 잘쓰려면 그 사람에 대해 관찰을 해야한다.

- 하루죙일 ... 코플릿 토나와... 어쩔수 없는걸

- 오피스 아워는 진짜 중요한 시간.. 집중하자

 

---

2. Today's Todo

• 모르는 것을 검색하는 방법
• 반복문
  1) for 문
  2) for in 문
  3) for of 문
  4) forEach 문
  5) while 문
  6) break 문
  7) continue 문
• 이중for문(중첩 for문)
• 1번째 페어 리뷰

---

 

#1 반복문

 알고리즘에서 중요한 것들 중 조건문 반복문이 있다고 했었는데, 중요한 이유는 

비슷한 패턴의 형태의 코드를 여러 번 실행시켜 하는 코드들을 반복문을 사용 함으로써  단 2~3줄로 줄여준다.

반복문의 형태는 여러가지가 있을 것이다. 일단 지금 대략 아는 것들을 나열해보자면 이것들이다.

자주쓰일 것으로 생각되는 것들은 이것들이다 (for문 // for in 문 // for of 문 // forEach문 // while문)

구글에 '자바스크립트 반복문 종류'를 쳐보니까 이외에도 반복문이 몇개 더 있었다.

break문 // continue 문 // do-while문 // 레이블 문  << 이 4가지는 이름만 알뿐... 실제로 거의 써보지는 못했다.

+추가로) 이중 포문도 사용하는 방법도 알아서 연습을 해야 할 것 같다.

 

루프와 반복

 

1) for문 

for ( 초기값 ; 조건문 ; 증감문 ) {

   반복할 내용

}

let sum = 1;

for(let i= 2; i<= 4; i++) {
  sum = sum + n;
}

 

sum(0~n)까지의 합을 리턴

function sum(n) {
  let total=0;
  for(let i=0; i<=n; i++) { 
    total = total + i;
  } 
  return total;
}

 

getMaxNumberFromString (숫자를 문자열을 입력 받아 그 문자열의 숫자 중 가장 큰 수를 리턴)

for문 안에 if문 조건

function getMaxNumberFromString(str) {
  let result = 0;
  for(let i=0; i<str.length; i++) {
    if(Number(str[i]) > result) {
      result = Number(str[i]);
    }
  }
  return String(result);
}

 

replaceAll (두 개의 문자를 입력 받아 , 문자열에 등장하는 특정 문자가 다른 문자로 바뀐 문자열 리턴)

function replaceAll(str, from, to) {
  let result = '';

  for(let i = 0; i<str.length; i++) {
    if(str[i] === from) { 
      result = result + to;
    }
    else {
      result = result + str[i];
    }
  }
  return result
}

 

 

2) for in 문

for ( variable in object ) {

   반복할 내용

}

for(let index in arr){
    console.log(index);
}

 

객체에 대한 for in 문 예제

let obj = {x:10, y:11, z:12};
for (prop in obj){
    console.log("name: " + prop + "; value: " + obj[prop]);
}
// name: x; value: 10
// name: y; value: 11
// name: z; value: 12

 

배열에 대한 for in 문 예제

let arr = [10,11,12];
for (prop in arr){
    console.log("name: " + prop + "; value: " + arr[prop]);
}

// name: 0; value: 10
// name: 1; value: 11
// name: 2; value: 12

 

3) for of 문

for ( variable of object ) {

   반복할 내용

}

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

 

for in : 객체의 속성 또는 배열의 요소에 대해 반복하는 기능 수행

즉, 객체의 속성을 순회하기 위한 구문

 

for of : 반복가능한 객체(Array, Map, Set, String, TypeArray 등)을 반복하는 기능 수행

즉, 객체의 요소들(Data)를 순회하기 위한 구문

 

let list = [4, 5, 6];

 

for (let i in list) {
  console.log(i) // '0', '1', '2';

}

 

for (let i of list) {
  console.log(i) // '4', '5', '6';

}

 

for in 구문은 배열의 인덱스를 순회하며 출력하고 있다.

단점 : 인덱스가 문자로 반환, 프로토타입 체인도 순회, 루프 순회 순서가 무작위

 

for of 구문 

장점 : 배열 순회를 지원하는 문법, for in 구문의 단점을 보완 

 

Javascript(ES6) - For in, For of loop(반복문) 설명 및 예제

 

자바스크립트 javascript for in , for of 의 차이

 

4) forEach문

if (false) 

 

5) while문

while(조건) {

  조건에 만족할 동안 실행할 명령문

}

let i = 0;
while (i < 10) {
  alert(i);
  i++;
}

 

* 언제 for 문을 사용하고, 언제 while문을 사용하는가?

- 

6) break문 

 

7) continue 문 

   

 

 

 

 

 

---

 

#2 배열

 문자열은 자바스크립트에서 type(타입)의 일종이다. 문자열 이라는 단어는 사실 광범위하다.

어떻게 보면 우리가 일상에서도 쓰는 단어도 다 문자열이고, 지나가다 보는 광고판이나 광고글을 봐도 다 문자열이라고 할 수 있다.

그만큼 우리에게 일상적이라고 볼 수 있다. 마찬가지로 프로그래밍 언어에서도 일상일 것이다. 

문자열을 잘 활용한다면, 프로그래밍 하는데 꽤나 많은 도움이 될 것이다.  

 

 

 

1) 문자열의 인덱스(str[index])

let str = 'Twitch';

str[0] = 'T'   //   str[3] = 't'   /   str[5] = 'h'

 

2) .concat() 메소드

: 두 개의 문자열을 하나의 문자열로 만들어주는 역할을 하는 메소드(원본바뀌지 않음) 

문자열 합치기  /  배열 합치기

 

형태) str.concat(string1, string2, ...)

const str1 = 'Hello';
const str2 = 'World';

console.log(str1.concat(' ', str2)); // 'Hello World'
// 문자열(str1)에 공백(' ') 단위로 문자열(str2)을 붙여 하나의 문자열로 만든다.

console.log(str2.concat(', ', str1)); // 'Hello World'
// 문자열(str2)에 컴마 공백(', ') 단위로 문자열(str1)을 붙여 하나의 문자열로 만든다.

 

3) .indexOf() 메소드

:  지정한 문자열에서 특정 문자(열)의 첫번째 위치를 알려주는 함수

지정한 문자열 찾기 / 특정 문자열의 n번째 위치 가져오기 / 문자열의 존재 여부

 indexOf는 대소문자를 구분하므로 유의

유사) latstIndexOf() => 문자열에서 반대방향부터 찾는 인덱스

형태) indexOf(searchValue, fromIndex)

// 찾으려는 문자열이 대상 문자열에 존재-1
'Blue Whale'.indexOf('Blue') // 0

// 찾으려는 문자열이 대상 문자열에 존재하지 않는다면 -1
'Blue Whale'.indexOf('Bloe') // -1

 

 

4) .split() 메소드

:  문자열을 지정한 구분자('', . )자르기 위한 함수

공백('')단위로 나누기 / 특정 문자열의 n번째 위치 가져오기 / 문자열의 존재 여부

 indexOf는 대소문자를 구분하므로 유의

csv 형식을 처리할때 유용(강의 참고 => 문자열다루기 08분 39초 ~ 11분 16초)

유사) latstIndexOf() => 문자열에서 반대방향부터 찾는 인덱스

형태) .split(separator, limit)

let example = 'Hello World Javascript';
console.log(example.split(' '));
// ["Hello", "World", "Javascript"]

let a = "1,2,3" ;
let array = a.split(",");
console.log(array);
// ["1", "2", "3"]

 

 

5) .substring() 메소드

: 문자열을 특정한 구간(start ~ end)의 문자열을 추출

주의해야하는것은 substring(0,3)은 0번째 부터 3번 이전까지만 가져옴 즉, 0번째, 1번째, 2번째 까지만 가져옴

목적 : 어느 문자열에서 자신이 사용하고자하는 문자열의 부분만 가지고 오고 싶을때 사용

형태) .substring(start, end)

 

let example = 'Hello World Javascript';
console.log(example.split(' '));
// ["Hello", "World", "Javascript"]

let a = "1,2,3" ;
let array = a.split(",");
console.log(array);
// ["1", "2", "3"]

6) .toLowerCase()   //   .toUpperCase() 메소드

: 문자열을 소문자로 변환   //   문자열을 대문자로 변환 

목적 : 어느 문자열에서 자신이 사용하고자하는 문자열의 부분만 가지고 오고 싶을때 사용

 

// .toLowerCase() 대문자를 소문자로 변환
console.log('ALPHABET'.toLowerCase()); // 'alphabet'
// .toUpperCase() 소문자를 대문자로 변환
console.log('alphabet'.toUpperCase()); // 'ALPHABET'

 

7) immuatble & mutable

immutable vs mutable

 

8) 추후 공부(나중에)

trim
공백 문자: 탭 문자 (\t), Carrige return(\r\n) 및 return 문자(\n)
match (advanced)
replace (advanced)
정규 표현식 (advanced)

---

3. Tomorrow Todo

• 코플릿(문자열)
• 모르는 것을 검색하는 방법
• 반복문
• 코플릿(반복문)
• 페어 리뷰(1)