[SEB FE] Section 1

Unit 3 - [JavaScript] 기초 제어문

• 조건문
• 문자열

---

회고

오늘은 조건문과 문자열에 대해서 학습을 한 다음 페어프로그래밍을 통해 알고리즘 문제를 풀었다. 페어프로그램의 경우 유닛이 바뀔 때마다 같이 문제를 푸는 동기도 함께 바뀌는데 그래서 오늘은 새로운 동기와 함께했다.

아무래도 같이 문제를 풀다보니 더 재미있었고 집중도 잘 되는 거 같았다. 다만 오늘은 문제의 난이도가 좀 있었는데 둘 다 비전공자이고 초보자이다 보니 멘탈이 나간 점은 비밀...^_^;

오늘은 국취제 온라인교육, 정처기 등등 정신이 없다보니 당장 복습은 어려울 거 같지만 주말에 다시 한번 보려고 한다.

그래도 개념학습 후 바로 문제를 푸는 것이 코딩 실력에 좋은 영향을 주는 거 같아 기분이 아주 좋다. 팍팍해서 성장하자! 🚀

조건문

학습목표

• truthy와 falsy가 조건문에서 작동하는 방식을 이해할 수 있다.
• 비교 연산자를 통한 엄격한 비교(===, !==)에 대해 이해할 수 있다.
• if와 else if, else를 이해하고 무리 없이 활용할 수 있다.
• 논리 연산자를(&&, ||, !...) 통해 복잡한 조건을 간결하게 작성할 수 있다.
• 복잡한 조건문을 활용하여, 실생활에서 쉽게 마주하는 문제를 해결하기 위한 알고리즘을 구현할 수 있다.

개념학습

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

let isAdult = true; // false
let isStudent = false; // true

• 조건문은 어떠한 조건을 판별하는 기준을 만드는 것
• 조건문에는 반드시 비교 연산자(comparison operator)가 필요하다.

비교 연산자

3 > 5; // false
9 < 10; // true

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

다양한 비교 연산자

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

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

• == 같다
• != 다르다

★ JS 연산자 테이블을 참고하면 더 자세한 내용을 알 수 있다.

조건문 공식

• 조건문은 다음과 같이 쓸 수 있다.

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

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

논리 연산자를 이용하면 두가지 조건을 한번에 적용할 수 있다.

• AND 연산자

// 학생이면서, 여성일 때 통과
isStudent && is Female;

• OR 연산자

// 학생이거나, 여성일 때 통과
isStudent || isFemale;

• NOT 연산자 → truthy, falsy 여부를 반전시킴
  truthy: true로 취급되는 값
  falsy: false로 취급되는 값

// 학생이 아니면서, 여성일 때 통과
!isStudent && isFemale;

• 논리 연산자 NOT

!false // true
!(3>2) // false

• 논리 연산자 OR

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

• 논리 연산자 AND

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

• 논리 연산자 NOT

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

기억해야 할 6가지 falsy 값

• 다음은 if 문에서 false로 변환되므로, if 구문이 실행되지 않는다.

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('') - 빈 스트링: 아무런 값이 없는 문자열

Boolean값 출력하기

• 숫자의 비교

let age = 25;
console.log(19 < age)

let age = 17;
console.log(19 < age)

---

true

false

• 문자열의 비교

console.log('hello' === 'world')

console.log('hello' !== 'world')

---

false

true

NOT 연산자의 실습

• NOT연산자는 결과가 true이면 false를, false이면 true를 반환한다. 2개 이상을 중첩하는 것도 가능하다.

let isStudent = true;
let isFemale = false;

console.log(!!isStudent)
console.log(!!isFemale)

--

true
false

let isStudent = true;
let isFemale = false;

console.log(!!!isStudent)
console.log(!!!isFemale)

---

false
true

---

문자열

학습목표

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

개념학습

Basic Usages - Accessing a Character
str[index]

var str = 'CodeStates';
console.log(str[0]); // 'C'
console.log(str[4]); // 'S'
console.log(str[10]); // undefined

• Note: index로 접근은 가능하지만 쓸 수는 없음(read-only)

str[0] = 'G';
console.log(str); // 'CodeStates' not 'GodeStates'

Basic Usages - Concatenating Strings

• + 연산자를 쓸 수 있음
• string 타입과 다른 타입 사이에 + 연산자를 쓰면, string 형식으로 변환(toString)

var str1 = 'Code';
var str2 = "States";
var str3 = '1';
console.log(str1 + str2); // 'CodeStates'
console.log(str3 + 7);    // '17'

• str1.concat(str2, str3...);의 형태로도 사용 가능

length PROPERTY

• 문자열의 전체 길이를 반환

var str = 'CodeStates';
console.log(str.length); // 10

str.indexOf(searchValue)

• arguments: 찾고자 하는 문자열
• return value: 처음으로 일치하는 index, 찾고자 하는 문자열이 없으면 -1
• lastIndexOf는 문자열 뒤에서 부터 찾음

'Blue Whale' .indexOf('Blue'); // 0
'Blue Whale' .indexOf('blue'); // -1
'Blue Whale' .indexOf('Whale'); // 5
'Blue Whale Whale'.indexOf('Whale'); //5

'canal'.lastIndexOf('a'); // 3

• see more:str.includes(searchValue)
  → 불린 값을 출력함
  → Internet Explorer와 같은 구형 브라우저에서는 작동하지 않으므로 주의

str.split(seperator)

• arguments: 분리 기준이 될 문자열
• return value: 분리된 문자열이 포함된 배열

var str = 'Hello from the other side';
console.log(str.split(''));
// ['Hello', 'from', 'the', 'other', 'side']

• csv 형식을 처리할 때 유용

let csv = `연도,제조사
모델,설명,가격`;

csv.split(',')

csv.split('\n')

str.substring(start, end)

• arguments: 시작 index, 끝 index
• return value: 시작과 끝 index 사이의 문자열

var str = 'abcdefghij';
console.log(str.substring(0, 3)); // 'abc'
console.log(str.substring(3, 0)); // 'abc'
console.log(str.substring(1, 4)); // 'bcd'
console.log(str.substring(-1, 4)); // 'abcd' 음수는 0으로 취급
console.log(str.substring(0, 20)); // 'abcdefghij', index 범위 전체

• see more: str.slice(strat, end)
  → substring과 비슷하나, 몇가지 차이점을 보임

WHAT IS IMMUTABLE?

• 모든 string method는 immutable
• 즉, 원본이 변하지 않음
• array method는 immutable 및 mutable 여부를 잘 기억해야 함

str.toLowerCase() / str.toUpperCase() ← IMMUTABLE

• arguments: 없음
• return value: 대, 소문자로 변환된 문자열

console.log('ALPHABET'.toLowerCase()); // 'alphabet'
console.log('alphabet'.toUpperCase()); // 'ALPHABET'