Javascript
[변수]
1. 전역변수 선언
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step01jsbasic.html</title>
<!-- <script src="step01js.js"></script> -->
</head>
<body>
<script>
// js 전역 변수 선언 (4가지 방법)
var v1;
const v2 = "불변 데이터!"; // 상수 선언 키워드 -> 동적으로 데이터를 넣을 수 없으니 선언과 동시에 초기화를 해줘야 한다.
let v3;
v4 = 10; // var, const, let 없이 선언 시 값 초기화 필수! (이 경우에는 호출로 보기 때문이다.)
// 변수의 타입이 동적으로 부여할 수 있다.
v1 = 10;
v1 = '문자열';
console.log(v1);
</script>
</body>
</html>
2. 사용자 정의 함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step01jsbasic.html</title>
<!-- <script src="step01js.js"></script> -->
</head>
<body>
<script>
v4 = 10;
function myFun(){
console.log(v4);
}
myFun();
</script>
</body>
</html>
- js에서도 함수를 선언하고 작성 했다면, 사용을 해줘야한다.
3. 지역 변수(local variable)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step01jsbasic.html</title>
</head>
<body>
<script>
function myFun(){
console.log('로컬 변수 익히기 - var, let 차이점!');
if(true){
console.log('true인 경우 실행!');
var lv1 = 1;
let lv2 = 2;
lv3 = 3; // 전역 변수로 선언
console.log(lv1);// myFun() 함수 내부에서 호출 가능
console.log(lv2);// 선언된 {} 내부에서만 호출 가능 -> 사
console.log(lv3);
}
console.log(lv1);
console.log(lv2); //에러 발생!!!
console.log(lv3);
}
myFun();
console.log(lv1); // 함수 내부에서만 호출이 가능!
console.log(lv3);
</script>
</body>
</html>
- var와 let은 비슷하지만 다른 특성을 가지고 있다.
- var와 같은 경우엔 지역 변수로 선언한 함수 안에서 전부 사용이 가능하다.
- let의 경우엔 함수 안의 if문 안에서만 사용이 가능하다.
- lv3의 경우엔 지역 변수로 선언되는 것이 아니고 전역 변수로 선언이 되어버린다.
[연산자 ==와 ===]
- 요즘 추세는 var보다 let을 사용하는 추세이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function myFun(){
let d1 = true;
let d2 = 'true';
console.log(d1);
console.log(d2);
let d3 = 1;
let d4 = '1';
console.log(d3);
console.log(d4);
console.log(d3 == d4); // string과 number 타입이 맞다~라고 뜸
console.log(typeof(d1), typeof(d2), typeof(d3), typeof(d4));
console.log(d3 === d4);
}
myFun();
</script>
</body>
</html>console.log(d3 == d4);: 타입은 다른데 값을 비교해서 true 값이 나온다.console.log(d3 === d4);: 타입을 비교해서 false 값이 나온다.
[함수 종류]
1. 이름 있는 함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step03jsfunction.html</title>
</head>
<body>
<script>
// step01 - 이름 있는 함수
function myFun1(){
console.log('이름있는 함수');
}
//이름이 있는 함수 호출은 호출을 해야만 실행이 된다.
myFun1();
</script>
</body>
</html>2. 변수에 함수 등록
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step03jsfunction.html</title>
</head>
<body>
<script>
//step02 - 변수에 함수 등록
console.log('step02 - 함수 표현식');
let myFun2 = function(data){
console.log(data);
}
myFun2(10); // 변수에 함수 등록한 코드를 사용하는 방법
</script>
</body>
</html>3. 즉시 실행 함수(무기명)
- 만들고 구현과 호출이 함축된 문법이다.
- 재사용성보다 이벤트 처리용으로 주로 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step03jsfunction.html</title>
</head>
<body>
<script>
//step03 - 즉시 실행 함수
console.log('step03 - 즉시 실행 함수')
(function(){
console.log("즉시 실행?");
}());//소괄호를 붙여줘서 자기 자신을 실행하도록 한다.
console.log('step03 - 즉시 실행 함수')
(function(data){
console.log("즉시 실행?", data);
}('fisa'));
</script>
</body>
</html>
즐겁고 괴로운 개발😎