[TIL-007] 20.07.28

1. Summary(3 Line)

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

페어프로그래밍의 흥미를 느낌

조금이나마 검색 스킬을 늘림

의사코드는 아직도 어려븐..것

---

2. Today's Todo

• 조건문
  1) 비교연산자
  2) if, else if, else
  3) 논리연산자
  4) 6가지 falsy 값
  5) 에러 메시지 보는 방법
  6) 조건 문제로 배우는 알고리즘(의사코드)
    1. 문제 요구사항
    2. 문제 분해
    3. 의사코드
    4. 의사코드 -> 실제코드 변환
• 문자열
  1) 문자열의 인덱스(str[index])
  2) .concat(string1, string2, ... stringN)
  3) .indefOf()
  4) .split(separator , limit)
  5) .substring(start, end)
  6) .toLowerCase() & .toUpperCase
• 코플릿(변수와 자료형)

---

 

#1 조건문

 알고리즘에서 중요한 것들 중에는 조건문, 반복문이 정말 중요한것 같다. 

조건문은 어떠한 조건을 판별하여 그것을 기준으로 값을 도출한다. 

만약 함수에서 조건식을 썻는데 제대로 조건을 주었다면 정상 작동 하겠지만,

그렇지 않고 조건에서 !==(같지않다)를 써야되는데 ===(같다)를 쓴다면, 버그가 생긴다.

간단한 코드라면 버그를 찾는데 얼마 걸리지 않겠지만, 긴 코드에서 이러한 버그를 찾는데 시간이 오래 걸릴 것이다. 

그렇기에 조건문은 매우 중요하다고 생각하면서, 동시에 생각을 많이 해야하는 부분이다.

 

 

1) 다양한 비교 연산자

>(초과)   <(미만)   >=(이상)   <=(이하)   ===(같다)   !==(다르다)

        typeof true => 'boolean'            typeof true => bubble => 'undefined' 

 

2) if, else if else 기본

// if 기본문
if (조건1) {
  // 조건1이 통과할 경우
} else if (조건2) {
   // 조건1이 통과 못했고
   // 조건2가 통과할 경우 
} else {
  // 모든 조건이 통과하지 않는 경우
}

 

3) 논리 연산자(Logic Operator)

AND 연산자 = &&

true && true // true

true && false // false

false && false // false

 

OR 연산자 = ||

true || true // true

true || false // true

false || false // false

 

NOT 연산자  = !

!false // true

!(3>2) // false

!undefined // true

!'Hello' // false

 

4) ★중요★ 기억해야할 6가지 falsy 값

if (false) 

if (null)

if (undefined)

if (0)

if (NaN) 

if (' ')

 

5) 에러 메세지 보는 방법(isOldEnoughToDrink 예시)

   1. 문제의 요구사항 파악

   - 나이를 입력받아 술을 마실 수 있는지 (18세 이상) 여부를 리턴

   is~~로 시작하는것은 boolean 형태이다. 

   2. 테스트 케이스 확인

expect(isOldEnoughToDrink(40)).to.be.true;

 

   이것의 의미는 함수에 40을 넣으면, true의 return(리턴)값을 기대한다. 라는 뜻이다.

   다음주에 아마, expect를 다시 배우게 될 것이므로, 그때 집중적으로 보자!!

   3. 테스트 통과 못한 이유 확인

expected undefined to be true

 

   이것의 의미는 true가 되기를 기대했지만 undefined가 나왔다. 라는 뜻이다.

   이 말은 즉슨, 리턴 값이 true가 아니라 undefined가 되었으니 함수가 틀렸다 라는 의미다.

   어느 부분에서 undefined를 return(리턴)하거나, 아무것도 return(리턴)하지 않는 경우가 있다는 것이다.

   4. 디버깅

   - 위에 처럼 에러 메시지를 분석, 테스트 케이스를 확인하고, 추적하는 과정이다.

  

6) 조건 문제로 배우는 알고리즘 (의사코드) (convertScoreToGradeWithPlusAndMinus 예시)

   1. 문제 요구사항

• (100 - 90) => 'A'
• (89 - 80) => 'B'
• (79 - 70) => 'C'
• (69 - 60) => 'D'
• (1의 자리 = 0~2) => '-' 등급을 붙인다.
• (1의 자리 = 8~9) => '+' 등급을 붙인다.

   2. 문제 분해

• 10의 자리 =  grade 판별
• 1의 자리 = plusAndMinus 판별

   3. 의사코드

• (score = 100) => return 'A+';
• score로 10의 자리 얻어냄 => Math.floor(score / 10); => 소숫점 버리는 메소드 검색
• score로 1의 자리 얻어냄 => score % 10;
• (10의 자리 = 6) => grade = 'D';
• (10의 자리 = 7) => grade = 'C';
• (10의 자리 = 8) => grade = 'B';
• (10의 자리 = 9) => grade = 'A';
• (1의 자리 = 0~2) => plusAndMinus = '-';
• (1의 자리 = 3~7) => plusAndMinus = ''; (빈 문자열)
• (1의 자리 = 8~9) => plusAndMinus = '+';
• 최종 결과인 grade + plusAndMinus 를 return(리턴)

  4. 의사코드 -> 실제코드 변환

 

// (score = 100) => return 'A+';  
	if(score === 100) { return 'A+'; }
// score로 10의 자리 얻어냄 => Math.floor(score / 10);
	let tensOfNumber = Math.floor(score / 10);
// score로 1의 자리 얻어냄 => score % 10;
	let unitOfNumber = score % 10;
// (10의 자리 = 6) => grade = 'D';
	if(tensOfNumber === 6) { grade = 'D'; }
// (10의 자리 = 7) => grade = 'C';
	if(tensOfNumber === 7) { grade = 'C'; }
// (10의 자리 = 8) => grade = 'B';
	if(tensOfNumber === 8) { grade = 'B'; }
// (10의 자리 = 9) => grade = 'A';
	if(tensOfNumber === 9) { grade = 'A'; }
// (1의 자리 = 0~2) => plusAndMinus = '-';
	if(unitOfNumber >= 0 && unitOfNumber <= 2) { sign = '-'; }
// (1의 자리 = 3~7) => plusAndMinus = ''; (빈 문자열)
	let sign = '';
// (1의 자리 = 8~9) => plusAndMinus = '+';
	if(unitOfNumber >= 8 && unitOfNumber <= 9) { sign = '+'; }
// 최종 결과인 grade + plusAndMinus 를 return(리턴)
	return grade + sign;

 

 

 

 

 

 

---

 

#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)