[U1S3] JavaScript 기초 제어문

 

1. 조건문

---

조건문이란? 어떤 조건을 판별하는 기준을 만드는 것으로, 반드시 비교 연산자 또는 논리 연산자가 필요하다.

 

✏️ 비교 연산자

비교 연산자는 피연산자를 서로 비교하고, 비교 결과가 참인지 거짓인지에 따라 논리값인 true 또는 false를 반환한다.

피연산자로는 Number, String, Boolean, 객체 값을 사용할 수 있다.

 

• 비교 연산자의 종류
  - 동등 (==)
  - 부등 (!=)
  - 일치 (===)
  - 불일치 (!==)
  - 큼 (>)
  - 크거나 같음 (>=)
  - 작음 (<)
  - 작거나 같음 (<=)

 

📌 비교 연산자 사용시 주의사항 📌 동등(==)과 부등(!=)은 예외 케이스가 많기 때문에 사용을 자제하는 것이 좋다. 참고 사이트 👉🏻 JS Comparison Table

 

✏️ 논리 연산자

논리 연산자는 Boolean 값을 함께 사용해서 Boolean 값을 반환하는 연산자이다.

 

• 논리 연산자의 종류
  - AND (&&) : 2가지 조건이 모두 참일 때는 true, 그 외에는 false를 반환한다
  - OR (||) : 2가지 조건 중 하나만 참이어도 true, 그 외에는 false를 반환한다.
  - NOT (!) : truthy한 값은 false로, falsy한 값은 true로 반환한다.

/* AND 연산자 */
true && true; // true
true && false; // false
false && false; // false


/* OR 연산자 */
true || true; // true
true || false; // true
false || false; // false


/* NOT 연산자 */
!true; // false
!false; // true
!undefined; // true
!'today'; // false

 

📌 truthy한 값과 falsy한 값📌 참 같은 값(truthy)은 Boolean을 기대하는 문맥에서 true로 평가되는 값, 거짓 같은 값(falsy)은 Boolean을 기대하는 문맥에서 false로 평가되는 값을 말한다. falsy한 값 6개(false, null, undefined, 0, NaN, ' ')를 제외하고는 전부 truthy한 값으로 취급한다.

 

✏️ 조건문의 표현식

• if문

if (조건 1) {
 // 조건 1이 통과할 경우
 } else if (조건 2) {
 // 조건 1이 통과하지 않고
 // 조건 2가 통과할 경우
 } else {
 // 모든 조건이 통과하지 않을 경우
 }

if (20220823 < 20220824) {
    return '오늘은 2022년 8월 23일이네요!';
} else
    return '오늘은 2022년 8월 24일이네요!';

 

 

2. 문자열

---

문자열이란? 작은 따옴표(') 또는 큰 따옴표(")로 감싸진 값

 

문자열 내에 또 작은 따옴표나 큰 따옴표를 사용할 경우 에러가 발생하므로 이스케이프 표기법(\', \")을 사용한다.

let poem = '별을 '노래하는' 마음으로';
// Uncaught SyntaxError: Unexpected identifier

let poem = '별을 \'노래하는\' 마음으로';
console.log(poem);
// expected output: 별을 '노래하는' 마음으로

 

문자열은 인덱스로 접근은 가능하지만 새로 쓸 수는 없다.

var poem = '별을 노래하는 마음으로';

console.log([0]); // '별'
console.log([4]); // '래'
console.log([14]); // undefined

poem[0] = '달'
console.log(poem); // '별을 노래하는 마음으로' not '달을 노래하는 마음으로'

 

문자열은 + 연산자를 사용해 서로 연결할 수 있고 String과 다른 타입 사이에 + 연산자가 사용되면 String 타입으로 변환돼 연결된다.

var poem1 = '별을 노래하는 마음으로 '
var poem2 = '모든 죽어가는 것을 사랑해야지 '
var poetry = '윤동주 '

console.log(poem1 + poem2); // '별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지 '
console.log(poetry + 1941); // '윤동주 1941'

poem1.concat(poem2, poetry); // '별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지 윤동주'

 

✏️ 속성 (property)

객체 내부에 있는 값을 '속성'이라고 한다.

• 문자열 길이 : String.length

var city = 'incheon';
console.log(city.length); // 7

 

✏️ 메소드 (method)

속성 중 자료형이 함수인 것을 '메소드'라고 한다. 모든 String 메소드는 원본이 변하지 않는 immutable한 함수이다.

 

• 문자열 접근
  - String.indexOf() : 찾고자 하는 문자열이 처음으로 일치하는 인덱스 값을 Number 타입으로 반환한다.
  - String.lastIndexOf() : 찾고자 하는 문자열을 뒤에서부터 탐색해 처음으로 일치하는 인덱스 값을 Number 타입으로 반환한다.
  - String.includes() : 찾고자 하는 문자열이 포함 되어있는지 사실 여부를 Boolean 타입으로 반환한다.

let city = 'inchoen';

// indexOf()
city.indexOf('in'); // 0
city.indexOf(); // -1 아무 값도 지정하지 않을 경우 -1 반환
city.indexOf('n') // 1

// lastIndexOf()
city.lastIndexOf('n') // 6

// includes()
city.includes('cheon') // true
city.includes('seoul') // false

 

• 문자열 반환
  - String.charAt() : 전달 받은 위치에 있는 인덱스 값을 String 타입으로 반환한다.

let city = 'incheon';

city.charAt(4); // 'e'
city.charAt(10); // '' 전달받은 인덱스가 문자열 길이보다 클 경우 빈 문자열을 반환한다.

 

• 문자열 분리
  - String.split() : 전달 받은 문자열을 기준으로 문자열을 나눈 뒤, Array 타입으로 반환한다.

let city = 'incheon, seoul, jeonju';

city.split(', '); // ['incheon', 'seoul', 'jeonju']
city.split(); // ['incheon, seoul, jeonju'] 아무것도 입력하지 않을지 문자열을 통째로 배열에 저장한다.
city.split(''); // ['i', 'n', 'c', 'h', 'e', 'o', 'n', ' ', 's', 'e', 'o', 'u', 'l', ' ', 'j', 'e', 'n', 'j', 'u']
                // 문자열을 하나씩 나눠 배열에 저장한다.

 

• 문자열 추출
  - String.subtr() : 전달 받은 시작 인덱스로부터 전달 받은 길이만큼의 문자열을 추출한다.
  - String.substring() : 전달 받은 시작 인덱스부터 전달 받은 끝 인덱스 사이의 문자열을 추출한다.
  - String.slice() : 전달 받은 시작 인덱스로부터 전달 받은 끝 인덱스 사이의 문자열을 추출한다.

let city = 'incheon';

city.substr(1, 4); // 'nche' city[1]부터 길이가 4인 문자열을 추출한다.
city.substring(1, 4); // 'nch' city[1]과 city[4] 사이의 문자열을 추출한다.
city.slice(1, 4); // 'nch' city[1]과 city[4] 사이의 문자열을 추출한다.

city.substring(4, 1); // 'nch' start 값과 end 값의 순서를 변경해도 같은 문자열이 추출된다.
city.slice(4, 1); // '' start 값과 end 값의 순서를 변경하면 빈 문자열이 추출된다.

city.substring(-2, 7); // 'incheon' 음수를 0으로 취급하여 city[0]과 city[7] 사이의 문자열을 추출한다.
city.slice(-2, 7); // 'on' 음수가 붙은 수는 뒤에서부터 세기 때문에 city[5]와 city[7] 사이의 문자열을 추출한다.
city.substring(2, -4); // 'in' 음수를 0으로 취급하여 city[0]과 city[2] 사이의 문자열을 추출한다.
city.slice(2, -4); // 'c' 음수가 붙은 수는 뒤에서부터 세기 때문에 city[2]와 city[3] 사이의 문자열을 추출한다.

 

• 문자열 결합
  - String.concat() : 문자열끼리 결합할 수 있다.

var poem1 = '별을 노래하는 마음으로 ';
var poem2 = '모든 죽어가는 것을 사랑해야지 ';
var poem3 = '오늘 밤에도 별이 바람에 스치운다.';

poem1.concat(poem2, poem3);
// '별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지 오늘 밤에도 별이 바람에 스치운다.'

 

• 문자열 공백 제거
  - String.trim() : 문자열 주위의 공백을 제거한다.

let poem = '    별을 노래하는 마음으로    ';
poem.trim(); // '별을 노래하는 마음으로'

 

• 문자열 변환
  - String.toLowerCase() : 문자열을 전부 소문자로 변경한다.
  - String.toUpperCase() : 문자열을 전부 대문자로 변경한다.

let city = 'Incheon';

city.toLowerCase(); // 'incheon'
city.toUpperCase(); // 'INCHEON'

 

 

3. 반복문

---

반복문이란? 같거나 비슷한 코드를 여러번 실행시켜야 할 경우에 쓰는 구문이다.

 

✏️ 반복문의 표현식

• for 구문
  반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다.

for (초기화; 조건식; 증감문) {
    // 실행할 코드
}

let result = 0;

for (let i = 0; i <= 4; i++) { // i가 0이고, 4보다 작거나 같다면
    result = result + i;       // result와 i를 더한 값을 result에 대입하고 i를 1 증가시킨다.
}

console.log(result); // 10

 

• while 구문
  반복할 조건 중 초기화, 증감문은 따로 작성하고 조건문을 괄호 안에 넣어준다.

초기화;
while (조건식) {
    // 실행할 코드
    증감문;
}

let result = 0;

let i = 0;                 // i값을 0으로 초기화한다.
while (i <= 4) {           // i가 4보다 작거나 같다면
    result = result + i;   // result와 i를 더한 값을 result에 대입하고
    i++;                   // i를 1 증가한다.
}

console.log(result); // 10