JS / 기초, 변수, 조건문 if

공부한 강의 : https://www.youtube.com/watch?v=zN9YVbieTSQ  /오쌤의 니가스터디 (왕초보에게 적합)

https://www.youtube.com/watch?v=KF6t61yuPCY / 코딩앙마 (일반 초보에게 적합)

https://www.youtube.com/watch?v=OCCpGh4ujb8 / 드림코딩 엘리 (어느정도 지식이 필요)

 

 

*완전언어가 아니여도 데이터 출력이 가능한 아이들
alert(); 경고창에 값 표현 
document.write(); body 내부에 값 표현 
console.log(); 콘솔창에 값 표현 
   Ex)   alert('값');  - alert('안녕하세요');     

*태그도 문자열로 쓸수있다  document.write('<br>);

*키워드는 js가 특별한 의미를 담고 있는 예약어이다 그래서 따옴표 내부에 쓰지 않는다. 따옴표 내부에 쓰는건 문자열

*객체 - js가 명령 가능한 모든 대상 

*숫자와 문자를 연결해줄때 ex) 1000 + '원'

*식별자 구별 관례 - 단어 단어 조합일때 첫글자 대문자쓰기 firstBoxValue 이렇게 

*검사창에서도 데이터 유형마다 색을 다르게 표현해줌 

 

*데이터유형 

 

-문자형 / string

const name = "mike"; 
const message = "i'm a boy.";
const message2 = 'i\'m a boy.';
const message3 = `my name is ${name}`;

const message4 = `나는 ${30+1}살 입니다.`;

 

- 숫자형 / number

const age = 30; 
console.log(1 + 2);

 

-불린
const a = true; //boolean
const b = false;

 

이외 함수 객체 undefined 등등은 더 추후에 

 

*변수

var를 쓸거면 재선언 말고 재사용을 써라 
var cup = 'coffee';
var cup = 'tea'; 하지말고 
var cup = 'coffee';
cup = 'tea'; 이렇게 하라는 말 

영원히 바뀌지않는 수가 상수 
변할지도 모르는게 변수 

prompt는 문자열로 값을 반환해서 number(값)이렇게 감싸줘야 
원하는대로 숫자값을 사용 가능함

 

*명시적 형변환을 할수있는 방법 

String() 앞에 s대문자 괄호안에 타입을 문자형으로 바꿔준다 
Number() 숫자형으로 바꿔줌 - 문자가 포함되어있으면 NaN이 됨
boolean은 false 숫자0, 빈문자열'', nul,l undefined, nan
이외에는 true // number(true)하면 1나오고 number(false)
하면 0나오는거랑 연관있다 참고로 number도 앞에 대문자
주의사항! Number(null) // 0
             Number(undefined) //NaN

 

*연산자

==는 동등 연산자이고 ===는 일치 연산자 

const a = 1;
const b = "1";
console.log(a == b); 하면 true라고 나오고 
console.log(a === b); 하면 false라고 나옴 

일치 연산자는 타입 까지 비교해주는것 

 

Number 짚고 넘어갈것

 

Number(null)   // 0 prompt에서 취소누르면 null이 된다 = 0이된다 

Number(undefined) // NaN  

Number(0) //false

Number('0') //true

Number('')//false

Number(' ')//true

숫자 0이나 빈 문자열은 false 

문자 0이나 공백이 들어간 문자열은 true

 

연산자 나머지

홀수: X % 2 = 1

짝수: Y % 2 = 0 

어떤값이 와도 5를 넘기면 안된다면 X % 5 = 0~4 사이의 값만 반환

 

거듭제곱 ** const num = 2**3;     //=8

 

문자열에 변수 넣을때 

const name = 'mike';

const message = `my name is ${name}`; 

=백틱과 달러 중괄호로 변수 나타내기 

 

*조건문 if 

{}는 코드블록, 여러줄쓸때 

if(조건식){참표현식;}다음표현식; = 제어문 

else if 를 써서 조건식 2를 만들수 있다

논리곱연산자 && - 둘중 하나만 false여도 false 
논리합연산자 || - 둘중 하나만 true여도 true 
부정연산자 ! - true인 값 앞에 !를 붙이면 false로 반환 
                    원래 논리의 반대로 반환하는것 

함수 confirm - 확인(true)/취소(false)를 띄우는 함수
 
내가 취소를 누르면 취소되었습니다를 띄우고 싶은데 
if(변수명){}
else{alert('취소되었습니다.')}; 이렇게 하면 비효율적이니까 
이때 부정연산자
if(!q){alert('취소되었습니다.')}; 이렇게 사용 

and가 우선순위가 높다 그래서 묶어줘야함 

const gender = 'F';
const name = 'jane';
const isAdult = true;

if(gender === 'M' && (name === 'mike' || isAdult)){
  console.log('통과')
} else{
  console.log('돌아가')
}

 

 

변수는 let const    ( es6부터 ) 

이전에는 var 

 

var 와 let은 비슷한데

var는 한번 선언된 변수를 다시 선언할 수 있고 선언하기 전에 사용할수도 있다. 

var로 선언한 모든 변수는 최상위로 끌어올린거처럼 동작 = 호이스팅 

그런데 선언은 호이스팅되지만 할당한 값은 호이스팅 되지 않기때문에 undefined가 뜬다 

 

let과 const도 호이스팅은 되지만 

이 호이스팅의 뜻이 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동된다는 말 

 

이 let 과 const는 tdz temporal dead zone이 있음

할당을 하기전까지 사용할수없음 

 

let age = 30;

function showAge(){

   console.log(age);

    let age = 20;                //이 부분땜에 에러가 난다

}

 

변수는 선언 초기화 할당 3단계를 거쳐야함 

 

const는 선언과 할당이 동시에 일어나야한다 

 

let과 const는 블록스코프 =  코드블록내부에서 선언된 변수는 내부에서만 유효하다 = 지역변수 

 

const age = 30;

if(age>19){

   var txt = '성인';                                                            -> var는 이렇게 코드블록 끝나고 선언해도 사용가능

}                                                                                   let const는 블록안에서 선언해야함 

console.log(txt);

 

그런데 var도 함수내에서 선언되면 함수바깥에서 선언할수없음

function add(num1, num2){

  var result = num1 + num2;

}

add(2,3);

console.log(result);                            -> 에러발생!

 

= 예측가능한 결과와 버그를 줄이기위해 let const 사용 바람