✨ Destructuring 문법📍 Array 안에 있는 데이터 변수에 담기var [a,b,c] = [2,3,4];이렇게 비슷한 모양으로 변수 선언하면 변수 생성된다.✍ 디폴트값 할당하기var [a,b,c] = [2,3];이렇게 갯수가 안 맞으면 c에는 undefined가 할당된다.var [a,b,c = 5] = [2,3];이렇게 디폴트를 할당해서 c에 5값을 할당해줄 수 있다.📍 Object 안에 있는 데이터 변수에 담기var { name : a, age : b } = { name : 'Kim', age : 30 };이런식으로 a,b각각에 Kim, 30을 할당할 수 있다. name:name 이렇게 쓰고 싶다면 아래와 같이 생략해서 작성할 수 있다. 앞에서 array에 디폴트 값을 할당해줬던 방식으로..

✨ Object.create()ES5 방식 prototype, class 등이 나오기전에 쓰던 문법var parent = { name : 'Kim', age : 50 };var child = Object.create(parent);console.log(child.age); //50이렇게 작성해 child 오브젝트가 parent를 prototype으로 두게 된다. → 이런 방식을 사용해 상속을 구현하기도 함var parent = { name : 'Kim', age : 50 };var child = Object.create(parent);child.age = 20;console.log(child.age); //20이런식으로 오브젝트의 속성을 바꿀수도 있다. → child.age를 꺼낼때, child의 ag..

✨ default 파라미터function add(a, b = 10){ console.log(a + b)}add(1); //11이런식으로 작성했을 때, 파라미터를 하나만 줬을 경우, 디폴트로 설정해준 파라미터인 10이 b에 할당되어 콘솔창에 11이 출력된다.function add(a, b = 2 * 5){ console.log(a + b)}add(1); //11이런식으로 연산자도 가능하다.function add(a, b = 2 * a){ console.log(a + b)}add(3); //9이런식으로 다른 파라미터와 연산도 가능하다.function f(){ return 10 }function add(a, b = f() ){ console.log(a + b)}add(3);//13이런 방식으로 디폴트..

✨ 웹개발 기능대회 예제 구현앞에서 공부했던 것들을 바탕으로 직접 쇼핑몰 사이트를 구현해보자먼저, 큰 틀은 다음과 같다.html 영긔네 장난감 가게 상품명 : 가격 : --> 장바구니 (드래그 가능) 최종가격 : 구매하기 cssbody { background: #f4f4f4;}button { background: black; color: white; border-radius: 3px; border: none; padding: 5px 12px 5px 12px;}img { width: 100%; ..

✨ Hoisting변수, 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가 가장 먼저 해석function func(){ console.log('hello'); var name = '영긔'; }위와 같은 코드가 있을 때, 자바스크립트는 다음과 같이 해석함.function func(){ var name; console.log('hello'); name = '영긔'; }변수의 선언부분을 강제로 변수의 맨 위로 끌고 간다. console.log(name); var name = '영긔'; console.log(name);이런 코드가 있다면 결과가 undefined, '영긔'라는 결과가 출력된다. var name; console.log(name); name = '영긔'; conso..

✨ thiswindow 뜻함⒈ strict mode일때IE 10버전 이상에서 'use strict'라고 적어주면 strict mode로 자바스크립트 작성 가능 이 모드에서는 var 없이 변수 선언하는 행위 방지해준다. 이때 this를 함수안에서 부르면 undefined라는 값으로 강제 지정⒉ Object 자료형 내에서var obj = { data : 'Youngki', func : function(){ console.log(this) } }obj.func();위와 같이 작성할 경우 this 출력시킬 경우 {data:'Youngki',func:f} 이런식으로 출력됨 메서드 안에서 this 쓰면 this는 메서드를 가지고 있는 오브젝트를 뜻한다.⒊ constructor 안에서constructor 안에서 ..

🔎 position: sticky스크롤 할때 화면에 나오게 되면 고정시킬 때 사용위와 같은 화면으로 이미지가 나올때, 이미지를 고정시키도록 코드를 작성했다. html Javascript with young-ki  css .grey { background: lightgrey; height: 2000px; margin-top: 500px; } .text { float: left; width: 300px; } .image { float: ri..

✨ AJAX서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고 받을 수 있게 도와주는 간단한 브라우저 기능✍ fetch로 AJAX 요청하기fetch('https://xxx/price.json') .then(res => res.json()) .then(function(data){ console.log(data) }) .catch(function(error){ console.log('실패함') });서버와 데이터를 주고 받을 때는 문자만 주고 받을 수 있다! array, object를 전송할 수 없는데, 가능하게 하려면 JSON으로 바꿔 전송해줘야 함 ex. { "count" : 5 } 따라서 위의 fetch로 AJAX를 요청할 때는 res => res.json() 이러한..

✨ Array, Object 자료형🔎 Array 자료형var me = ['영긔', 5, 'computer'];me[1] = 10;array는 이런식으로 정의, 수정 가능🔎 Object 자료형var me = {name:'영긔', num:5, major:'computer'};console.log(me['name']);console.log(me.name);me['name'] = '긔긔';[]를 사용하거나 .을 사용하여 데이터를 출력할 수 있다.🔎 Array, Object의 차이array는 순서개념이 있고, object는 순서개념이 없음 따라서 array를 사용하면 sort(), slice(), push()(->제일 뒤에 넣어줌)등을 사용할 수 있다.📋 Object를 사용해 html 요소 바꾸기 ..