TIL 2020-10-18 (조건문, 문자열 다루기)

nyongho·2020년 10월 18일
TIL문자열 다루기조건문
0

JavaScript

목록 보기
2/23
post-thumbnail

Level 1-1 JavaScript 기초와 문제 해결

TIL List

  • 조건문
  • 문자열 다루기

1) 조건문

우리는 일상생활에서 언제 밥을 먹고 싶은지, 친구와 전화하고 싶은지, 자고 싶은지 누가 알려주지 않아도 잘 알고 있습니다. 배고플 때, 외로울 때, 피곤할 때를 굳이 누가 이야기 해주지 않아도 잘 알고 있죠. 하지만 컴퓨터는 다릅니다. 아마 매일 아침 9시, 12시, 저녁 6시에 밥을 먹기로 되어 있다면, 중간에 간식을 먹었어도 컴퓨터는 아무 생각 없이 밥을 먹게 될겁니다.
컴퓨터가 우리 일상생활에 도움을 줄 수 있는 도구가 되려면, 인간과 비슷하게 작동할 수 있게 어떤 조건에 작동을 해야 한다는 것을 명시를 해줘야 합니다.

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

우선 조건문은 조건을 비교를 하는 것이므로 그 결과 값이 항상 true 혹은 false 로 귀결된다.

let isHuman = true;
let isHuman = false;

2. 조건문에는 반드시 비교 연산자 (Comparison operator) 가 필요하다.

그 예는 아래 코드와 같다.

3 < 5 // true;
3 > 5 // false;
'Yongho' === 'Dongho' // false;

3. 비교 연산자의 종류


사진 출처 : https://www.codestates.com/

💬 헷갈리면 안되는게 앞에서 배웠듯이 = 은 할당 한다는 뜻이고 === 은 같다 라는 뜻이다.

❗ 같다 라는 뜻으로 !=, == 도 있지만 !==, === 에 비해 같다는 범위가 넓으므로 비교가 더 확실한 !==, === 연산자를 쓰는것이 좋다.

4. 조건문을 쓰는 방식

if (조건1) {
조건 1이 true 면 통과
} else if (조건2) {
// 조건 1이 true 가 아니면
// 조건 2가 통과
} else {
// 조건이 모두 통과하지 않는 경우 이 식이 통과
}

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

  1. 두 가지 조건이 모두 true 일 경우 통과시키고 싶으면

    && 연산자를 사용한다. (AND 연산자)

isKorean && isStudent; // 한국인 = true, 학생 = true 면 통과
true && true // true
true && false // false
false && false // false

  1. 두 가지 조건 중 한 가지만 true 일 경우 통과시키고 싶으면

    || 연산자를 사용한다. (OR 연산자)

isKorean || isStudent; // 한국인 = true, 학생 = false 여도 통과
                       // 한국인 = false, 학생 = true 여도 통과
true || true // true
true || false // true
false || false // false

  1. 조건을 false 로 임의로 조정하고 싶을 경우

    ! 연산자를 사용한다.

!isKorean || isStudent; // 한국인이 아니거나 학생일 경우 통과

💬 위를 응용하면 아래와 같이도 만들 수 있다.

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

6. 논리 연산자 정리

  1. AND 연산자 && 은 falsy 한 값을 만나면 그 값을 출력한다.
undefined && 10 // undfined
5 && false // false

💡 둘 다 truthy 한 값이면 뒤에 있는 값을 출력한다.

5 && 10 // 10
  1. OR 연산자 || 은 truthy 한 값을 만나면 처음 만난 truthy 값을 출력한다.
undefined || 10 // 10
5 || 10 // 5

💡 둘 다 falsy 한 값이면 뒤에 있는 값을 출력한다.

undefined || false // false

2) 문자열 다루기

문자열(string)이 무엇일까요? 네, 우리가 평소에 보던 그 책에 쓰여있는 글자를 문자열이라고 합니다. 다만 컴퓨터는, 모두 글자로 되어있는 코드를 읽어야 하기 때문에 구분하기 위해서 ' 나 " 을 사용하여 문자열을 구분합니다.
우리가 만들어야 하는 소프트웨어는 외계인이 만드는 어떤 요상한 무언가가 아니라, 여러분의 친구와 가족이 함께 공유하고 사용하여 더 나은 가치를 추구하기 소프트웨어가 되어야 하기 때문에 문자열을 잘 다룰 수 있는 방법에 대해서 충분히 이해하고 있어야 할 것입니다.

이러한 문자열을 다루기 위한 여러가지 메쏘드 (Method) 가 있는데 대표적으로 아래와 같다.

1. + 연산자

🔵 String 타입과 다른 타입 사이에 + 연산자를 쓰면, String 형식으로 변환

let str1 = 'Kim'
let str2 = 'Yongho'
let str3 = '1'
console.log(str1 + str2); // 'KimYongho
console.log(str3 + 7); // '17'

❗ 여기서 주의할 점은 변수 str3의 값이 '1' 즉, 숫자(Number)가 아닌 문자열(String) 이라는 것이다.

만약 str3 이 '1' 이 아닌 1 이라면 결과는 이렇게 바뀐다.

let str3 = 1
console.log(str3 + 1) // 2

2. .length

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

let str = 'KimYongho'
console.log(str.length); // 9

💬 마지막 원소의 인덱스 값보다 1 큰 수를 반환한다. 따라서 인덱스 값이 8이므로, + 1 을 한 9가 반환된다.
(알파벳 순서대로 단어들, 이름 등을 빠르게 찾을 수 있게 해둔 부분을 인덱스라고 부른다.
인간은 숫자를 1부터 세는 반면, 컴퓨터는 숫자를 0부터 센다.)

3. .indexOf()

🔵 특정 문자열 안 속, 찾고 싶은 문자열에 .indexOf 를 사용하면 왼쪽부터 시작해 처음으로 일치하는 인덱스(Index)를 반환, 일치하는게 없으면 -1 을 반환한다.

'Blue Whale'.indexOf('Blue'); // 0
'Blue Whale'.indexOf('blue'); // -1
'Blue Whale'.indexOf('Whale'); // 5
'Blue Whale Whale'.indexOf('Whale'); // 5
  • IE 와 같은 구형 브라우저에서 작동 불가

4. .lastIndexOf()

🔵 마지막으로 일치하는 인덱스(Index)를 반환하고 싶으면 .lastIndexOf 를 사용하면 된다.

'banana'.lastIndexOf('a'); // 5
'canal'.lastIndexOf('a'); // 3
  • IE 와 같은 구형 브라우저에서 작동 불가

5. .split()

🔵 문자열을 특정한 기준에 따라 분리한다.

let str = 'Hi My Name is Yongho'
console.log(str.split(' '))
// ["Hi", "My", "Name", "is", "Yongho"]

💬 위에서 나는 공백을 기준으로 문자열을 분리를 했다. 따라서 전달인자(arguments)에 문자열 ' ' 를 줬다.

자세히 살펴보면 따옴표에 공백이 있다. 그래서 공백을 기준으로 문자열을 나눠 최종 값을 배열에 집어 넣은 모습이다.

만약 공백이 없는 문자열 '' 의 경우 어떻게 될까?

let str = 'Yongho'
console.log(str.split(''))
// ["H", "i", " ", "M", "y", " ", "N", "a", "m", "e", " ", "i", "s", " ", "Y", "o", "n", "g", "h", "o"]

위와 같이 공백을 포함한 모든 요소를 문자열로 나눠 최종 값을 배열에 집어 넣는 모습을 볼 수 있다.

6. .substring(start, end)

🔵 * 문자열을 지정한 범위에 따라 분리한다.

let str = 'Yongho'
console.log(str.substring(0,3)); // 'Yon', (0번째부터 0,1,2 인덱스)
console.log(str.substring(3,0)); // 'Yon' (start 가 end 보다 크면 자동으로 자리를 바꾼다)
console.log(str.substring(1,4)); // 'ong' (1번째부터 1,2,3 인덱스)
console.log(str.substring(-1,4)); // 'Yong', 음수이거나 NaN 은 0으로 취급한다.
console.log(str.substring(0,1000)); // 'Yongho', index 범위를 넘은 경우 마지막 index 를 end 로 취급한다.
console.log(str.substring(3,3)); // 공백, start 와 end 가 같을 경우 공백을 출력한다.
console.log(str.substring(3)); // 'gho', (end 를 주어지지 않으면 마지막 인덱스를 end로 취급한다.)
console.log(str.substring(0)); // 'Yongho'

7. .substring 과 .slice의 차이점

❗ .substring 과 동일하게 문자열을 지정한 범위에 따라 분리한다는 면에서 공통적인 .slice 함수가 있지만 몇 가지 차이점이 있다.

.slice 함수의 특징

  1. start가 end 보다 크면 empty string 반환
  2. start가 음수이면 string의 가장 뒤에서 음수만큼 내려온 index로 취급한다.
  3. end가 음수이면 역시 string의 가장 뒤에서 음수만큼 내려온 index로 취급한다.
    (음수만큼 내려왔다는 표현이 추상적이다. 예를들어 'abcde'에서 'abcde'.slice(-3) 이면 'cde'이다.)

8. .toUpperCase() / .toLowerCase()

문자열을 모두 대문자로 바꿔주거나 소문자로 바꿔준다.

console.log('yongho'.toUpperCase()); // 'YONGHO'
console.log('YoNGHo'.toUpperCase()); // 'YONGHO'
console.log('YONGHO'.toLowerCase()); // 'yongho'
console.log('YoNGHo'.toLowerCase()); // 'yongho'

❗ 위와 같은 모든 문자열 메쏘드는 원본이 변하지 않는다. (Immutable)

8번을 예로들면 

console.log('yongho'.toUpperCase()); // 'YONGHO'

를 통해 값이 'YONGHO' 가 됐지만 원본 값인 'yongho' 는 변하지 않는다.

profile
nyongho
두 줄 소개
이전 포스트

TIL 2020-10-15 (변수, 함수)

다음 포스트

TIL 2020-10-19 (반복문, 배열)

0개의 댓글