코드스테이츠 프론트엔드 과정 3일차 - JavaScript

오렌지·2022년 5월 4일

Chapter 1. 조건문

조건문에서 사용되는 연산자

논리 연산자

  • AND 연산자 : &&
    두 조건이 모두 truthy 해야만 true, 그렇지 않으면 false가 출력된다.
  • OR 연산자 : ||
    두 조건 중 하나라도 truthy한 값일 경우 true, 그렇지 않으면 false가 출력된다.
  • NOT 연산자 : 앞에 ! 붙이기
    결과가 true이면 false를, false이면 true를 반환한다. 2개 이상을 중첩하는 것도 가능하다.

비교 연산자

  • ===, !==
    한 값이 다른 값과 같거나 다른지 판단 한다.
  • <, >
    한 값이 다른 값보다 작은지 큰지 판단 한다.
  • <=, >=
    한 값이 다른 값보다 작거나 같은지, 크거나 같은지 판단 한다.

If - else 문

if (조건) {
  만약 조건(condition)이 참일 경우 실행할 코드
} else {
  대신 실행할 다른 코드
}
function isOldEnoughToDrink(age) {
  if(age >= 18) {
    return true;
  } else {
    return false;
  }
}

else - if 문

function isGreaterThan(num1, num2) {
  if(num1 < num2) {
    return true;
  } else if(num1 === num2) {
    return false;
  } else {
    return false;
  }
}

If문의 중첩

function isEitherEvenAndLessThan9(num1, num2) {
  // 적어도 하나의 수는 짝수
  // 두 수 모두 9보다 작음
  // 두가지 조건 모두 true
  if(num1 < 9 && num2 < 9) {
    if(num1 % 2 === 0 || num2 % 2 === 0) {
      return true;
    } 
    return false;
    }
    return false;
}

거짓으로 취급하는 값(falsy 값)

1) false
2) undefined
3) null
4) 0
5) NaN
6) the empty string ("")

Chapter 2. 문자열

str[index]

  • 0번째부터 해당 글자 값을 찾아준다. 단 index로 접근은 가능하지만 값을 변경하지는 못함(read-only)
var str = 'CodeStates';
console.log(str[0]); // 'C'
console.log(str[4]); // 's'
console.log(str[10]); // undefined
    • 연산자를 쓸 수 있음. String + String 은 String 형식으로 변환함. str1.concat(str2, str3...); 의 형태로도 가능
var str1 = 'Code';
var str2 = "States";
var str3 = '1';
console.log(str1 + str2); // 'CodeStates'
console.log(str3 + 7); // '17'

.length

문자열의 전체 길이를 리턴함

let str = 'code states';

console.log(str.length) // 11

str.indexOf()

문자열 내에 지정된 요소가 위치하고 있는 첫 번째 인덱스를 리턴함. 지정된 요소가 문자열 내에 존재하지 않을 경우 -1을 리턴함.
arguments : 찾고자 하는 문자열
return value : 처음으로 일치하는 index, 찾고자 하는 문자열이 없으면 -1
lastIndexOf는 문자열 뒤에서 부터 찾음

let str = 'code states'

console.log(str.indexOf('s')) // 5
console.log(str.indexOf('i')) // -1

str.substring(start, end)

substring() 함수는 첫 번째 인자로 전달된 startIndex부터 시작하여 두 번째 인자로 전달된 endIndex앞까지의 문자열을 리턴해주는 함수.

var Sample = "Hello World"
var result_substring = Sample.substring(0, 5);
var result_substr = Sample.substr(6,5);

document.write(result_substring); // "Hello"
document.write(result_substr); // "World"

str.split()

문자열을 지정한 구분자를 이용하여 여러 개의 문자열로 나눈 후 배열의 형태로 리턴함.
arguments : 분리 기준이 될 문자열
return value : 분리된 문자열이 포함된 배열

let str = '사과, 바나나, 오렌지, 배, 감, 딸기';

let word = str.split(', ');
console.log(word); // ['사과', '바나나', '오렌지', '배', '감', '딸기']
let alphabet = 'abcdefghijk';

let char = alphabet.split('');
console.log(char) // 
['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k']

str.slice(잘라올 첫 위치값, 잘라올 마지막 위치값)

var str = "Apple, Banana, Kiwi, Pear, Peach";
var result = str.slice(7, 13);
document.write(result); // Banana

str.concat("합칠 문자열")

concat() 함수는 인자로 넘기는 문자열을 기존 문자열 뒤에 합치는 함수이다.

var Sample1 = "Hello"
var Sample2 = "World";

document.write(Sample1.concat(Sample2)); // "HelloWorld"

str.trim()

trim() 함수는 문자열을 양쪽 끝에 공백을 제거해주는 함수이다.

var Sample = " Hello "

document.write(Sample.trim()); // "HelloWorld"

toUpperCase()

소문자 -> 대문자

let alphabet = 'abcdefghijklmnopqrstuvwxyz';

console.log(alphabet.toUpperCase()); // ABCDEFGHIJKLMNOPQRSTUVWXYZ

toLowerCase()

대문자 -> 소문자

let alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

console.log(alphabet.toLowerCase()) // abcdefghijklmnopqrstuvwxyz
  • Immutable이란?
    모든 string method는 immutable 즉, 원본이 변하지 않음.
    나중에 배울 array method에서는 immutable과 mutable의 여부를 잘 확인해야함.
profile
UI/UX 디자이너 취준생

0개의 댓글