3.[JavaScript] 기초제어문(조건문, 반복문) & 문자열

Chapter1. 조건문
1-1. 조건문 기초
1-2. Boolean 값 출력하기
Chapter2. 문자열
2-1. 문자열 기초
2-2. 문자열 다루기
Chapter3. 반복문
3-1. 반복문 기초
3-2. 구구단출력하기

---

Chapter1. 조건문

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

1-1. 조건문 기초

조건문

:어떤 조건을 판별하는 기준을 만드는 것, 반드시 비교연산자 필요

비교의 결과는 늘 불리언. true 혹은 false

엄격한 비교연산자 ===, !==

‘True’ === true > //false

조건문 형식

If (조건1) {

	} else if (조건2) {

	} else {

	}

조건문에는 불리언결과가 나오는 비교구문이 들어간다.

두가지 조건이 한번에 적용되는 경우

: if문 중첩사용도 가능하지만 논리연산자 사용

1) && = and

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

2) || = or

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

3) !조건 = not 연산자

truthy, falsy 여부를 반전시킴

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

!false //true

!(3>2) //false 괄호안은 트루이고 !로 인해 값이 반전됨

!undefined //true :undefined는 falsy한 값

!’Hello’ //false, 빈 문자열 이아닌이상 모든 문자열은 truthy한 값

기억할 falsy값 6가지

:if문에서 false로 변환되어 if구문이 실행되지 않는다.

if(false)

if(null)

if(undefined)

if(0)

if(NaN) 

if(‘’) 

---

1-2.불리언 값 출력하기

숫자비교

let age = 17;

console.log(19<age) // false

문자열비교

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

and 연산자

console.log(true && true) //t

console.log(true && false) //f

console.log(false && true). //f

console.log(false && false). //f

let isSt = true;

let isFe = true;

console.log(isSt && isFe) //t

console.log(isSt && !isFe) //f

console.log(!isSt && isFe) //f

console.log(!isSt && !isFe) //f

let isSt=true;

let isFe = false;

console.log(isSt && isFe) //f

console.log(isSt && !isFe) //t

console.log(!isSt && isFe) //f

console.log(!isSt && !isFe) //f

or 연산자

console.log(true || true) //t

console.log(true || false). //t

console.log(false || true). //t

console.log(false || false) //f

OR연산자(||)를 사용하는 경우,
두 조건 중 하나라도 truthy한 값일 경우 true, 그렇지 않으면 false가 출력됨

let isSt = true;

let isFe = true;

console.log(isSt || isFe) //t

console.log(isSt || !isFe). //t

console.log(!isSt || isFe). //t

console.log(!isSt || !isFe) //f

not연산자

console.log(!true)

console.log(!false)


let isStu = true;

let isFe=false;

console.log(!isStu)

console.log(!isFe)



let isStu = true;

let isFe=false;

console.log(!!isStu) //t

console.log(!!isFe). //f

console.log(!!!isStu) //f

console.log(!!!isFe). //t

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

---

Chapter2. 문자열

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

2-1. 문자열

문자열은 string
문자 하나는 character

문자열은 항상 read-only, 새로 할당하지 않는 이상 바뀌지 않는다.

+연산자 사용가능

string 타입과 다른 타입 사이에 + 연산자쓰면 string 형식으로 변환됨

console.log(‘1’ + 7); //’17’

-str1.concat(str2, str3); 형식도 있음.



let str1 = '1';

let str2 = 'z';

let str3 = '4';



console.log(str1.concat(str2,str3)); // 1z4

length 속성

:문자열 전체 길이 반환

 Var str = ‘code’;

console.log(str.length); //4

str.indexOf(searchValue)

• 인자 : 찾고자하는 문자열
• 리턴값: 처음으로 일치하는 index 자리 순서, 찾고자하는 문자열이 없으면 -1 리턴
• 대소문자 구분

‘Blue Whale’.indexOf(‘Whale’); // 5 (0부터시작하므로)

str.lastIndexOf(searchValue)

문자열 뒤에서부터 찾음

‘canal’.lastIndexOf(‘a’); 
// 뒤에서 두번째 a를 찾고, 그 a는 앞에서부터 0,1,2,3 이므로 3 리턴

str.includes(searchValue)

리턴값:불리언

  ‘Blue Whale’.includes(‘Blue’)=true

str.split(seperator)

seperator: 분리 기준이 될 문자열
리턴값: 배열

var str = ‘hello from the’;

console.log(str.split(‘ ‘)); // [‘hello’, ‘from’, the’]

*csv 형식 처리에 유용

Let csv = ‘csv데이터’

// csv.split(‘\n’) 하면 줄바꿈을 찾아냄. 줄바꿈마다 스플릿함.

let lines = csv.split(‘\n’)

lines[0]

lines[0].split(‘,’) //첫번째 줄을 쉼표 기준 배열형태로 나타냄.

str.substing(start, end)

:구간에 있는 문자열을 반환할 때 씀 (end글자 안 가져옴)

str.substing(1, 4) =1,2,3번째 글짜만 가져옴. (4번째글자 안가져옴)

str.substing(3, 0) 
// =(0, 3)로 판단, 0,1,2번째 글자만 가져옴. 음수는 0으로 취급

유사; str.slice()

str.toLowerCase()

str.toUpperCase()

모든 string method는 immutable = 원본이 변하지 않음
<=> mutable:원본이 바뀌는 경우

---

2-2. 문자열 다루기(실습)

let str = 'code states';

console.log(str.length) // 11



let str = 'code states';

console.log(str.indexOf('s')) // 5

console.log(str.indexOf(‘i’)) // -1



let str = '사과, 바나나, 오렌지, 배, 감, 딸기';

let word = str.split(',')

console.log(word); // ['사과', ' 바나나', ' 오렌지', ' 배', ' 감', ' 딸기']

---

Chapter3 반복문

• 반복문을 활용하여 단순한 기능을 반복하여 수행할 수 있다.
• 반복문(for문)과 문자열, 숫자를 이용해 반복적으로 코드를 실행시킬 수 있다.
• 기본적인 for문 (for (let i = 0; i < 5; i++))을 응용하여 다양한 for문을 만들 수 있다.
• for문과 while문의 차이에 관해서 설명할 수 있다.
• 반복문과 조건문을 응용하여 특정 조건에서만 코드가 실행되도록 할 수 있다.
• 이중 for문을 이해하고 활용할 수 있다.

3-1. 반복문 기초

반복문

같거나 비슷한 코드를 여러 번 실행시켜야 할 경우에 쓰는 구문

반복문을 만들어보자

반복할 내용을 먼저 코드로 작성

sum = sum + n;

반복문 만들 때 조건을 잘 정의해야 함

숫자(n)는 2부터시작한다. let n = 2;

숫자가 4가 될때까지 반복한다.  n <= 4;

숫자는 1씩 증가한다. n = n + 1;

for 구문에 적용해보자

for 구문 구조

for (초기화; 조건식 ; 증감문) 

{반복할 내용(실행할코드)}

let sum = 1;

for () {

sum = sum + 2; //반복할내용

}

반복할 조건을 초기화(초기값), 조건식, 증감문 순으로 ()에 넣어준다.(중요)

let sum =1;

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

}

console.log(sum); //10

• 초기값 => 2부터

• 언제까지? => n이 4가 될 때까지

• 어떤 스텝으로? 얼마만큼의 스텝으로? => 1씩 증가하는 스텝으로

while구문

for과 차이없음.단, 초기화나 증감문이 필요없을 때, while 사용

초기화는 바깥에, 증감문은 바디 안에, 조건식만 괄호 n안에 넣는다.

let sum =1;
let n = 2;

while ( n <= 4 ; ) {
sum = sum +2; 
n = n + 1 ; 
}

---

3-2. 구구단출력하기

2단 출력하기

for (1부터 시작; 9가 될 때까지; 1씩 증가하면서 코드 실행) {
  실행할 코드
}


function mulTablePrinter(num) {
	for (let n = 1; n <= 9; n = n + 1) {
	console.log(num * n)
	}
}

mulTablePrinter(2); // 2단

구구단 전부 출력하기(이중반복문)

*이중반복문:반복문 안에서 반복문을 중복해서 사용한다.

function mulTablePrinter() {
	for(let n = 2; n <= 9; n = n + 1) {
		for(let m = 1; m <= 9; m = m + 1) {
			console.log(`${n} * ${m} = ${n * m}`)
		}
	}
}

mulTablePrinter();

//2 * 1 = 2
//2 * 2 = 4
//2 * 3 = 6
//...
//9 * 8 = 72
//9 * 9 = 81

---

지금 기분 😌

좋다. 오늘은 조건문과 문자열을 공부했는데, 컴활 1급 공부할 때와 비슷한 문법과 함수들이 나와서 이해하기가 막 어렵지는 않았다.
새로운 페어 분과 함께 연습문제를 풀면서 정말 너무나도 많은 것을 배웠다.
어제까지만해도 함수표현식을 보며 덜덜 떨었던 내가 이제는 함수 안의 코드를 도대체 어떻게 작성해야 하는지 고민하고,
수도코드도 적고, 생각하는 힘을 기르기 위해 노력하며 문제를 풀고 있다.
페어 분의 들숨에 건강과 날숨에 재력을...