카테고리 없음

자바 스크립트 1주 8~10강 - 스코프 및 화살표 함수, 조건문

8나지 2024. 4. 22. 15:17

스코프, 전역변수, 지역변후, 화살표 함수

스코프 ; 변수의 영향이 어디까지 끼칠수 있는가; 변수의 영향 범위

전역변수 ; 스코프가 전체역영에서 영향 ; 함수 내에서도 함수 밖에서도 log가 찍힐 수 있도록

{} 수식안에서 10 / 밖에서 10 총 2번 찍힘 ; let 선언을 

 

지역변수 ; 함수내에서만 영향 ; {}안에서만 의미 있는 변수

오류남 ; 지역변수라 7번째에는 해당이 되지 않기 때문 (터미널 상단의 10은 08.js 결과값) 

 

화살표 함수 ; es6부터 나온 신 문법

function add (x, y) {

 return x + y;

}                               기존 방법

 

1-1 기본적 화살표 함수 ; 변수선언하는 것 처럼 ; 기존함수 익숙해지면 화살표 함수로 넘어가보기

let arrowFun01 = (x, y) => {

return x + y;

};                               화살표 함수 ; 기능은 아직까지는 같음

1-2 한줄로 ; {return} 뺄 수 있는 방법 - {}가 return문이면서 1줄일경우 가능, {}도 같이 삭제

let arrowFun02 = (x, y) => x + y;

 

만약 let arrowFun03 = (x) => x;  일때 매개변수도 1개이므로  let arrowFun03 = x => x;

 

https://www.youtube.com/watch?v=Zwaxqf1gsTg


문(if, else if, swich ~)

1. 조건문 if, else if, else, switch

특정 조건에 해당하는 경우에만 하위 로직 실행

1-1. if문

let x = 10;

if (조건) {                 매개변수를 넣는 함수와 달리 true 또는 false 나올 수 있는 조건 넣음

}

 

ex)

let x = 10;

if (x > 0) {                 이라면 true 이기 때문에 {메인로직}부분이 실행

console.log("x는 양수입니다.");               터미널에서 true 이므로 결과 나옴

}                                   만약 x < 0 이라면 false 이므로 터미널에서 결과값이 안나옴

 

1-2.

let y = "hello world";     y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력       

if (y.length >= 5) {

console.log(y.length);   11

}

 

2. if -else문

if (x > 0) {

console.log("x는 양수입니다.");

} else {console.log("x는 음수입니다.");

 

1-3. if - else if - else 문 ; 만약 ~ 아니면 @이거,,, 것도 아니면 # 이거 🤣

let x =10;

if (x < 0) {                    

     console.log("1");

} else if (x >= 0 && x < 10) {         x가 0보다 크거나 같고, 그리고 10보다 작다 ; 두개 다 만족시켜야함

      console.log("2");                     그것도 아니면 

} else {

      console.log("3");                                                  

}

 

1-4 switch ; 변수의 값에 따라 여러 개의 케이스 중 하나 선택 ; default ; 

let fruit = "사과";                              스위치문은 항상 변수가 나옴

                                                          여기서의 변수명 fruit

switch (fruit)  {                                이 변수를 비교해 가겠다.

  case "사과":                                   여러 경우의 수중 하나 선택     

     console.log('사과입니다');         사과면 이렇게 , switch는 케이스가 끝날 때 break넣어줘야함 ; 

     break;                                         case "사과" 실행후 바깥쪽으로 빠져나옴. 없으면 바나나도 키위도 다 한바퀴 돔

  case "바나나":                               그러면 원하는 값이 나오지 않음

     console.log('바나나입니다');

     break;

  case "키위":

     console.log('키위입니다');

     break;

   default:

      console.log('아무것도 아닙니다');

}


조건문 중첩 ; 조건을 세분화 해서 실행하고 싶을 때? 조건1 나이, 조건2 성별 (ex.조건 1. 20살이상이면서 조건2 남자인지, 여자인지)

let age = 20;                        나이가 특정 나이 이상인데 성별이 남성 또는 여성 처럼 조건을 분리해서 찍고싶음

let gender = "여성";             if 문 여러개로 사용 할 때

 

if (age >= 18) {                         {}이 많은게 좋은건 아님 ; 가독성 떨어짐

    if (gender === "여성") {

   console.log("성인여성입니다.");

} else { 

console.log("성인 남성입니다.");

  }

} else {

     if (gender === "여성")  {

          console.log("미성년 여성입니다.");

     }  else {

 console.log ("미성년 남성입니다.");

}

 

조건부 실행 ; 어떤 조건에 들어왔을 때만 실행

let x = 10;

(x > 0) && console.log("x는 양수입니다.");   원래 사용하던 함수 ➡️      if (x > 0) {

  ⬆️ 같은 말 ➡️                                                                                         console.log("x는 양수입니다."); }

   

한결 간소화된 걸 볼 수 있음 ; (x >0) 을 만족하면 (&&) console~ 여기가 실행되게 해줘

   ; &&엔드 조건때문에 실행되고 있다.   ; 요즘 많이 쓰이는 패턴(and 조건)

 

or 조건 || 삼항 연산자와 단축평가

let y;                                y는 선언만 하고 값을 할당하지 않았음. y는 undefined

let z = y || 20;                 z가 뜻하는 것 y가 언디파인드(존재하지 않는 경우) 이면 20을 기본으로 세팅해줘

console.log(z);                20

 

faisy한 값, truthy한 값       if문 조건에는 트루 또는 폴스 값이 들어가야 {메인 로직안}으로 진입가능

(0)은 숫자인데 넘버타입도 true 또는 false사용가능, 이러한 값이 true 또는 false에 가까운지 판단하는 것이 faisy한 값, truthy한 값

ex)

if (   ) {                                ()안에 0, "", null, undefined, NaN, false, true를 하나씩 집어 넣는다면

console.log("hello");         true 하나만 실행됨. 즉 모두 truthy한 값 으로 해석됨 ; if 문 - 조건문 안에서

}