김피치
마치 흘러가는 바람처럼
김피치
전체 방문자
오늘
어제
  • 분류 전체보기 (17)
    • SEB FE 42_TIL (16)
    • 학습 정보 (0)
    • etc (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • URI
  • Open API
  • React
  • 자바스크립트
  • REST API
  • 코딩
  • 선언키워드
  • js
  • jsx
  • JavaScript
  • http

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
김피치

마치 흘러가는 바람처럼

SEB FE 42_TIL

221025 #003 조건문, 문자열

2022. 10. 25. 01:48

1. 오늘 코플릿을 풀면서 느낀 점

초반부에는 조건문과 문자열의 기본적인 연산자나 메서드 등이 숙지되어 있지 않은 상태여서 쉽게 솔루션을 생각해내기 어려웠다. 그래서 머리를 싸매느라 시간이 제법 걸려서 이번 코플릿 문제들이 완전 쉬웠다고는 못하겠다.
그렇지만 파트너와 함께 모르는 문제를 고민하면서 서로 문법 실수나 오타 등 자잘하게 놓치기 쉬운 실수도 발견하기도 하고 내가 생각하지도 못한 관점에서 문제를 볼 수 있다는 점은 좋았다!
그리고 몇몇 문제에서도 느꼈지만 코딩 초보로서 초반에 메서드나 객체의 대소문자, ( )괄호 안에 매개변수가 들어가는지, 메서드의 immutable 여부 등등을 제대로 기억해둬야 나중에 틀린 부분 찾느라 고생하지 않을 것 같다는 점!! 제대로 숙지해야겠다.
 
 
 

2. 오늘 배운 내용

Ch 1. 조건문 (Conditional)

- 조건문 : 어떤 조건을 판별하는 "기준"을 만드는 것, Conditional expression

- 비교연산자

  * 비교결과는 늘 Boolean 으로 반환된다.

  cf) ==를 쓰면 안되는 이유? (+ != 도) : 인자의 타입을 엄격하게 비교하지 않기 때문

1 == '1' // true
1 == true // true
null == undefined // true

- 조건문의 형태:

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

  * else if 는 여러 개 중첩이 가능하다.

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

- 두 가지 조건이 한 번에 적용된다면 -> 논리 연산자 (logical operator) 사용

isStudent // 학생인 경우 true
isFemale // 여성인 경우 true
isStudent && isFemale ; // 학생이면서, 여성일 때 통과 - AND 연산자: 동시에 두 가지 조건 다 만족해야(truthy) true.
isStudent || isFemale ; // 학생이거나, 여성일 때 통과 - OR 연산자: 두 가지 조건 중 하나만 만족시켜도 통과
!isStudent && isFemale ; // 학생이 아니면서, 여성일 때 통과 - NOT 연산자: !는 truthy, falsy 여부를 반전시킨다

!undefined // True - undefined는 falsy
!'Hello' // False - 'Hello'(문자열)는 truthy

- 나머지 연산자 (remainder operator): %

  * 짝수 (even number) 를 판별할 때 사용할 수 있다.

function isEvenNumber (num){
    if (num % 2 === 0){
    return true} 
else {return false}
}
console.log(isEvenNumber(256)) // true
console.log(isEvenNumber(13)) // false

 - 기억해야 할 Falsy 값

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

1. if (false)

2. if (null)

3. if (undefined)

4. if (0)

5. if (NaN)

6. if (" ")

 

 

 

Ch 2. 문자열 (String)

- str[index]

 * n번째에 있는 문자를 가져온다. 

    ex. ABCDEF

          0 1 2 3 4 5

        str[0] // 'A'

        str[4] // 'E'

  * 접근은 가능하나 쓸 수는 (바꿀 수는) 없음 (read-only): 문자열은 새로 할당하지 않는 한 바뀌지 않는다.

 

- + 연산자 (concatenating strings)

  * string 타입과 다른 타입 연결 시 string 형식으로 변환 ( cf) word.toString(), String(word) )

let str3 = '1';
str3 + 7 ; // '17'

  * strl.concat(str2, str3, ...) 과 같은 형태의 메서드도 존재

 

- 문자열 길이 세기(str.length)

let str = 'Hello' ;
str.length ; // 5

 

- str.indexOf(searchValue)

  * 찾고자 하는 문자열이 몇 번째부터 나오는지 알려줌 (여러 번 등장 시 처음 등장하는 순서)

'Blue Whale'.indexOf('Blue'); // 0
'Blue Whale'.indexOf('blue'); // -1 : 찾고자 하는 문자열이 존재하지 않는 경우
'Blue Whale Whale'.indexOf('Whale'); // 5

  * lastIndexOf 는 뒤에서부터 카운트한다.

 

- str.split(seperator)

  * 인자: 분리 기준이 될 문자열

  * return value: 분리된 문자열 포함 배열

  * csv 형식 처리에 유용

   cf) csv: comma seperated value

         줄바꿈 시 csv.split(`\n`)

 

- str.substring(start, end)

  * 인자: 시작 index, 끝 index

  * return value: 시작과 끝 Index 사이의 문자열

let str - 'abcdefghij'
str.substring(0,3) ; // 'abc'
str.substring(3,0) ; // 'abc'
str.substring(1,4) ; // 'bcd'
str.substring(-1,3) ; // 'abcd' : 음수는 0 취급
str.substring(0,22) ; // 'abcdefghij' : index 범위 내 까지의 문자열 출력

  cf) str.slice

 

- str.toLowerCase() / str.toUpperCase()

  * 문자열을 전체 소문자로 / 대문자로 변경

  * immutable : 원본이 바뀌지는 않음. 모든 str. method는 immutable

    <-> muttable

 

 

cf) 나중에 찾아볼 것

- trim

- 공백 문자 : 탭 문자 (\t), carriage return (\r \n), return 문자 (\n)

- match

- replace

- 정규표현식

'SEB FE 42_TIL' 카테고리의 다른 글

[JavaScript] Koans를 풀며 배운 것들 정리  (0) 2022.11.09
[JavaScript] 원시자료형과 참조자료형  (0) 2022.11.07
221031 HTML + CSS 계산기 목업  (0) 2022.10.31
221021 #002 Typeof 연산자  (0) 2022.10.21
221020 #001 오리엔테이션  (0) 2022.10.21
    'SEB FE 42_TIL' 카테고리의 다른 글
    • [JavaScript] 원시자료형과 참조자료형
    • 221031 HTML + CSS 계산기 목업
    • 221021 #002 Typeof 연산자
    • 221020 #001 오리엔테이션
    김피치
    김피치
    네? 제가 체크남방 도전중으로 보이시나요?

    티스토리툴바