개발
[Javascript] 기초1
yun000
2024. 12. 9. 17:51
<변수>
var 어디에서 쓰여도 전역 변수. 단 함수내에서 선언되었을 경우 함수 밖에서는 사용 불가
let 지역 변수. 블록 단위의 로컬 변수
const 변경 불가한 변수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//전역 변수 선언 (java는 전역 변수가 없다)
var var1=1;
let var2=2;
const var3=3;
var1=10;
var2=20;
//var3=30;//error. you cant change const variable.
//var, let 변수의 유효 범위 차이 존재
if(true)
{
//var는 전역변수. 전체에서 사용 가능
let var5=6; //let은 local변수. 선언된곳 안에서만 사용 가능
var4=50;
var var4=5
var5=60;
}
var4=500;
var5=600;//var var5와 동일. 새로운 전역 변수 선언. let var5와 다른 것이다.
console.log("var4: "+var4);
console.log("var5: "+var5);//var5 is not defined error
</script>
<script>
function func1()
{
if(true)
{
var var6=7;//함수단위의 local 변수
let var7=8;//블록 단위의 local 변수
const var8=9;//블록 단위의 local 변수
console.log("var6:"+var6);//가능
console.log("var7:"+var7);//가능
console.log("var8:"+var8);//가능
}
console.log("var6:"+var6);//가능
console.log("var7:"+var7);//error
console.log("var8:"+var8);//error
}
console.log("var6:"+var6);//error
func1();
</script>
</body>
</html>
+) 자바는 전역 변수가 없다. 필드는 전역변수아님
<비교 연산자 , 논리 연산자>
== != 같은지 비교
=== !== 값이 같고, type도 같은지 비교
&& 왼쪽이 true이면 오른쪽 값 반환
|| 왼쪽이 true이면 오른쪽 값 보지 않고 true반환
|| 왼쪽이 false이면 오른쪽 값 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//비교 연산자=======================
let var1=10;
let var2="10";
//value 검사
console.log("var1==var2",var1==var2);//true
console.log("var1!=var2",var1!=var2);//false
//type,value 검사
console.log("var1===var2",var1===var2);//false
console.log("var1!==var2",var1!==var2);//true
//논리 연산자========================
var var3=true;
var var4=false;
console.log("var3&&var4",var3&&var4);//false (and)
console.log("var3||var4",var3||var4);//true (or)
var var5=var3 && "홍길동"; //&&는 앞에가 true이면 뒤에 값 반환
var var6=var4 && "홍길동";
console.log(var5);//홍길동 반환.
console.log(var6);//false 반환
var var7=var3||"홍길동";//앞의 것이 true이면 뒤에 것을 보지 않음
var var8=var4||"홍길동";//앞의 것이 false이면 뒤에 값 반환
console.log("var7=",var7);//true반환
console.log("var8=",var8);//false 반환
</script>
</body>
</html><type>
함수 선언 방법
let func1=function(){};
function func2(){}
let func3= ()=>{};
let func4= function(){};
타입 확인 number, string,object, function등...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let var1=1;
let var2="1";
let var3={};//객체 표현
let var4=[];//배열 list
//함수(객체)
let var5=function(){};//함수(객체), function var5(){} 이것과 같다.
function var6(){}
let var7=var6;
var5();
var6();
var7();
//Arrow function (람다식)
let var8=()=>{};//var5,var6와 같다
let var9=function(){};
//type확인 typeof
console.log("var1타입=",typeof var1);//number
console.log("var2타입=",typeof var2);//string
console.log("var3타입=",typeof var3);//object
console.log("var4타입=",typeof var4);//object
console.log("var5타입=",typeof var5);//function
console.log("var6타입=",typeof var6);//funcion
console.log("var7타입=",typeof var7);//function
</script>
</body>
</html>
<함수>
매개변수 값을 전부 다 주지 않아도 되고
기본 값을 넣어줘도 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function func1()
{ console.log("func1 실행"); }
func1();
const func2=(x,y,z=7)=>
{ console.log("func2 실행",x,y,z); };//z=7이 기본값
func3();//값 안줘도 되고
func1(13);//값 하나만 줘도 됨
func2(3,5,6);
const func4=(x,y,z=7)=>{console.log("func",x,y,z)};
func4();//func undefiend undefined 7
func4(3);//func 3 undeifiend 7
func4(3,5);//func 3 5 7
func4(3,5,6);//func 3 5 6
</script>
</body>
</html><세미콜론>
자바스크립트는 세미콜론을 안붙여도 되지만
컴파일러 에게 알려주기 쉽고 가독성 있으니 붙여라