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 
 */
반응형