본문 바로가기

JS

(22)
JavaScript| 함수, 함수 정의, 호출, 그리고 콜백 함수 이런식으로 변수 + 다른변수를 해야할 때, 변수만 가지고서는 같은 작업을 할때 계속 변수를 입력해줘야하는 번거로움이 있다. 이럴 때, 사용하는 것이 바로 함수! 반복 수행할 식을 적어서 이름을 정해준다. 이때, 이름도 간결하지만 의미가 있게 설정해주는 것이 좋다. 이것을 함수라고 하는데 JS에서 함수라고 알 수 있도록 function을 사용해서 선언해주는 것. function add(a, b) { return a + b; } 풀어서 해석하자면, a와 b를 받아와서 두 개를 더하는 식을 add라는 이름의 함수로 선언한다! 여기까지는 정의만 한 것이다. 이것을 이용해서 호출해 보자면, sum이라는 변수는 add함수에 3, 4의 인자를 전달해주는 것. const sum = add(3, 4); 그러면 add함수..
JavaScript| 변수(primitive) 타입과 object의 차이점 변수 : 데이터를 담는 곳 - 자세한 정보를 담고있는 이름이 좋다. 변수를 선언하면 그 변수를 위한 공간이 생긴다. 그 공간안에는 데이터가 담겨있다. 여기서, number2의 변수 데이터 값을 변경하면 number2만 변경이 된다. number에 있는 값만 복사해서 붙여넣은거라 number에는 영향이 가지 않는다. object 오브젝트는 number, string, boolean, null, undefined를 제외한 모든 것이다. 오브젝트란? 최소한 한 두 가지의 다양한 데이터를 한 곳에 묶어 놓은 것. (배열, 리스트, 함수등 모두가 오브젝트다.) 오브젝트는 적어도 한 두 가지 이상의 큰 데이터가 들어있기 때문에 단순하게 변수를 선언해서 담아 놓을 수 없다. 오브젝트 안에 있는 name과 age의 k..
JavaScript(ES6)| async와 await 그리고 유용한 promise APIs syntactic sugar - 기존에 존재하는것위에 간편하게 쓸 수 있는 api async & await clear style of using promise 1.async 동기적으로 실행이 되면 위 사진 처럼 함수 호출을 인식하고 함수를 읽는데 만약 10초가 걸리는 식이면 10초후에 리턴되고 그 리턴되는 값이 출력되기때문에 만약, 그 뒤에 웹페이지 ui를 표시하는 기능이 있다면 사용자는 10초동안 빈 화면을 보면서 기다려야하는 상황이 발생한다. 때문에 오래걸리는 일은 비동기적으로 처리할 수 있어야 한다. 저번 시간에 비동기로 사용했던것이 promise. Promise에서 resolve나 reject값을 설정하지 않으면 위 사진 처럼 pending상태로 출력이 된다. Promise는 꼭 resolve나 ..
JavaScript(ES6)| Promise 개념/활용 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트. Promise is a JavaScript object asynchronous operation. :자바스크립트안에 내장 되어 있는 오브젝트. :asynchronous(비동기)를 사용할 때 콜백함수 대신 유용하게 쓰임. state: pending -> fulfilled or rejected : 진행중->완료 or 파일을 찾을 수 없거나 네트워크에 문제가 생길때. Producer vs Consumer :데이터를 만들어내는 Producer vs 소비하는 Consumer 1. Producer -when new Promise is created, the executor runs automatically. promise를 만드는 순간, 우리가 전달한 exec..
JavaScript(ES6)|콜백 이해하기 (feat. 콜백지옥) JavaScript is synchronous. :(자바스크립트는 동기적이다.) Execute the code black by orger after hoisting. :(hoisting이 된 이후부터 우리가 작성한 순서에 맞게 하나씩 동기적으로 실행된다는 말) hoisting: var, function declaration :(hoisting이란, var나 function같은 함수 선언들이 자동적으로 제일 위로 올라가는 것) 위 사진 처럼 작성한 순서대로 출력되는 것을 볼 수있다. 이것을 hoisting이라고 함. *비동기적인 실행방법 setTimeout같은 함수를 사용하면 비동기로 가능하다. console.log('2')를 1초뒤에 나타나게 함수를 지정해두면 콘솔에 순서에 상관없이 출력이 된다. set..
JavaScript(ES6)|JSON 개념 정리와 활용방법 HTTP(Hypertext Transfer Protocal)- 클라이언트와 서버를 연결해주는 것. AJAX- 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술. XHR- 브라우저 API에서 제공하는 오브젝트중에 하나. 이것을 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수 있다. fetch()API- 최근 브라우저 API에 추가된 간편하게 데이터를 주고받을 수 있는 것. (ex에서 사용할 수 없음) XML- 마크업 언어중에 하나. (요즘에는 많이 사용하지 않음) JSON(JavaScript Object Notation)- 요즘에 많이 쓰는 브라우저 API. -Object {key: value}로 이뤄져 있음. -텍스트를 기반으로 한 가벼운 언어. -프로그램 언어와 상관없이 대부분의 언..
JavaScript(ES6)|유용한 배열 함수 10가지 Q1. make a string out of array :배열을 스트링으로 출력. A1. join join을 이용해서 배열을 스트링으로 출력한다. 구분자에 아무것도 쓰지 않아도 자동으로 ,로 구분됨. 구분자에 ^을 넣으니 ^로 구분되는 것을 볼 수 있음. Q2. make an array out of a string :스트링을 배열로 출력. A2. split split을 이용해서 배열로 출력한다. ('구분자', 리밋)으로 리밋은 앞에서부터 나오는 값의 갯수를 설정한다. 옵션이기때문에 필수로 작성할 필요는 없다. 반면, '구분자'가 없으면 " "이 안에 모든 값이 출력되기때문에 꼭 구분자를 입력해야 한다. Q3. make this array look like this: [5, 4, 3, 2, 1] :주어진 ..
JavaScript(ES6)|배열,APIs 총정리 Array 1. Declaration 배열을 만드는 (선언하는) 방법. 2번째 방법을 더 많이 씀. 2.Index position const로 배열을 만들고 출력하면 값이 모두 나오고 length를 출력하면 배열 값의 갯수, [0],[1]을 출력하면 인덱스 숫자에 맞는 값이 출력, 배열에 값이 없으면 ([2]) undefined로 출력. 배열의 마지막 값을 출력하려면 length에서 -1을 하기도 함. (인덱스는 0부터 시작하기 때문) 3.Looping over an array -print all fruits 모든 배열을 출력하는 방법에는 세 가지가 있다. a. for방법은 i를 0으로 주고 1씩 늘려가면서 fruits의 값의 갯수보다 같거나 커지면 멈추게 하는방법. b. for of의 방법은 fruit..