개발하는 망나뇽 개발하는 망나뇽

JavaScript ES6

• Stack, Queue를 이용한 웹 동작원리

  JavaScript ES6 2022. 5. 31. 02:09

  자바스크립트는 console.log(1+1) setTimeout(function() { console.log(2+2) },1000) console.log(3+3) 이렇게 적으면, 2,6이 콘솔창에 같이 나오고, 1초 뒤, 4가 나온다. 즉, 코드를 위에적든 밑에적은 빠른거부터 실행하게 된다. 왜 그런지 궁금하면, 동작원리를 알아보자. 웹브라우저 내부엔 Stack이란 공간과 Heap이란 공간이 있다. 이런 식으로 Heap에는 변수들이 있고, Stack에서 실행할 때 Heap이란 공간에서 가져와서 쓴다고 한다. Stack은 코드 실행을 하는 곳이다. 근데, setTime같은 코드는 대기실에 넣어놨다가 1초뒤에 Stack에 오게 된다. 이렇게 대기실에 있는 코드는 Ajax요청, 이벤트리스너, setTimeou..

  Read More
• import / export 모듈식 개발

  JavaScript ES6 2022. 5. 30. 23:29

  script파일을 분리해서 사용할 때 보통은 html파일에서 이런 식으로, 사용한다. 하지만, ES6부턴 import / export를 사용할 수 있다. 예를 들면, 이렇게, script태그에 type을 module로 작성하고, import 가져올거 from '경로' 를 적어주면 된다. import의 a는 작명하는 부분이니까 이름은 아무렇게나 쓰면 된다. 근데 모든 내용을 가져오진 않고, 변수같은 것만 가져온다고 한다. library.js에 var a = 10; export default a; 이렇게 a라는 변수를 내보내는 export default 내보낼거 를 적어주면 변수 a를 내보낸다. 만약, 변수 여러개를 내보내고 싶으면 var a = 10; var b = 20; export default a; ..

  Read More
• Destructuring 문법

  JavaScript ES6 2022. 5. 25. 13:50

  우선 arr가 있다. var arr = [1,2,3]; arr은 중요한 자료라 변수에 담아보려고 한다. 그래서 var [a,b,c] = [2,3,4]; 이런 식으로, 모양만 맞춰 변수를 선언하면 변수가 생긴다. 이렇게 직관적으로 변수를 만드는 문법을 destructuring이라고 한다. 만약, array destructuring을 할 때, 몇개를 빼먹으면 var [a,b,c=10] = [2,3] 이렇게 등호로 기본값을 지정할 수 있다. 오브젝트도 가능하다. var obj = { name : 'Kim', age : 30 } 이렇게 오브젝트가 있을때, var {name,age}= {name : 'Kim', age : 30}; 이런 식으로 모양만 맞추면 name이란 변수엔 name: 'Kim'이 들어가게 된다..

  Read More
• getter / setter

  JavaScript ES6 2022. 5. 21. 15:10

  var 사람 = { name : 'Park', age : 30 } 만약, 사람이란 오브젝트에서 age를 꺼내고 싶으면 사람.age 를 하면 된다. 근데, 요즘은 age라는 자료를 꺼내고 싶으면 자료를 꺼내는 법을 만들어서 꺼낸다. (그냥 유행하는 잡기술이라고 함) 내년 age를 알고싶다면, 오브젝트에서 함수를 만들어준다. var 사람 = { name : 'Park', age : 30, nextAge() { return this.age + 1 } } 이렇게 만든 후, 사람.nextAge()하면 31이 나온다. 이처럼 굳이 사람.age + 1을 해도 되는데 nextAge라는 함수를 만드는 이유는 1. 오브젝트 자료가 복잡할 때 이득이며, 2. 자료를 업데이트하거나 수정할 때 이득이다. 예를 들면, setAg..

  Read More
• super과 extends

  JavaScript ES6 2022. 5. 19. 13:49

  class 부모라는게 있을 때 이거랑 유사한 class를 하나 더 만들고 싶으면 extends를 사용할 수 있다. (class를 상속하는 것) 하드코딩해도 되지만, class안에 상속할게 너무 많을 때 사용한다. class 할아버지 { constructor(name) { this.성 = 'Kim'; this.이름 = name; } } //var 할아버지1 = new 할아버지('만덕') class 아버지 extends 할아버지 {//할아버지 속성을 그대로 물려받음 constructor() { this.나이 = 50; } } var 아버지1 = new 아버지(); 이렇게 쓰면 완벽한 것 같지만 에러가 난다. extends해서 만든 class는 this를 안에 못 쓰기 때문이다. super() 다음에 써야한다..

  Read More
• prototype과 constructor말고 상속

  JavaScript ES6 2022. 5. 18. 13:46

  먼저, ES5에서 지원하는 Object.create();라는 문법이 있다. Object.create(프로토타입); 이렇게 작성하면 오브젝트가 하나 남는데, create()안에 적은 프로토타입을 부모로 하는 오브젝트가 남는다. 예를 들면, var 부모 = { name : 'Kim', age : 50 }; var 자식 = Object.create(부모); console.log(자식.age); //50나옴 이렇게, 부모라는 오브젝트를 만들어 name과 age를 넣어준 후, 자식에게 부모의 name, age를 물려받게 하고싶으면, Object.create(부모)를 써서 부모를 프로토타입으로 하게 할 수 있다. 만약, 자식을 그냥 찍으면 아무것도 나오지 않지만, 부모에 name과 age가 있기에 자식.age를 하..

  Read More
• 객체지향 constructor,prototype

  JavaScript ES6 2022. 5. 17. 17:52

  constructor는 object를 생성하는 기계이다. 즉, 마구 복사를 하고 싶을 때 사용한다. 예를 들어, 출석부를 만든다고 생각해보자. //하드코딩은 이럼 var 학생1 ={ name : 'Kim', age : 15 } //function은 함수만들때도 쓰지만 constructor만들때도 씀 (그래서 이름을 대문자로 시작하게함) function 기계() { this.name = 'Kim'; this.age = 15; } var 학생1 = new 기계(); //이러면 object 뽑힘 위처럼 사용하며 function안에 있는 this는 새로 생성되는 object를 뜻한다. 즉, this.name은 새로 생성되는 object의 name엔 Kim을 넣어주세요가 된다. 그래서 학생1이란 변수에 new를 ..

  Read More
• Primitive/Reference Data types

  JavaScript ES6 2022. 5. 17. 02:07

  var 변수 = 'abcd' var 숫자 = 1234 이런 문자와 숫자는 Primitive data type이다 즉, 변수에 값이 그대로 저장된다. 근데, var 어레이 = [1,2,3] var 오브젝트 = {name : 'Kim'} 이렇게, Array, Object는 변수에 값이 저장이 안되고, 변수에 reference가 저장된다. reference는 [1,2,3]이 저기 있다는 화살표이다. reference type의 특징을 알아보자. 복사를 할 때 var 이름1 = {name:'Kim'} var 이름2 = 이름1; 이름1.name = '박'; 이렇게 적으면 이름1은 박으로 변경이 되는데, primitive에선 이름2는 그대로 킴인데, reference에선 이름2도 박으로 바뀐다. 즉, 이름1에 김이..

  Read More