전체 글
-
for in / for of 반복문JavaScript ES6 2022. 6. 2. 04:04
for in / for of 반복문과 enumerable, iterable에 대해 알아보자. 자바스크립트의 반복문에는 for문, forEach()반복문 ( Array전용 ), for in 반복문 ( Object전용 ), for of 반복문 ( iterable전용 )이 있다. 첫번째 단순 반복문은, 코드를 여러번 실행할 때 사용하지만, 두번째 반복문들은 Array,Object에서 자료를 꺼낼때 사용한다. 먼저, for in 반복문을 배워보자. var 오브젝트 = { name : 'Kim', age : 30 }; for (var key in 오브젝트) { console.log(오브젝트[key]); } 이렇게 오브젝트에 있는 값을 하나씩 꺼내서 사용할 때 사용한다. var 작명 in 오브젝트 형식을 사용하며,..
-
async / awaitJavaScript ES6 2022. 6. 2. 03:08
Promise가 복잡하면 async 와 await를 쓰면 된다고 한다. 이 문법은 ES8부터 제공을 한다. async function 더하기() {//함수 실행 후에 promise오브젝트가 남게됨 return 1 + 1; } 더하기().then(function(결과){ console.log(결과); }) 이렇게 연산이 끝나면 특정 코드를 실행하고 싶어서 promise를 쓰려했는데, function을 지우고 promise를 쓰기 귀찮으면 함수 앞에다 만 붙일 수 있는 async라는 키워드를 사용할 수 있다. 그러면, 함수가 실행이 되고나서 promise오브젝트가 남게 된다. 그리고, async함수에 return을 쓰면 then에 결과를 확인할 수도 있다. 단점으론, 성공만 사용가능하다. 이제, await을..
-
PromiseJavaScript ES6 2022. 6. 1. 12:12
콜백함수 디자인이 맘에 안들면 Promise를 배워보자. var 프로미스 = new Promise(); 프로미스.then(function(){//프로미스가 성공일 경우 실행할 코드 }).then(function(){//이런 식으로 1번째 할거 2번째 할거 then으로 붙여서 옆으로 길어지지 않음 }).catch(function(){//이건 실패할 경우에도 코드실행 가능 }).finally(function(){//이건 성공이든 실패든 뭔가 일어났을때 실행하는 기능 }) 위처럼 promise 는 성공/실패를 판정하는 기계라고 보면 된다. 그리고, then, catch, finally 같은 키워드를 사용할 수 있다. 근데, then함수는 new Promise로 생성된 오브젝트 뒤에만 붙일 수 있기에, then..
-
동기/비동기와 콜백함수JavaScript ES6 2022. 5. 31. 02:35
자바스크립트는 동기식처리를 한다. 즉, 한번에 코드 한줄씩 차례대로 실행한다. (synchronous) 근데, 비동기(Asynchronous)라는 비동기식처리도 있다. 자바스크립트에선 setTimeout같은게 있다. 비동기식이란 오래걸리는 작업이 있으면 제껴두고 다른거부터 처리하는 방식을 뜻한다. 앞에서 배운 메모리얘기처럼 queue에 들어있다가 stack이 비게되면 stack으로 올라가기 떄문에 stack에 있는 모든 처리를 끝나고 하게 된다. 즉 자바스크립트는 오래걸리는 작업이 나타나면 계속 기다리는 언어가 아니라 웹의 특수성 때문에 잠깐 제껴두고 다른것부터하는 언어이다. 그래서, 자바스크립트에서 순차적으로 실행하려면, console.log(1); setTimeout(()=>{ console.log(..
-
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..
-
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; ..
-
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'이 들어가게 된다..
-
참조 자료형 변수JAVA 2022. 5. 23. 22:07
변수의 자료에는 기본자료형 / 참조자료형이 있다. 기본자료형은 int, long, float, double등이 있고, 참조자료형은 우리가 만든 String, Date, Student등 클래스형으로 변수를 선언하는 것을 의미한다. 기본자료형은 메모리가 정해져 있지만, 참조자료형은 클래스에 따라 다르다. 참조자료형에 대한 예시를 들어보면 한 학생의 학번 / 학생이름 / 국어성적 / 수학성적 / 과목이름 등을 클래스 속성에 모두 담으면 불합리하므로 학생이란 클래스엔 학번 / 학생이름 / 듣는과목들 ex국어과목 수학과목 이렇게 만들고 과목이란 클래스에 과목이름 / 과목성적 이렇게 과목에 대한 클래스를 만들어서 학생클래스에서 필요한 모든걸 속성으로 만드는게 아니라 클래스를 변수로 사용해서 정리할 수 있다. pub..