ECMA

let_var_const

    <script>
var n = 10;
var n = "홍길동";
console.log(n);

if(true){
    var x = 100;
}
console.log(x);
for (var i = 0; i < 10; i++) {
    console.log("for i = ",i)  
}
console.log(i);
///////////////////////////
console.log(m);
var m=-10;
console.log(m);
///////////////////////
let n2=10;
console.log(n2);
if (true){
    let n3="hello";
}

for (let j =0;  j <10; j++){
console.log("for j= ",j)
}
/////////////////////
const str= "홍길동";
str="aaa";
const mesg="hello";
try {
    mesg="world"
} catch  {
    console.log("상수값 변경 불가")
}


</script>

    <script>
//1.사용자 정의 객체
let address="서울";
let my="email"
var user={
username:"홍길동",
age:20,
address,
[my] :"aaa@naver.com", ///key 값을 변수로 설정함
getName: function(){
    return this.username; //this == json obj
},
getAge: function(){
    return this.age;
},
getAddress(){return this.address}


};//end obj

console.log(user);
console.log(user.username);
console.log(user.age);
console.log(user.address);
console.log(user.email);
console.log(user.getAddress());
console.log(user.getAge());
console.log(user.getName());

    </script>

    <script >
var person={
name:"홍길동",
"age":20,
parent:{
    name:"홍대감",
    job:"사또"
}

};
console.log(person.name);
console.log(person['name']);

    </script>

객체분해할당1배열

    <script >
let arr =[100,200];
var n = arr[0];
var n2 =arr[1];
console.log(n,n2);
//2. 배열 객체 분할 할당
let arr2 =[1000, 2000];
var [n,n2]=arr2;
var [n,n2]=[1000, 2000];
console.log(n,n2);

var[n,n2,n3]= arr2;
console.log(n,n2,n3);

var[n,n2,n3=0]= arr2;
console.log(n,n2,n3);

var[, , x]=[1,2,3];
console.log(x);

var[n,n2,[n3,n4]]=[1,2,[3,4]];
console.log(n,n2,n3,n4);

var[n,n2, ...n3]=[1,2,3,4,5,6];
console.log(n,n2,n3);
//
var a=1;
var b=2;
[a,b]=[b,a];
console.log(a,b)
    </script>

객체분해할당2객체

    <script >
//객체의 분할 할당
//1. 일반적인 객체 사용법
var obj={x:100,y:200};
var n = obj.x;
var n2=obj['y'];
console.log(n,n2);

//2.객체 분해(이름의 동일)
var{x,y} = {x:1000, y:2000};
console.log(x,y);

var{x,y2}={x:1000, y:2000};
console.log(x,y2);

//3. default value
var {x, y2=0}={x:1000, y:2000};
console.log(x,y2);
//4. 뱐수명의 변경
var{x:n, y:n2}={x:1000, y:2000};
console.log(n,n2);


    </script>

---

객체분해할당3파라미터 중요!!!!! ❗❗❗❗❗❗❗

 <script > 
    function a([x,y]){
        console.log("in function : ",x,y);
    };
    a([10,20]);
    a([10]);

    //2.배열 파라미터
    function a2([n,n2,n3=0]){
        console.log("in function: ",n, n2,n3);
    };
    a2([10,20]); //10,20,0

    //3. 객체 파라미터 중요!!!!!!!!!!!
    function b({n,n2=0}){
        console.log("in function b:  ",n,n2);

    };
    b({n:99, n2:88}); //99,88
    b({n:99, n10:88}); //0
    
    </script>

template리터럴

    <script>
//1.
let s1="hello";
let s2 ='hello';
let s3=`hello`;

console.log(s1,s2,s3);

var name ='hello2';
var s ="<table> <tr>\<td>"+name+
    "</td>\</tr>\</table>";
console.log(s);
 var s= `<table>
    <tr>
    <td>${name}</td></tr>
    </table>`;
    console.log(s2);

    </script>

---

함수1생성방법

    <script >
        //함수작성방법
        //1. 함수 선언식(이름있는 함수)
function fun(){
    console.log("fun() 호출");
}
fun();
//2. 함수 표현식(익명함수)
var fun = function(){
    console.log("fun()호출");

}
fun();


    </script>

함수2일급객체_콜백

 <script >
        //함수특징(일급객체)
        
function fun(){
    console.log("fun() 호출");
}
var x= fun; //1.변수에 저장가능
x();
//2. 함수의 리턴값으로 사용가능
function fun2(){
    return fun;
}

var x = fun2();
x();
////////////////////////////
function fun3(x){
    x(); //3.함수의 인자값으로 사용가능
}
fun3(fun);
//////////

//응용; 콜백함수
function call(x){
    x();
}
function callback(){
    console.log("callback()");

}
function callback2(){
    console.log("callback()2");
    
}
call(callback);
call(callback2);
    </script>

함수3_default_rest

<script >
    //다양한 함수 형식
    //1. 기본함수 특징 => 인자 갯수가 달라도 됨
function fun(n,n2,n3){
    console.log(n,n2,n3);
}
fun();
fun(1);
fun(1,2);
fun(1,2,3);
//2.defult
function fun2(n=-1, n2=-2, n3=-3){
    console.log(n,n2,n3);
}
fun2();
fun2(1);
fun2(1,2);
fun2(1,2,3);
//3. restParameter
function fun3(n,n2, ...rest){
    console.log(n,n2,rest);
}
fun3(1,2,3,4,5);
fun3(1,2,(3),4,5);
    </script>

 

---

 

중첩, 애로우

4중첩함수

 

    <script>
//중첩함수의 사용
//1. 중첩함수 선언식

function x(arg){
    function y(n){
        return n*10;
    }
    return y(arg);
}
//외부에서 접근방법
var result = x(3);
console.log(result);
///////////
//2. 중첩함수 표현삭
var a = function(arg){
    var b = function(n){
        return n*100;
    }
    return b(arg);
}
var result2 = a(2);
console.log(result2);
////////////////////
//3. 은닉화
var k = function(){
    var d= 10;
    var k2= function(){
        return d*2;
    }
    return k2();

}
console.log("k() 호출: ",k());




    </script>

arrow

    <script >
        //arrow
//1.파라미터 없고 리턴값 없는 함수
function fun(){
    console.log("fun()호출");
}
const x=()=> {console.log("arrow-fun()");};
const x2=()=> {console.log("arrow-fun()");};
//처리 코드가 한줄인 경우 () 생략
x();
x2();
//////////////////
//2.파라미터 없고 리턴값 없는 형식
function fun2(n,n2){
    console.log("fun2() " , n,n2);
}
const x3 = (n, n2)=> console.log("arrow-fun2: ",n,n2);
x3(1,2);
////////////////////
//3. 파라미터 없고 리턴값 있는 형식
function fun3(){
    return 100;
}

//return 생략가능
const x44 = ( )=> {return 'aaa'+100; };
const result = x44();
console.log(result);
const x4= () => 'arrow-fun3 : '+100;
const result2 = x4();
console.log(result2);
console.log(x4());
////////////////////
//4. 파라미터 있고 리턴겂이 있는 경우
function fun4(n,n2){
    return n*n2;
}
const x5=(n,n2) => n*n2;
console.log("fun4 : ",x5(10,2));
/////////////
//5.
function fun5(n,n2){
    return n * n2;

}
const x6 =(n,n2)=> {
    console.log(n,n2);
    return n*n2;
};
console.log("func6: ", x6(1,2));

////////////////////
//주의할 점 : arrow 함수는 this 바인딩 안됨,
//arrow 함수에서 this 는 window 객체임 
//따라서 객체의 메서드를 생성할 때에는 
//사용하지 않도록 한다
var user= {
    n:999,
    b:function(){
        console.log(this, this.n); // n=999
    }, 
    c:() => console.log(this, this.n) //window 갹체 , undifined
}
user.b();
user.c();

var user2 ={
    username:"홍길동",
    getUsername: function(){
        return this.username;
    },
    getUsername2:()=> this.username
}
console.log(user2.getUsername());
console.log(user2.getUsername2());//unde

const x33 = x=> console.log(x);
x33(100);
//const x34 = x2=> console.log(x,x2);

</script>

클래스

    <script>
class Person{
    setName(name){
        this.name=name;
    }
    setAge(age){
        this.age =age;
    }
    getName(){
        return this.name;
    }
    getAge(){
        return this.age;
    }
}//end class
var p = new Person();
p.setName("홍길동");
p.setAge(10);
console.log(p.getName())
console.log(p.getAge)


    </script>