Frontend Web/Javascript
[Javascript] basic
sofiaaa
2021. 2. 8. 16:09
반응형
1. variable
//변수 선언
//let
//이름으로 문자, 숫자, $, _ 가능
let user;
let user2;
let _;
let $;
//let 2user;
let userName; //camel case
let user_name; //snake case
//const
const x = 1; //선언과 동시에 초기값 부여
//x = 2; //다른 값 할당 불가능
let y;
y = 1;
y = 2; //let에는 다른 값 할당 가능
/*
ES6 버전부터는 var 이외에 let과 const 사용 가능하다.
let으로 선언한 변수는 {} 범위를 벗어나면 사용 불가능하다
const는 상수값을 선언할 때 사용한다.
*/
2. type
/*3대 type
1. string
2. number
3. boolean */
//--------------------String
let foo = "I am a string.";
foo = "So am I";
foo = `back tick`; //back tick으로도 string 가능
/*string 세 가지 표현
1. double quotation
2. single quotation
3. back tick*/
foo = 'He said "javascript is awesome"';
foo = "He said 'javascript is awesome'";
foo = "He said \"javascript is awesome\"";
//------------------------number
foo = 100;
foo = 100.0;
foo = 0.10;
//내장 객체 console
console.log(1 / 0);
//infinity
console.log('a' / 0);
//NaN (not a number)
foo = 1;
console.log(isFinite(foo));
//true (number 값)
foo = "hello";
console.log(isFinite(foo));
//false (string 값)
foo = "1";
console.log(parseInt(foo));
//1 (number type으로 바뀌는 것이다.)
foo = "a";
console.log(parseInt(foo));
//NaN (not a number)
foo = "100px";
console.log(parseInt(foo));
//100 (숫자 값으로 잘 변환)
foo = "+1";
console.log(parseInt(foo));
//1
foo = "-1";
console.log(parseInt(foo));
//1
foo = "781212-111111";
console.log(parseInt(foo));
//781212 (하이픈 기준으로 생년월일만 출력)
foo = "12.6";
console.log(parseInt(foo));
//12 (소숫점 밑에 다 털기)
console.log(parseFloat(foo));
//12.6
//foo = 1n; //big int 16자리 초과하는 숫자값
//------------------boolean
const okay = true;
const fail = false;
//------------------null
let val = null;
//-------------------undefined
let val2;
console.log(val2);
val2 = undefined; //직접 할당도 가능
//undefined
//버튼 객체 담고 왼쪽으로 이동시킬 때
//------------------------symbol
let id = Symbol("id"); //symbol이라는 함수가 리턴한 값이 symbol 타입
console.log(typeof id);
//symbol
//--------------------------변환
val = 1;
val = String(val);
console.log(typeof val);
//string ( val 변수의 type은 string)
val = '6' / '2';
console.log(val);
//3
val = false / true;
console.log(val);
//0 (false)
val = 0 / 1; //false = 0 , true = 1
console.log(val);
//0 (false)
val = '1';
val = Number(val);
console.log(typeof val);
//number
console.log(Number('1'), Number(true), Number(' '), Number(""), Number(null), Number('a'), Number(undefined));
//1 1 0 0 0 NaN NaN
console.log(Boolean(-1),Boolean('a'), Boolean('B'), Boolean(' '),
Boolean(0), Boolean(''), Boolean(null), Boolean(undefined));
//true true true true false false false false
//boolean은 0은 false, 나머지는 true
//empty는 false, 나머지는 true
3. operator
//-------------------------산술 연산자
const val = 1 + 2 * 3 / 2;
let i = 1;
console.log(++i); //2
i = 1;
console.log(i++); //1
console.log(i); //2
//------------------------붙이기 연산자
let foo = 'hello';
let bar = 'world';
console.log(foo + ' ' + bar);
//hello world
foo = 1;
bar = 2;
console.log(foo + bar);
//3
foo = 1;
bar = '2';
console.log(foo + bar);
//12
console.log(foo + + bar); //*******
//3
//parsing compile
//의미적으로 해석 기계어로 번역
//-----------------------------논리 연산자
//0을 초과 여부 분석. 0을 초과하면 true
const one = 1;
const zero = 0;
const two = 2;
//|| or
//하나라도 0 초과하면 true
console.log(one || zero); //1
console.log(zero || one); //1
console.log(zero || zero); //0
console.log(zero || zero || one || zero); //1
//&& and
//하나라도 0이라서 false 이면 그냥 0 출력, true이면 마지막 값 출력
console.log(one && zero); //0
console.log(zero && one); //0
console.log(one && two); //2
console.log(two && one); //1
//앞에 있는 변수에 0을 초과하는 변수가 있으면 dosomething 실행
//false 이면 그냥 종료
//foo & doSomething();
//bar = baz || createBar();
const baz = '1';
//equivalent
console.log(one == baz);
//true (논리적인 값만 따져서 true 라고 한다.)
console.log(one != baz);
//false
//identical
console.log(one === baz); //논리적, 물리적 다 따져야 true 나온다.
//false(데이터 타입이 다르기 때문에 false)
console.log(one !== baz);
//true
//---------------------------비교 연산자
console.log(two > baz); //문자가 들어와도 숫자처럼 취급
//true
//-------------------------------제어문
4. jump
//건너뛰기 if
const okay = true;
const fail = false;
if(fail) {
}
if(fail){
} else {
if(okay) console.log("earth");
else console.log("moon");
}
//earth
//------------------삼항 연산자
const foo = okay ? 1 : 0 ;
console.log(foo);
//1
const bar = "bar";
switch(bar){
case "bar" :
console.log("bar"); break;
case "baz" :
console.log("baz"); break;
default:
console.log("all right.");
}
//bar
5. loop
let i = 0;
while(i < 2){
console.log(`while: ${i + 10}`) //back tick 안에서는 ${} 사용 가능
i++;
}
/*
* while: 10
* while: 11
*/
//back tick의 특징
//string 안에 변수 포함 가능 하고, 변수는 EL로 표현
i = -1;
while(++i <2)
console.log(`while: ${i + 10}`);
/*
* while: 10
* while: 11
*/
do{
console.log("do");
} while(false);
//do
for(let i = 0; i < 2 ; i++)
console.log(`for: ${i}`);
/*
* for: 0
* for: 1
*/
for(let i = 0, limit = 2; i < limit; i++)
console.log(`for : ${i}`)
/*
* for: 0
* for: 1
*/
for(let i = 0 ; i <5 ; i++){
if(i >= 2) break;
console.log("hello");
}
/*
* hello
* hello
*/
반응형