Section1 조건문 , 문자열

#첫 페어프로그래밍

수업 시작 전 코드스테이츠 매니저님이 몸상태를 체크해주시며 오늘 페어프로그래밍에 참여가 가능한지 물어보셨다.

참여가 가능하다고 답변하니, 오늘 만날 페어에게 어제 몸상태가 안좋아 페어프로그래밍에 처음 참여한다는 것을 알려달라고 했으며,

오늘 만날 페어님은 이미 페어프로그래밍에 참여한 경험이 있기때문에 생략하고 넘어가는 과정이 있을 수 있다고 하셨다.

 

OT때부터 느꼈지만 매니저님은 참 배려가 깊으신 분이다.

생각지 못한 부분을 말씀해주시며 내가 첫 페어프로그래밍을 진행하기 전 긴장도 녹여주고, 참여를 수월하게 할 수 있게 해주셨다.

 

그렇게 나는 첫 페어님와 DM을 주고 받으며 페어프로그래밍을 하게 되었다.

첫 페어님께 내 사정을 말씀드리니 자신은 이런 저런 방식으로 진행했다며 친절하게 설명해주셨다.

 

첫 페어님은 닮고 싶은 부분이 참 많다.

성격이 급해 페어님이 말하는 도중 끼어들었으나 묵묵히 들어주며 의견을 수용 해주시니

덩달아 나도 조금씩 차분해지며 코딩을 진행했다.

 

그래도 긴장이 덜풀려 간혹 아무말잔치를 한거나 코딩 흐름을 놓칠 때는

페어님이 문제에  집중 할 수 있게끔 중심을 잡아주셨다. 

 

처음부터 좋은 페어님을 만나 기분이 좋은 하루이다.

---

오늘 배운 것

- 조건문

- 문자열

---

 

  조건문  

 

[학습목표]

- truthy와 falsy가 조건문에서 작동하는 방식을 이해할 수 있다.

- 비교 연산자를 통한 엄격한 비교( ===, !== )에 대해 이해할 수 있다.

- if와 else if, else를 이해하고 무리 없이 활용할 수 있다.

- 논리 연산자를 ( &&, ||, ! ...) 통해 복잡한 조건을 간결하게 작성할 수 있다.

- 복잡한 조건문을 활용하여, 실생활에서 쉽게 마주하는 문제를 해결하기 위한 알고리즘을 구현할 수 있다.

 

조건문을 배우기 위해서는 Boolean 타입에 대한 이해가 필요하다.

 * Boolean 타입은  참, 거짓을 나타내는 2가지 값을 갖는다 : true, false

 

조건문은 어떤 조건을 판별하는 기준을 만드는 것이다.

 

조건문에는 반드시 비교 연산자가 필요하다.

비교의 결과는 늘 Boolean, 즉 true 혹은 false입니다.

10 > 20 // 비교 연산자 >를 통한 비교 시 false 값을 확인할 수 있다.
10 < 100 // 비교 연산자 <를 통한 비교 시 true 값을 확인할 수 있다.
'hello' === 'world'; // 비교 연산자 ===를 통한 비교 시 false 값을 확인할 수 있다.

위의 비교연산자 이외에도 다양한 비교 연산자들이 있다.

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

 

❌  다음 연산자들은 사용하면 안된다.

아래 연산자들은 타입을 엄격하게 비교하지 않는다.

==	같다
==	다르다

 

예시) == 을 사용했을 때의 예시

1 == '1' // true
1 == true // true
null == undefined // true
[1] ==true // true

 

조건문 사용방법

조건에는 Boolean 타입으로 결과가 나오는 비교 구문이 들어간다.

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

 

두 가지 조건이 한 번에 적용되는 경우엔 논리 연산자(Logical  Operator)를 사용한다.

예시)

- 학생이면서 여성일 때 통과 : 두 가지 조건이 모두 만족되어야 할 때 AND 연산자 사용

   isStudent && isFemale

 

- 학생이거나 여성일 때 통과 : 두 가지 조건 중 한 가지만 만족해도 될 때 OR 연산자 사용

  isStudent || isFemale

 

- 학생이 아니면서, 여성일 때 통과 : NOT 연산자 사용(truthy, falsy 여부를 반전 시킴)

   !isStudent && isFemale

 

1) 논리 연산자 AND의 예제

- 두 가지 조건이 모두 true일 때 true를 반환한다.

- 한 가지라도 true가 아니면 false를 반환한다.

true && true // true
true && false // false
false && false // false

 

2) 논리 연산자 OR의 예제

- 두 가지 조건 중 한 가지라도 만족하면 true를 반환한다.

true || true // true
true || false // true
false || false // false

 

3) 논리 연산자 NOT의 예제

- !를 사용하여 true를 false로, false를 true로 반환한다.

- ✅  기억해야 할 6가지 falsy 값

   false

   null

   undefined

   NaN

   ''(빈 문자열)

!false // true
!(3 > 2) // false
!undifeind // true
!'Hello' // false

 

---

  문자열  

[학습목표]

- length 속성을 활용해 문자열의 길이를 확인할 수 있다.
- 두 개 이상의 문자열을 하나의 문자열로 만들 수 있다.
- slice() 메서드를 활용해 문자열을 원하는 만큼 ‘복사’할 수 있다.
- 영문으로 된 문자열을 대문자 또는 소문자로 바꿀 수 있다.
- 문자열 중 원하는 문자의 index를 찾고 접근할 수 있다 str.indexOf('a') 또는 str.lastIndexOf('a'),str[1]
- includes() 메서드를 활용해 문자열 중 원하는 문자가 포함되어 있는지 알 수 있다. str.includes('a')
- split() , join() 메서드를 활용해 문자열을 배열로 바꾸거나, 배열을 문자열로 바꿀 수 있다.
- 템플릿 리터럴(Template literals) 문법을 사용할 수 있다.

 

 

1. Basic Usages
 1) accessing a character

 문자열은 인덱스 번호를 이용해 한 문자열씩 접근할 수 있다.

 예를 들어 var str = 'hello' 일 때,  문자열 'hello'는 인덱스 0 ~ 4번으로 이루어져 있다.

문자	h	e	l	l	o
인덱스번호	0	1	2	3	4

 문자열의 첫번째에 접근하려면 인덱스 0번부터 접근한다.

let str = 'hello';

// 첫번째 문자열 접근하기
console.log(str[0]); // h

// 두번째 문자열 접근하기
console.log(str[1]); // e

 

우리는 문자열에 인덱스번호를 이용해 접근할 수 있지만,

문자열을 변경할 수는 없다! (read-only)

let str = 'hello';

// 첫번째 문자열에 접근하기 (가능)
console.log(str[0]) // h

// 문자열 변경하기 (불가능)
str[0] = a;
console.log(str) // aello가 아닌 hello가 출력된다.

 2) + / concat

문자열과 문자열을 연결할 때는 더하기 연산자(+)와 concat() 메서드를 사용할 수 있다.

 

(1) 더하기 연산자를 이용해 문자열 연결하기

let str1 = 'apple';
let str2 = 'juice';
let str3 = '100';

console.log(str1 + str2); // applejuice
console.log(str3 + 300); // 100300

 

(2) concat() 메서드를 이용해 문자열 연결하기

(참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/concat)

concat() 메서드는 매개변수로 전달된 모든 문자열을

호출 문자열에 붙인 새로운 문자열을 반환한다.

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

console.log(str1.concat(' ', str2));
// expected output: "Hello World"

console.log(str2.concat(', ', str1));
// expected output: "World, Hello"

 

2. Properties
 1) length

 length 프로퍼티는 문자열의 문자 개수를 반환한다.

'Hello'.length; // 5
'안녕하세요!'.length; // 6

3. Methods
 1) indexOf

 str.indexOf(searchValue)

searchValue : 찾고자 하는 문자열 

 

 indexOf 메서드는 대상 문자열(메서드를 호출한 문자열)에서

 인수로 전달받은 문자열을 검색하여 첫 번째 인덱스를 반환한다.

 검색에 실패하면 -1을 반환한다.

 

 indexOf 메서드는 대상 문자열에 특정 문자열이 존재하는지 확인할 때 유용하다.

const str = 'Hello World';

// 문자열 str에서 'l'을 검색하여 첫 번째 인덱스를 반환한다
str.indexOf('l'); // 2

// 문자열 str에서 'Wo'를 검색하여 첫 번째 인덱스를 반환한다.
str.indexOf('Wo'); // 6

// 문자열 str에서 'z'를 검색했으나, 해당 문자가 없다면 -1을 반환한다.
str.indexOf('z'); // -1

 

2) lastIndexOf

str.lastIndexOf(searchValue)

searchValue : 찾고자 하는 문자열

 

lastIndexOf() 메서드는 주어진 값과 일치하는 부분을 역으로 탐색하여, 

최초로 마주치는 인덱스를 반환한다. 

일치하는 부분을 찾을 수 없으면 -1을 반환한다.

let food = 'chicken';

// 'c' 문자를 찾기위해 문자열 끝에서 역순으로 탐색
food.lastIndexOf('c'); // 3

 

3) includes

ES6에서 도입된 includes 메서드는

대상 문자열에 인수로 전달받은 문자열이 포함되어 있는지 확인하여

그 결과를 true 또는 false로 반환한다.

const fruit = 'apple and banana and orange';

fruit.includes('banana'); // true

 

 

 4) split

str.split(sperator)

sperator : 원본 문자열을 분리하는 기준이 되는 문자열. 실제 문자열이나 정규표현식을 사용할 수 있다.

 

const str = 'How are you doing?'

// 공백으로 구분하여 배열로 반환한다.
str.split(' '); // ['How', 'are', 'you', 'doing?']

// 인수로 빈 문자열을 전달하면 각 문자를 모두 분리한다.
str.split(''); 
// ['H', 'o', 'w', ' ', 'a', 'r', 'e', ' ', 'y', 'o', 'u', ' ', 'd', 'o', 'i', 'n', 'g', '?']

// 인수를 생략하면 대상 문자열 전체를 단일 요소로 하는 배열을 반환한다.
str.split();
// ['How are you doing?']

 

5) substring

str.substring(start);
str.substring(start, end);

substring() 메서드는 대상 문자열에서 첫 번째 인수(start)로 전달 받은 인덱스에 위치하는 문자부터

두 번째 인수(end)로 전달 받은 인덱스에 위치하는 문자의 바로 이전 문자까지의 문자열을 반환한다.

 

substring의 두 번째 인수(end)는 생략할 수 있다.

이 때, 첫 번째 인수로 전달한 인덱스에 위치하는 문자부터 마지막 문자까지 부분 문자열을 반환한다.

const str = 'Hello World';

// 인덱스 0부터 3 이전까지의 부분 문자열을 반환한다.
str.substring(0, 3)
// Hel

// 인덱스 2부터 마지막 문자까지의 문자열을 반환한다.
str.substring(2)
// llo World'

 

const str = 'hello world';

// 첫 번째 인수 > 두 번째 인수인 경우 두 인수는 교환된다
str.substring(4, 1); // ell

// 인수 < 0 또는 NaN인 경우 0으로 취급된다.
str.substring(-2); // Hello World

// 인수 > 문자열의 길이(str.length)인 경우 인수는 문자열의 길이(str.length)로 취급된다.
str.substring(1, 100); // ello World
str.substring(20); // ''

 

 

6) slice

slice(beginIndex)
slice(beginIndex, endIndex)

 

slice 메서드는 substring 메서드와 동일하게 동작한다.

단, slice 메서드에는 음수인 인수를 전달할 수 있다.

음수인 인수를 전달하면 대상 문자열의 가장 뒤에서부터 시작하여 문자열을 잘라내어 반환한다.

const str = 'Hello World';

// substring과 slice 메서드는 동일하게 동작한다.
str.substring(0, 5) // Hello
str.slice(0, 5) // Hello

// 인덱스가 2인 문자부터 마지막 문자까지 잘라내어 변환
str.substring(0, 5) // llo world
str.slice(0, 5) // llo world

// 인수 < 0 또는 NaN인 경우 0으로 취급된다.
str.substring(-5) // Hello World
str.slice(-5) // World

 

5) toLowerCase / toUpperCase

toLowerCase() 메서드는 대상 문자열을 소문자로 변경한 문자열을 반환한다.

toUpperCase() 메서드는 대상 문자열을 대문자로 변경한 문자열을 반환한다.

const fruit = 'apple';
fruit.toUpperCase(); // APPLE

const fruit = 'APPLE';
fruit.toLowerCase(); // apple

 

 

6) trim

str.trim();

trim() 메서드는 문자열의 양쪽 끝에서 공백을 제거한다.

const red = '   apple   ';
red.trim(); // 'apple'

7) match (정규표현식 개념이 추가되므로 추후 공부 예정)

8) replace

replace(regexp, newSubstr)
replace(regexp, replacerFunction)

replace(substr, newSubstr)
replace(substr, replacerFunction)

replace() 메서드는 대상 문자열에서 첫 번째 인수로 전달받은 문자열 또는 정규표현식을 검색하여

두 번째 인수로 전달한 문자열로 치환한 문자열을 반환한다.

 

const str = 'Hello World';

// str에서 첫 번째 인수 'world'를 검색하여 두 번째 인수 'Lee'로 치환한다.
let newStr = str.replace('world', 'Lee');
console.log(newStr); // Hello Lee

// 검색된 문자열이 여럿 존재할 경우, 첫 번째로 검색된 문자열만 치환한다.
str = 'apple apple';
newStr = str.replace('apple', 'banana'); // 'banana apple'