IT/JavaScript

5. 자바스크립트(Java Script) 조건문(2)

뀨뿌뀨뿌 2021. 9. 26. 17:34

1. switch

  • 형태
    switch (표현식) {
    case 값1:
      명령문1  
      break  
    case 값2:
      명령문1  
      break  
    default
      명령문3
    }
  • 중괄호 {} 로 둘러싸인 블록 형태를 띠고 있고, 중괄호 안에는 case문이 있습니다.
  • switch 의 표현식은 case 의 값과 일치 여부를 확인하고 이때 === 일치 연산자를 사용합니다.
  • === 일치 연산자는 값과 자료형을 모두 비교하고, 결과 값으로 true 또는 false를 반환합니다.
  • case문이 있는 경우, 위에서 부터 순차적으로 일치한 값이 나올 때까지 case 값을 확인하면서 내려갑니다.
  • case값이 일치하면 해당 명령문을 실행합니다.
  • break는 다음의 코드들을 더 이상 실행하지 않고, switch 조건문을 끝내는 역할을 합니다.
  • 일치하는 case값이 없는 경우 default로 선언된 명령문을 실행합니다.
const lang = "JavaScript"
switch (lang) {
  case "C"
    console.log("C언어를 학습 중입니다.")
    break
  case "JavaScript"
    console.log("JavaScript를 학습 중입니다.")
    break
  case "Python"
    console.log("Python를 학습 중입니다.")
    break
  default
  console.log("프로그래밍 언어를 학습하고 있지 않습니다.")
  break
}    // JavaScript를 학습 중 입니다.

2. for

  • 특정 코드를 반복하는 흐름을 제어합니다.
  • 반복문을 통해 언제부터 어디까지 실행할지, 몇 번 반복할지를 설정합니다.
  • 형태
    for (초기값; 조건식; 어떠한 간격으로) {
      실행할 문장
    }
  • 소괄호 ()로 둘러싼 부분에는 반복문을 어떻게 실행할지에 대한 내용을 작성합니다.
  • 소괄호 안에 작성하는 규칙으로는 첫 번째는 초기값, 두 번째는 언제까지 반복할지를 정하는 조건식, 세 번째는 어떤 간격으로 값이 변화하는지를 작성하며 세미콜론 ; 으로 구분합니다.
  • 중괄호 {}로 둘러싸인 블록에 실행할 문장을 작성합니다.
for(const i = 0; i < 3; i ++){
  console.log(i + "번째 반복 문장입니다.")
}
/*
0번째 반복 문장입니다.
1번째 반복 문장입니다.
2번째 반복 문장입니다.
*/
  • 위의 코드는 0부터 시작해서 2까지 총 3번 반복해서 실행하는 반복문입니다.
const cafe = [
  {name: "스타벅스", coffee: "4,100", tea: "4,100"},
  {name: "이디야", coffee: "3,200"},
  {name: "폴바셋", coffee: "4,300", tea: "5,500"},
  {name: "투썸플레이스", coffee: "4,100", tea: "4,800"}
]

for (let i = 0; i < cafe.length; i++) {
  const c = cafe[i].
  if (!c || !c.tea) {   // 배열에서 가져온 요소의 정보가 없는 경우에는 다음으로
    continue
  }
  console.log(i + "번째 실행입니다.")
  if(c.name === "폴바셋") {
    console.log(c.name + "의 아메리카노 가격은 " + c.coffee + "원이고, 얼 그레이의 가격은 " + c.tea + "원 입니다.")
  }
}
/*
0번째 실행입니다.
2번째 실행입니다.
폴 바셋의 아메리카노 가격은 4,300원이고, 얼 그레이의 가격은 5,500원입니다.
*/
  • break 와 continue 를 통해 반복문의 흐름을 제어할 수 있습니다.
  • continue 는 지시자가 놓인 지점 다음의 문장들을 무시하고 다음 반복으로 넘어가게 합니다.
  • break 는 break가 있는 지점까지만 실행하고 반복문을 종료합니다.

3. for-in

  • for 반복문과 비슷하게 for 키워드를 사용하고, for 반복문과 다르게 in 키워드를 사용합니다.
  • in 키워드를 사이에 두고 오른쪽에는 반복할 대상 변수를 왼쪽에는 속성명을 작성합니다.
  • 형태
    for (속성명 in 반복할 대상) {
  • }
  • 반복문을 통해 내부 요소를 하나씩 순회할 때마다, 각 요소가 키(Key) 정보가 for in에서 정의한 속성명으로 선언과 동시에 할당됩니다.
const store = {candy: 1000, snack: 2000, beverage: 1500}

for (const item in store) {
  if(!store.hasOwnProperty(item)) {
    continue
  }
  console.log(item + "는 가격이 " + store[item] + " 입니다.")
}
/*
candy는 가격이 1000 입니다.
snack는 가격이 2000 입니다.
beverage는 가격이 1500 입니다.
*/
  • 객체 자료형 자체에 기본적으로 내장된 속성인 hasOwnProperty 속성을 사용해서 store 객체에 item 키 정보가 있는지 확인합니다.
  • for-in 은 순회 가능한 객체의 요소들을 나열하지만, 객체 속성 중에서 hasOwnPropertty와 같은 내장 속성은 열거하지 않고 첫 번째 코드에서 사용자가 직접 정의한 속성 값들에 대해서만 나열합니다.

* Object.protptype.hasOwn Property()
- hasOwnProperty() 메소드는 객체가 특정 프로퍼티를 가지고 있는지를 나타내고 있는 boolean 값을 반환함
- 객체가 특정 요소를 자신만의 직접적인 요소로 소유하고 있는지를 판단할 때 사용함

4. while 반복문

  • 지시어 while로 시작하고, 소괄호 () 안에 조건식들이 들어갑니다.
  • 조건식의 결과 값은 true, false 만 가능합니다.
  • 조건식이 true 를 만족하는 경우에만 중괄호 {} 안의 문장들이 실행됩니다.
  • 조건식이 false 가 되면 더 이상 반복 실행하지 않습니다.
  • break 와 continue 문을 사용할 수 있습니다.
  • 형태
    while (조건식) {
    반복하게 될 문장
    }
  • do-while 반복문
    • 지시어 do의 사전적 의미 그대로 처음은 조건 결과와 상관없이 무조건 실행합니다.
    • 그다음 조건식의 결과 값을 확인하고 다음의 흐름은 while문과 동일합니다.
    • 형태
      do {
      반복하게 될 문장
      } while (조건식)
const users = [
  {name: "홍길동1", city: "과천"},
  {name: "홍길동2", place: "일산", city: "고양"},
  {name: "홍길동3", place: "광주", city: "전라도"},
  {name: "홍길동4", place: "부산", city: "경상도"}
]
// 인자값을 user와 name을 받는 함수 isUser 선언
const isUser = (user, name) => {  // user의 name과 인자로 받은 name이 다른 경우 false를 반환하여 함수 종료
  console.log(`함수가 실행되었습니다. ${user.city} 도시에서 ${name}을 찾습니다.`)
  if(user.name === name) {
    console.log(`${user.name}은 ${user.city} ${user.place} 에 살고 있습니다.`)
    return true
  }
  return false
}
let user
while(user = users.shift()){  // u 변수에 user.shift()로 반환되는 값을 할당하고 할당된 값을 확인, hometown의 요소는 객체로 이뤄져 있어 값이 유효한 경우 true, 유효하지 않으면 false
  if(!user.name || !user.place || !user.city){   // user에 할당된 객체의 name, place, city속성이 모두 있는지 확인하고 하나라도 없으면 continue문을 통해 반복문의 다음 순서로 넘어감
    continue
  }
  const result = isUser(user, "홍길동3") // isUser 함수에 user변수와 "홍길동3"값을 넣어 결과를 반환
  if(result){
    break
  }
}
let i = 0
const names = ["홍길동1", "홍길동2", "홍길동3", "홍길동4"]
const cities = ["경기", "부산", "대구", "광주"]
do{
  user[i] = {name: names[i], city: cities[i]}
  i++
} while (i < 4)
console.log(user)

// 함수가 실행되었습니다. 고양 도시에서 홍길동3을 찾습니다.
// 함수가 실행되었습니다. 전라도 도시에서 홍길동3을 찾습니다.
// 홍길동3은 전라도 광주 에 살고 있습니다.
/*
{0: {...}, 1: {...}, 2: {...}, 3: {...}, name: '홍길동3', place: '광주', city: '전라도'}
  0: {name: '홍길동1', city: '경기'}
  1: {name: '홍길동2', city: '부산'}
  2: {name: '홍길동3', city: '대구'}
  3: {name: '홍길동4', city: '광주'}
  city: "전라도"
  name: "홍길동3"
  place: "광주"
  [[Prototype]]: Object
*/
* Array.Prototype.shift()
- shift()는 배열의 앞에서부터 값을 하나씩 빼오는 함수
- shift()메서드는 배열에서 첫번째 요소를 제거하고 제거된 요소를 반환, 이 메서드는 배열의 길이를 변하게 함
   ex) const array1 = [1, 2, 3]
        const firstElement = array1.shift()
        console.log(array1)           // array[2, 3]
        console.log(firstElement)    // 1