[JavaScript] 기초 제어문

play·2022년 4월 27일
JavaScript문자열반복문조건문
0

JaveScript

목록 보기
2/10
post-thumbnail

Chapter1. 조건문

1-1 조건문
1-2 조건문 형식
1-3 논리 연산자

Chapter2. 문자열

Chapter3. 반복문

3-1 반복문
3-2 반복문 형식
3-3 for 구문
3-4 while 구문

Chapter1. 조건문

📌 조건문(Conditional)

학습목표

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

조건을 배우기 위해선 ...
Boolean타입 이해 필요

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

조건문은 어떠한 조건을 판별하는 기준을 만드는 것

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

3 > 5; // false
9 < 10; // true
'hello' === 'world'; // false 
→ 비교의 결과는 늘 Boolean(true, false).

조건문 형식 

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

✓ 조건에는 Boolean으로 결과가 나오는 비교구문이 들어감

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

  1. AND 연산자 : &&
    동시에 두 조건을 만족해야 통과

    학생이면서, 여성일 때 통과.
    isStudent && isFemalre;

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

  2. OR 연산자 : ||
    둘중에 하나만 트루여도 통과

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

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

  3. NOT 연산자 : !
    true 혹은 false의 값을 반전시킨다.

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

    !false // true
!(3>2) // 3이 2보다 큰 건 true이므로 false가 나온다.

!false // true
!(3>2) // false
!undefined // true 
→ undefined를 flase로 취급했음. 
!'Hello' // false

3-1. 기억해야할 6가지 falsy 값

다음은 if문에서 false로 변환되므로, if구문이 실행되지 않습니다.
   
if (false)
if (null)
if (undefined)
if (0)
if (NAN)
if ('')

Chapter2. 문자열

📌 문자열

학습목표

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

문자열은 ...

  • 마치 배열에 index에 접근하듯이 문자열의 한 글자, 한 글자를 얻어낼 수 있다. 

    let str = 'codeStates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'
console.log(str[10]); // undefined

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

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

  • +연산자를 쓸 수 있다.

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

    let str1 = 'code';
let str2 = "states";
let str3 = '1';
console.log(str1 + str2); // 'codeStates'
console.log(str3 + 7); // '17'

  • length property : 문자열의 전체 길이를 반환함.

  • str.indexOf(searchValue);

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

ex)
'Blue Whale'.indexOf('Blue'); // 0 
0번째 index부터 Blue가 떨어지므로 0

'Blue Whale'.indexOf('blue'); // -1 
찾고자 하는 문자열이 없으므로 -1 

'Blue Whale'.indexOf('Whale'); // 5
Whale이란 String이 있고, 이게 처음 등장하는 건 5번째부터 등장하므로 5 

'Blue Whale Whale'.indexOf('Wha;e'); // 5
2번연속으로 등장하는 경우엔 처음 등장하는 index만 출력한다.

'cana1'.lastIndexOf('a'); // 3
뒤에서부터 찾는다. l, 'a'가 3번째에 오므로 3.

    see more: str.includes(searchValue);
    true / flase를 리턴함

  • str.split(seperator);
    split : 분리하다.
    즉, arguments엔 분리 기준이 될 문자열이 들어감
    return value : 분리된 문자열이 포함된 배열

split(’ ’)은 공백을 기준으로 문자열을 분리하여 배열로 리턴

let str = 'Hello from the other side';
console.log(str.split(' '));
// ['Hello', 'from', 'the', 'other', 'sied']
→ csv 형식을 처리할 때 유용.
  • str.substring(start, end) 텍스트 부분만 가져오고 싶을 때 사용
    slice와 같지만 substring은 배열에선 못 쓴다.
    arguments: 시작 index, 끝 index. 서로 바뀌어도 상관은 없음.
    return value: 시작과 끝 index 사이의 문자열. 구간의 문자를 반환할 때 쓴다. 
let str = 'abcdefghij';
console.log(str.substring(0, 3));   // 'abc'
0부터 3 사이의 문자를 가져오는데 3은 가져오지 않음. 0,1,2만 가져온다. 

console.log(str.substring(3, 0));   // 'abc'
console.log(str.substring(1, 4));   // 'bcd'
1,2,3을 가져온다. b,c,d. 

console.log(str.substring(-1, 4));   // 'abcd', 음수는 0으로 취급

see more: str.slice(start, end);
-> substring과 비슷하나 몇가지 차이점이 있음

  • str.toLowerCase(); / str.toUpperCase(); IMMUTABLE
    arguments: 없음
    return value: 대,소문자로 변환된 문자열 
    console.log('ALPHABET'.toLowerCase()); // 'alphabet'

    IMMUTABLE: 원본이 변하지 않음.
    모든 string method는 전부 immutable.
    array method는 immutable / mutable 구분해야함

Chapter3. 반복문

📌 반복문

학습목표

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

반복문은 ...

  • 같거나 비슷한 코드를 여러 번 실행시켜야 할 때 사용해 단순한 반복을 효율적이고 간결하게 한다.

반복문 형식

  1. 반복할 내용을 먼저 작성한다

  2. 반복할 조건을 코드로 작성한다

    let sum = 1;
sum = sum + n; // "sum과 숫자(n)의 합"을 sum에 대입

조건:
let n = 2; //숫자(n)는 2부터 시작한다
n <= 4; // 숫자(n)가 4가 될때까지 반복한다
n = n + 1; // 숫자(n)는 1씩 증가한다

console.log(sum);

    📌 for 구문

    반복할 내용을 중괄호 block안에 넣어준다

    반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다.

ex)

for (초기화; 조건식; 증감문) {
	   실행할 코드
	} 
   
   for (1부터 시작; 9가 될 때까지; 1씩 증가하면서 코드 실행) {
	   실행할 코드
}

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

📌 while 구문

  • if문처럼 안에 조건문만 따로 적어준다.

  • for문으로 할 수 있는건, while로도 할 수 있다.

  • 초기화가 필요없고 증감문이 필요없는 때에 while 쓰는 것도 좋다.

    for문 / while문

  • for문 : 반복 횟수가 명확할 때

  • while : 반복 횟수가 명확하진 않을 때.

+) 이중 반복문을 이용한 구구단 출력
반복문 안에서 반복문을 중복해서 사용

2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
...
9 * 8 = 72
9 * 9 = 81
이렇게 2단부터 9단까지의 구구단을 한 번에 출력하려면...

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()
profile
play
블로그 이사했습니다 🧳
이전 포스트

[JavaScript] 기초

다음 포스트

[JavaScript] 배열

0개의 댓글