S1 Unit 3. Javascript 기초 제어문

나현·2022년 8월 23일
JavaScriptSection_1코드스테이츠프론트엔드학습일지
0

학습일지

목록 보기
4/53
post-thumbnail

💡 이번에 배운 내용

  • Section1.
    웹 프론트엔드 개발의 기초지식을 기반으로 스스로 단순한 Web App을 만들 수 있다.
  • Unit3. Javascript 기초 제어문: 기초 제어문인 조건문과 반복문, 그리고 문자열에 대해 학습한다.

느낀점

조건문과 반복문의 개념은 크게 어려울 게 없었지만, 막상 알고리즘 문제를 풀어보니 복잡하고 그 활용이 무궁무진했다. 문제 푸는 데 시간이 오래걸렸다.
문자열은 은근 메서드가 많아 확실하게 공부하는데에 시간이 좀 걸렸다.
차근차근 돌다리도 두들기며 공부한 결과 알고리즘 문제를 푸는 데 큰 도움이 되었다.
그리고 이번 기외에 템플릿 리터럴을 처음 써봤는데 이렇게나 편할 수가 없다!

이번에 공부한 내용도 잘 복습하고 마무리해 나의 실력을 Up하는데 잘 쓸 예정이다.😀

키워드

조건문, 비교 연산자, 논리 연산자, falsy, indexOf(), split(), substring(), slice(), for문, while문, 반복문

학습내용

Ch1. 조건문

조건문을 이해하기 위해서는 먼저 Boolean 타입에 대한 이해가 필요하다.
boolean타입에는 true, false 두 가지가 필요하다.

조건문이란

어떠한 조건을 판별하는 기준을 만드는 것이다.
조건문에는 반드시 비교 연산자가 필요하다.
비교의 결과는 늘 true 또는 false이다.

비교 연산자

기호><>=<====!==
의미초과미만이상이하같다다르다

조건문 사용하기

조건문은 아래와 같이 사용한다.

if(조건1){
  //조건1이 true일 경우 실행
}else if(조건2){
  //조건1은 false이고
  //조건2가 true일 경우 실행
}else{
  //조건1이 false이고
  //조건2도 false일 경우 실행
}

논리 연산자

조건이 동시에 2가지 이상일 때 사용한다.

  • 논리 연산자의 종류
    • A 또는 B → A || B
    • A 그리고 B → A && B
    • A가 아니다 → !A
  • 논리 연산자 OR (A 또는 B)
    • true || true → 결과는 true
    • true || false → 결과는 true
    • false || false → 결과는 false
  • 논리 연산자 AND (A 그리고 B)
    • true && true → 결과는 true
    • true && false → 결과는 false
    • false && false → 결과는 false
  • 논리 연산자 NOT (A가 아니다)
    • !true → false
    • !(4<1) → true

truthy와 falsy

  • truthy: 논리값은 아니지만 비교시 참과 같은 값으로 취급되는 것을 뜻한다.
    ex. 문자열은 truthy한 값이다.
  • falsy: 논리값은 아니지만 비교시 거짓과 같은 값으로 취급되는 것을 뜻한다.
    ex. null, undefined는 falsy한 값이다.

비교 연산자와 논리 연산자의 활용

아래 값들의 결과는 어떻게 될까?
개발자도구에서 직접 해보자.

  • !undefined → true
    (undefined는 falsy한 값으로 반전시키면 true가 된다.)
  • !'Hello' → false
    (모든 문자열은 truthy한 값으로 반전시키면 falsy가 된다.)
  • !NaN → true
    (NaN은 falsy한 값으로 반전시키면 true가 된다.)

그럼 아래 비교 연산의 결과는 어떻게 될까?

  • null===null → true
  • undefined===undefined → true
  • NaN===NaN → false (이유는 질문해보기, 코딩노트 참조)

기억해야할 6가지 falsy값

false, null, undefined, 0, NaN, ''(빈 문자열)
은 조건문 사용시 결과가 false가 나온다.

if('') //false
if(NaN) //false
if(0) //false

Ch2. 문자열 (매우 중요)

문자열은 ''나 ""로 감싼 타입 중 하나로 string이다.
문자 하나는 character라고 하며 줄여서 char라고 하기도 한다.

immutable과 mutable

원본값을 재료로 변형하는 메서드 중에는 바뀐 값을 원본값에 적용하는 경우와 원본값의 복사본을 변형하여 반환하는 경우가 있다.

  • immutable: 원본이 변하지 않는다.
  • mutable : 원본이 변한다.

앞으로 javascript를 공부할 때 해당내용을 체크해가면서 공부할 예정이다.

기본 사용법

  • str[index] : 접근은 가능하나, 재할당이 안된다.
  • 문자열 연결:
    • + 연산자를 사용해 연결:
      '안녕'+'하세요' //'안녕하세요'
      '안녕'+1 // '안녕1'
    • str1.concat(str2,str3...) : str1에 str2, str3... 을 차례로 연결한다.

문자열 길이

length를 사용하여 구할 수 있다: 

let str='hello';
console.log(str.length); //5

메서드

str을 예시로 알아본다. 알아보기에 앞서
.으로 시작하는 건: 메서드
()안에 들어가는 건 전달인자 : arguments
실행 결과는 : return value
참고로 string메서드는 모두 immutable이다.

  • str.indexOf(찾고자하는 문자열)

    • return value :
      찾고자하는 문자열이 있을 경우 시작 index값을 반환한다.
      index는 0부터 시작한다.(5번째 자리는 index로 4)
      찾는 문자열이 없다면 -1을 반환한다.
    • 비슷한 것으로 lastIndexOf()는 뒤에서부터 찾는다.

  • str.includes(찾고자하는 문자열)

    • return value :
      찾고자 하는 문자열이 있을 경우 true를,
      없으면 false를 반환한다.

  • str.split(분리 기준이 될 문자열) ★

    • return value :
      분리된 문자열이 배열 형태로 반환된다.
      만약 문자열을 .split('')(공백이 없는 따옴표 묶음)을 기준으로 나누면 모든 글자가 한 글씩 배열에 저장된다.
    • split메서드를 이용하면 csv(comma-separated values. 몇 가지 필드를 쉼표(,)로 구분한 텍스트 데이터 및 텍스트 파일)형식의 데이터를 처리할 수 있다.
      let csv=`이름,생년,월,일,국어 점수,영어 점수,수학 점수
홍길동,1992,7,17,100,90,70
희동이,1992,4,3,90,100,100` // ``(백틱)을 사용해 감쌌다.
let lines=csv.split('\n'); //\n은 줄바꿈 기호를 뜻한다.
console.log(lines[0]); //'이름,생년,월,일,국어 점수,영어 점수,수학 점수'
let lines1Data=lines.split(',');
console.log(lines1Data); //['이름', '생년', '월', '일', '국어 점수', '영어 점수', '수학 점수']
console.log(lines1Data[0]); // '이름'

  • str.substring(시작index, 끝 index)

    • return value :
      시작과 끝 index 사이의 문자열을 반환한다.
      하지만 시작 index의 값은 포함하고, 끝 index의 값은 포함하지 않는다.
      끝 index는 생략이 가능하며 이때는 시작index부터 마지막까지 가져온다.
      index값이 문자열의 길이를 초과하면 마지막 index로 간주한다.
      음수는 0으로 취급한다.

  • str.slice(시작index, 끝 index)

    • return value :
      substring과 사용법은 같지만
      음수는 0이 아니라 뒤에서부터의 순서로 간주한다.
      그 외에도 몇가지 차이점이 있다.

  • str.toLowerCase(), str.toUpperCase()
    따로 전달인자 없이 사용하며 각각 소문자, 대문자로 변환하여 반환한다.

  • str.trim()
    따로 전달인자 없이 사용하며 양끝(가운데 제외)의 공백을 제거한다.

특수문자

문자뜻
\nNew line(줄 바꿈)
\rCarriage return(줄바꿈, 다음 줄의 맨 앞)
\tTab

자세한 내용과 출처: javascript MDN - 문법과 자료형

템플릿 리터럴 (Template literals)

템플릿 리터럴은 내장된 표현식을 사용할 수 있는 문자열 리터럴이다.
사용시 백틱(₩₩)으로 감싸 사용하며 플레이스홀더(${}, 중괄호 안에 표현식을 넣는다)로 표현식을 사용할 수 있다.

이랬던 식을

let num1=4, num2=6;
let str=num1+'곱하기 '+num2+'의 곱은 '+(num1*num2)+'입니다.'
console.log(str); //4곱하기 6의 곱은 24입니다.

이렇게 사용할 수 있다.

let num1=4, num2=6;
let str=₩${num1}곱하기 ${num2}의 곱은 ${num1*num2}입니다.₩
console.log(str); //4곱하기 6의 곱은 24입니다.

자세한 내용과 출처: javascript MDN - template literals

그 외 기타내용

정규표현식, match() 등의 이와 관련된 메서드들은 추후에 더 자세히 공부할 예정이다.

Ch3. 반복문

반복문은 이름 그대로 코드를 여러 번 반복시키는 구문이다.

for 문

()안에 초기화, 조건식, 증감문을 넣고 {}안에 반복할 구문을 입력한다.

let sum=0;

//for문
for(let i=1; i<11; i=i+1){ //(초기화; 조건식; 증감문)
	sum=sum+i; //반복할 구문
}
console.log(sum); //55

while 문

()안에 조건식을 넣고, {}안에는 증감문을 넣는다. 초기화는 범위 바깥에 미리 설정한다.
while문은 조건식이 true일 동안 실행된다.

let sum=0;
let i=1; //초기화

//while문
while(i<11){ //(조건식)
	sum=sum+i;
  	i=i+1; //증감문
}
console.log(sum); //55

break문

반복되는 코드블록에서 나와야 할 때 사용한다.

let str;
for(let i=1;i<10;i++){
	if(i===4){
    	str='4를 찾았다!';
      	break; //반복되는 영역을 나와 탈출!
    }
}

질문해보기

1. NaN===NaN은 왜 false일까?
NaN은 다른 모든 값과 비교했을 때 같지 않으며, 다른 NaN과도 같지 않기 때문이다.
만약 NaN의 값이 맞는지 아닌지 판별하기 위해서는 isNaN()을 사용해야 한다.
* 출처: javscript MDN 참조

2. substring VS slice (둘의 차이점은?)

  • start > end인 경우:
    • substring은 자동으로 작은 수, 큰 수 사이의 값을 구한다.
    • slice는 빈 값이 출력된다.
  • start나 end가 음수인 경우:
    • substring은 0으로 간주한다.
    • slice는 전체길이에 음수값을 더해 출력한다.

아래의 예제를 보자!

let str='Hello World!';

console.log(str.length); //12
console.log('start>end인 경우 substring', str.substring(6,2)); //'llo'
console.log('start>end인 경우 slice', str.slice(6,2)); //''
console.log('start가 음수인 경우 substring', str.substring(-2, 7)); //'Hello W'
console.log('start가 음수인 경우 slice', str.slice(-2, 7)); //''
console.log('end가 음수인 경우 substring', str.substring(0, -4)); //''
console.log('end가 음수인 경우 substring', str.slice(0, -4)); //'Hello Wo'

참고 및 출처: 링크

3. for문과 while문의 차이는?
while문과 for문에 큰 차이는 없다. 다만
1. 초기화가 필요없고 증감문이 필요없을 때 주로 while문을 사용한다.
2. 반복횟수가 명확할 때 for문을, 반복횟수가 명확하지 않을 때는 while문을 쓰는 편이다.

4. join() 이 무엇인지? (추가공부)
배열의 모든 요소들을 연결해 하나의 문자열로 만든다.
()안에 생략할 경우 각 요소들을 쉼표(,)로 연결하고,
()안에 넣은 문자열을 기준으로 요소들을 연결한다.
만약 join('')로 실행하면 모든문자들이 붙여서 출력된다.

출처: javascript MDN - join()

profile
나현
프론트엔드 개발자 NH입니다. 시리즈로 보시면 더 쉽게 여러 글들을 볼 수 있습니다!
이전 포스트

S1 Unit 2. Javascript 기초

다음 포스트

S1 Unit 4. HTML

0개의 댓글