본문 바로가기

Frontend Study - 2/Javascript

 (16)
Javascript : 자료구조 중 Set & Map. Size와 Delete 사용이 🍡 Set Set는 값들의 집합이다. 특징은 순서가 없고 중복이 불가하는 것이다. 특정 값은 Set내에서 하나씩만 존재하게 된다. 배열 내의 중복을 없애기 위해 쓰이곤 한다. 생성 let mySet = new Set([1,2,3]); //배열 형식으로 넣어주어야 한다. //기본 숫자나 스트링 값은 들어가지 않는다. new Set(1,2,3) console.log(item)) // 1,2,3 순회 가능. mySet.add(4) // 1,2,3,4 추가된다. 중복요소를 추가하면 무시된다. mySet.delete(4) // 1,2,3 삭제된다. mySet.clear() // 모두 삭제 배열과 set의 비교 배열과 set은 상호 변환된다. new Array(mySet) 으로 배열 ..
Javascript : 일반함수와 화살표함수의 차이. Arrow function (화살표 함수)는 ES6에서 추가되었다. 일반 함수 표현식 const expression = function() {} 화살표 함수 const arrow = () => {} 화살표 함수는 표기면에서 간편하다. 기존 함수에 비해 비교적 간단하게 사용된다. 일반 함수와 화살표 함수 둘은 크게 세가지 차이점이 있다. 첫째로 this 바인딩에 관한 것이다. 자바스크립트에서 함수를 호출하면 함수 내부에 this 객체가 자체적으로 전달된다. 이 this가 가리키는 값이 있을텐데, 그 가리키는 값과 this를 연결하는 것이 this 바인딩이다. 일반 함수 일반함수에서는 함수를 선언할 때 this에 바인딩할 객체가 결정되는 것이 아니라 (정적), 함수 호출 (실행) 할 때 함수의 호출에 따라 ..
Javascript : 함수 선언식과 함수 표현식 비교 자바스크립트에서 함수를 생성하는 방법 중 함수 선언식, 함수 표현식을 비교해 보려고 한다. 1. 함수 선언식 function counter(x) { return x+1 } 2. 함수 표현식 const counter = function(x) { return ( x+1 ) } - 함수 선언식과 함수 표현식의 차이점. 생김새가 비슷하지만, 표현식의 경우 함수를 변수안에 저장을 해두었다는 점에서 다르다. 표현식은 일반적으로 선언한 변수명을 함수명으로 대체한다. 주요한 차이점은 호이스팅이다. counter(3) //4 newCounter(3) // error function counter(x) { return x+1 } const newCounter = function(x) { return ( x+1 ) } 코드..
Javascript : 동기와 비동기 (4) Async & await Async & await 은 기존 비동기 처리방식인 콜백함수, 프로미스의 단점을 보완한다. 사용하기 편리하고 가독성이 좋다. Async & await 은 비동기적인 코드를 더 쉽게 절차적으로 이용할 수 있게 한다. function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환한다. async function test() { return "hi" } test().then(alert) // hi 프로미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다. return 값이 Resolve( ) 안의 값이 된다고 생각하면 된다. 직접 프로미스를 써줄 수 도 있는데, 결과값은 같다. async function test() { ..
Javascript : 동기와 비동기 (3) Promise Promise. 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 무겁고 오래 걸리는 일을 비동기적으로 처리할 때 유용하게 쓰인다. 프로미스는 어떤 비동기적인 일을 실행했을 때 그 일이 끝난 이벤트, 즉 끝났을 때를 알려준다. 비동기적으로 수행한 결과값 (성공 or 실패) 을 알려주는 오브젝트이다. 앞선 콜백 함수 파트에서는 위 과정을 콜백함수를 통해 진행하였다. 다만 복잡한 작업의 경우 콜백지옥이 발생하고 가독성과 유지보수 측면에서 bad했다. Promise를 통해서 해결 가능한 부분이다. 프로미스는 생성되고 종료될 때까지 세가지 상태를 가진다. - Pending (대기) : 비동기 처리 로직이 완료되지 않은 상태 - Fulfilled (이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반..
Javascript : 동기와 비동기 (2) 콜백함수 동기 사용, 비동기 사용 콜백함수란 다른 함수에 인자로 쓰이는 함수를 말한다. 그 다른 함수의 명령에 따라 즉시 실행될 수 도 있고(동기), 나중에 실행될 수 도 있다(비동기). 아래는 동기적으로 쓰이는 콜백함수와, 비동기적으로 쓰이는 콜백함수에 대한 예시. 동기적예시 function sayHello() { console.log("hello") } function firstMeeting(callback) { callback(); console.log("nice to meet you"); } firstMeeting(sayHello) // hello nice to meet you - firstMeeting(sayHello) 실행 - firstMeeting 함수를 보니 (callback) 파라미터값이 있고, 이 callback() 에..
Javascript : 동기와 비동기 (1) 자바스크립트 엔진과 Web Api. 비동기와 멀티쓰레드. 동기적 언어 : 한번에 하나의 일을 처리한다. 비동기적인 언어 : 여러가지 일을 동시에 처리한다. 자바스크립트는 기본적으로 동기적인 언어이다. 싱글쓰레드로서 한번의 하나의 일만 처리할 수 있다. 한번의 하나의 일만 처리할 수 있기 때문에 a -> b -> c의 명확한 실행 순서가 있고, 순차적이라는 점에서 결과 예측이 용이하다. 하지만 한번에 여러 일을 수행 할 여력이 있음에도 하나씩 처리하는 경우가 생기기 때문에 리소스의 낭비, 즉 비동기적 구조에 비해 효율적으로 동작하지 못할 수 있다. 이런 점을 호스트환경 (Web, Node js) 에서 제공해주는 api들을 통해서 해결할 수 있다. api 를 이용하면 자바스크립트도 여러가지 일을 동시에 처리할 수 있다. 대표적인 비동기 처리 api로 fetch와 ..
자바스크립트 / for ... of & for ... in 차이점 1. for of for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, Typedrray, arguments 객체 등을 포함) 에 대해서 반복합니다. 객체 데이터 값에 대한 순회. const array1 = ['a', 'b', 'c']; for (const element of array1) { console.log(element); } // expected output: "a" // expected output: "b" // expected output: "c" for (variable of iterable) { statement } variable : 각각의 순회 요소들은 각각 변수에 할당됩니다. 변수들은 const, let을 통해 선언될 수 있습니다. iterable..

티스토리툴바