D+3 / [JavaScript] 기초제어문 - 조건문, 문자열

김서연·2022년 6월 27일
0

프론트엔드

목록 보기
4/12

* 조건문

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

  • 비교연산자 : > 초과, < 미만, >= 이상, <= 이하, === 같다, !== 다르다.
    3 > 5; // false
    9 < 10 // true
    'hello' === 'world'; // false
    => 비교의 결과는 늘 Boolean, 즉 true 또는 false이다.
    • ==, != 연산자는 있는데, 타입을 엄격하게 비교하지 못하기 떄문에 사용하지 않는게 좋다.
      1 === 1 // true
      1 === '1' // false - 타입이 다르기 때문이다
      1 == '1' // true
      1 == true // true
      null == undefined // true
  • 조건문 사용 , 조건에는 Boolean으로 결과가 나오는 비교구문이 들어간다.
    if (조건1) {
    // 조건1이 통과할 경우
    }else if (조건2) {
    // 조건1이 통과하지 않고
    // 조건2가 통과할 경우
    }else {
    // 모든조건이 통과하지 않는경우
    }
    • 두가지 조건이 한번에 적용되는경우는 논리 연산자(Logical Operator)를 사용 :
      &&(AND 연산자) : 둘다 true일때만 true. ex)true && true // true, true && false // false
      || (OR 연산자) : 둘중 하나만 true일때 true. ex)true || false // true
      ! (NOT연산자) : truthy, falsy 여부를 반전시킨다. ex) !false // true, !undefined // true, !'hello' // false(비어있지 않은 문자열은 기본적으로 true이다.)
  • 기억해야할 6가지 falsy 값 ( if문에서 false로 변환되므로, if 구문이 실행되지 않는다.)
    if (false) , if (null), if (undefined), if (0), if (NaN), if ('')-빈 문자열
  • 실습
     > 숫자의 비교
        let age = 25;
        console.log(19 < age) // true
        let age = 17;
        console.log(19 < age) // false
      > 문자열의 비교
        console.log('hello' === 'world') // false
        console.log('hello' !== 'world') // true
      > 숫자와 문자열의 비교
        let str = '100';
        let num = 100;
        console.log( str === num); //false
      > AND 연산자
        console.log(false && true) // false
        console.log(false && false) // false
      > OR 연산자
        console.log(false || true) // true 
        console.log(false || false) // false
      > NOT 연산자
        console.log(!true) // false
        console.log(!false) // true
        

* 문자열

  • 문자열은 index로 접근은 가능하지만 값을 바꿀수는 없다(read-only)
     var str = 'codestates';
      console.log(str[0]); // c
      console.log(str[4]); // s
      console.log(str[10]); // undefined
      str[0] = 'G';
      console.log(str) // 'codestates'가 나오지 , 'Godestates'가 안나옴
  • +연산자 사용가능 : string타입과 다른타입 사이에 +연산자를 쓰면 string형식으로 변환
     var str1 = 'code';
      var str2 = 'states';
      var str3 = '6';
      console.log(str1 + str2); // 'codestates'
      console.log(1 + str2); // '1states'
      console.log(1 + str3); // '16'
  • length 프로퍼티(property) : 문자열의 전체 길이를 반환한다
     var str = 'codestates';
      console.log(str.length); // 10
  • method
     > str.indexOf(searchValue-찾고자하는 문자열)
       argument : 찾고자 하는 문자열
       return value : 처음으로 일치하는 index, 찾고자 하는 문자열이 없으면 -1 // .indexOf 실행했을때 나오는 값
       lastIndexOf는 문자열 뒤에서부터 찾음
       'Blue whale'.indexOf('Blue'); // 0 -찾는 문자열이 어떤 인덱스에 있는지 가져옴(0번쨰 index부터 존재하니까)
       'Blue whale'.indexOf('blue'); // -1 -찾는 문자열이 없어서
       'Blue whale'.indexOf('whale'); // 5 -찾는 문자열이 어떤 인덱스에 있는지 가져옴(0번쨰 index부터 존재하니까)
       'Blue whale whale'.indexOf('whale'); // 5 -만약 찾는 문자열이 중복되면 처음으로 일치하는 인덱스 위치로
       
       'Blue whale'.includes('whale'); //true - 찾는 문자열이 없으면 false
       'canal'.lastIndexOf('a') // 3 - 뒤에서 첫번째인 a의 인덱스 위치는 3임
     > str.split(seperator)
       argument : 분리 기준이 될 문자열
       return value : 분리된 문자열이 포함된 배열
       var str = 'Hello from the other side';
       console.log(str.split(' '));  //공백을 이용해 잘라내어 ['Hello', 'from', 'the', 'other', 'side']
        % csv형식 을 처리할 때 유용,, 파싱하기에 적합 -> csv 참고 https://ko.wikipedia.org/wiki/CSV_(%ED%8C%8C%EC%9D%BC_%ED%98%95%EC%8B%9D) 
        %% 파싱(parsing) : 어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는것을 말한다.
          ex) let dsw = `연도,제조사,모델,설명,가격
           1997,Ford,E350,"ac, abs, moon",3000.00
           1999,Chevy,"Venture ""Extended Edition""","",4900.00
           1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00
           1996,Jeep,Grand Cherokee,"MUST SELL!air, moon roof, loaded",4799.00` // undefined
           - dsw.split('\n') 줄바꿈으로 한줄씩 분석가능
            // (5) ['연도,제조사,모델,설명,가격', '1997,Ford,E350,"ac, abs, moon",3000.00', '1999,Chevy,"Venture ""Extended Edition""","",4900.00', '1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00', '1996,Jeep,Grand Cherokee,"MUST SELL!air, moon roof, loaded",4799.00']
           - dsw.split(',')
            // (26) ['연도', '제조사', '모델', '설명', '가격\n1997', 'Ford', 'E350', '"ac', ' abs', ' moon"', '3000.00\n1999', 'Chevy', '"Venture ""Extended Edition"""', '""', '4900.00\n1999', 'Chevy', '"Venture ""Extended Edition', ' Very Large"""', '', '5000.00\n1996', 'Jeep', 'Grand Cherokee', '"MUST SELL!air', ' moon roof', ' loaded"', '4799.00']
           let lines = dsw.split('\n')
           lines[0] // '연도,제조사,모델,설명,가격'
           lines[0].split(',') // (5) ['연도', '제조사', '모델', '설명', '가격']
     > str.substring(start, end) + .slice 와 비슷(동일한건 아님)
        argument : 시작 index, 끝 index (순서 바뀌어도됨)
        return value : 시작과 끝 index사이의 문자열 
        var str = 'abcdefghij';
        console.log(str.substring(0,3)); // 'abc' ->3인덱스의 앞까지만 나옴 'd'가 str[3]이긴 하지만,앞까지만임
        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, 23)); // 'abcdefghij' 범위초과시 마지막까지만 나옴
     > str.toLowercase() /str.toUppercase() ***IMMUTABLE -원본이 변하지 않음 ***  string의 method는 모두 IMMUTABLE( 이뮤터블한 값을 바꾸고 싶으면 새로 대입해야함)<-> 반대말은 mutable ( array method는 IMMUTABLE, mutable여부를 잘 기억해야 함!!)
        argument : 없음
        return value : 대, 소문자로 변환된 문자열
        console.log('ALPHABET'.toLowerCase())' // 'alphabet'
        console.log('alphabet'.toUpperCase())' // 'ALPHABET'
        ex) let word = 'hello';
            word.toUpperCase() // 'HELLO'...여기서! 그럼 word는 대문자 HELLO냐, 소문자 hello냐..
            word // 'hello' 로 소문자가 나옴!!
  • 혼자 알아볼거!
    = trim
    = 공백문자 : 탭문자(\t), caffige return(\r\n) 및 return문자(\n)
    = match(advanced)
    = 정규 표현식(advanced)


연습문제 ___

Self Feedback

  • 오늘 만난 pair와는 저녁 8시가 넘어서야 모든 문제를 풀수 있었다.
    js를 전혀 배우지 않으셔서 그런지 초반에 문제자체에 적응하는게 어려워 보여 이해하는데 도움을 드리느라 시간이 많이 지나게 되었다.
    나도 초보인지라.. 남을 알려주는데 부담스러웠지만 알려드리며 용어 정리가 되고 다시한번 복습하게 되는 효과가 있었다. 정신으로 매우 힘들었지만 대충들으시는 분이 아니라 덩달아 열심히 하게되어 오히려 힘도 얻은 부분이 있다. 페어를 위한거라고 설명해줬는데 불편하진 않았을지..걱정이 된다. 좀 더 페어가 싫어하진 않는지 분위기, 표정 살펴서 잘하고싶다 ㅠ
    문제가 간단한데 어렵게 생각하고 접근해서 조건문이 괴기해 지는 경우도 있었지만..ㅎ
    레퍼런스를 보면 아 .. 이렇게 해야 더 간결하고 깔끔하게 쓸수 있구나, 해서 내것으로 남기기 위해서 연습문제 일부중에 감명깊었던 부분을 꾸준히 블로그에 기록해보고자 한다..
    강의 듣고, 페어랑 문제풀고, 블로그 쓰고하면 하루가 다 간다.. 6개월 동안 매일 꾸준하게 유지할수 있도록 지치지 않게 부트캠프를 즐기고 싶다.

Q&A

  • 17번 : 사용자의 이름과 미접속 시간(분)을 입력받아 조건별로 다른 메세지를 리턴해야한다

    function makeLastSeenMsg(name, period) {
    let num1 = parseInt(period)
    if( //....
    }else if(1 <= (num1/1440) && (num1/1440) < 31){ ....//
    -> 마지막 조건 부분이 해결되지 않았는데, 원래는 ' 1 <= (num1/1440)< 31 '이렇게 써서 안됬었다. 부등호 조건 전체가 or이 적용되는지, and인지 확인할수 없어서 조건 제대로 만족 할수 없기때문에 생각한데로 나오지 않는다

profile
프론트엔드 엔지니어로 성장

0개의 댓글