[JS] 조건문, 반복문, 함수 선언문 및 함수 표현식

Jun_Gyu·2023년 7월 18일

JavaScript 국비지원 국비취업지원 부트캠프 야놀자 패스트캠퍼스 프론트엔드

패스트캠퍼스 X 야놀자

목록 보기

9/17

조건문

switch 조건문 (1)

function gasStation(gas) {
	let price
  	switch (gas) {
      	case '가득' :
        	price = 100000
      	case '절반' :
        	price = 50000
      	default :
        	price = 0
    }
}
console.log(gasStaion('가득'))

switch 조건문 (2)

function gasStation(gas) {
  	switch (gas) {
      	case '가득' :
        	return 100000
      	case '절반' :
        	return 50000
      	default :
        	return 0
    }
}
console.log(gasStaion('가득'))

두 조건문의 결과는 같으며, 서로 동일한 조건문이다.

반복문

For of

const countries['korea', 'america', 'japan']
for (const country of countries) {
	console.log(country)
  // 출력결과
  /*
  korea
  america
  japan
  */
}
// for(let i = 0; i < countries.length < i += 1) {
//	console.log.(country[i])
// }  와 동일하다

For in

const product {
	name : 'camera',
    price : 150000,
    bluetooth : true,
    battery : '7000mA'
}
for (const info in product) {
  console.log(product[info])
  // 출력결과
  /*
  camera
  150000
  true
  7000mA
  */
}

반복문

while 반복문
조건이 참인경우에는 무한정 반복하게 됨.
따라서 조건에 거짓을 포함하여 반복문을 중간에 종료할 수 있도록 해야 함.

do while 반복문
do { } while ()
의 형태이며, 먼저 중괄호 안의 연산을 수행 한 뒤, while 조건문을 실행한다.
만약 조건문이 거짓이라 하더라도 {}의 연산은 최소 한번은 실행되게 된다.

함수 선언문, 함수 표현식

함수 선언문과 함수 표현식을 구분하는 것은 호이스팅 현상의 발생 유무이다.
호이스팅이란, 선언되어 있는 함수 코드를 유효한 범위 내에서 꼭대기로 끌어올려서 동작하는 것을 의미한다.

함수 선언문
timer()
function timer(){
  /* 타이머 로직 */
}
함수 선언문의 경우에는 함수 실행문을 함수보다 위쪽에 작성하여 호이스팅을 이용해 함수를 불러오는것이 가능하다.

함수 표현식
const timer = function () {
 /* 타이머 로직 */
}
timer()
하지만 함수 표현식의 경우 함수 실행문을 해당 함수보다 아래쪽에 작성해야 오류가 발생하지 않는다. 호이스팅 현상이 함수 선언문에서만 발생하고, 함수 표현식에서는 발생하지 않기 때문이다.

오류 해결

for in 반복문의 실습 중 객체 데이터를 불러오는 도중 생긴 오류이다.

객체 데이터에서 속성을 조회하는 방법으로 점 표기법과 대괄호 표기법 두가지가 있다고 학습을 했는데,

위의 사진에서는 대괄호 표기법으로 key라는 변수를 이용하여 각각의 객체 데이터들을 불러오는데는 성공했지만, 점 표기법으로 불러온 데이터들은 모두 undefined가 출력된 상태이다.

이에 대해서 멘토님께 질문을 드리니, 객체 속성을 key와 같은 변수에 담아 할당하는 경우에는 대괄호 표기법 을 사용해야한다고 말씀해주셨다.

추가적으로, 변수 뿐만 아니라 개체 속성이 숫자일 경우 또한 대괄호 표기법을 통해 데이터에 접근한다고 한다.

const object = {};
object.1 = 'bar'; // SyntaxError
console.log(object.1); // SyntaxError

// 위의 경우에는 오류가 발생하게 된다. 


const object = {};
object[$1] = "foo";
console.log(object[$1]); // 'foo' 출력

/*
  const object = {};
  object.$1 = "foo";
  console.log(object.$1); 
  로도 가능하긴 함!
*/