Promise는 콜백지옥 현상을 해결하기 위해 등장한 패턴입니다! Promise가 나오기 전까지는 콜백이 중첩될 때마다 복잡해지고 가독성을 해지는 일이 많아져서 콜백지옥에 빠지는 현상이 많았습니다. 이런 문제를 해결하고 또 비동기 작업을 조금 더 편하게 처리할 수 있도록 도입되었습니다. 기존 비동기 처리(콜백 지옥) 파라미터로 n을 받아 setTimeout으로 5번에 걸쳐 1초마다 1씩 더하여 출력하는 코드입니다. 코드의 깊이가 너무 깊어 가독성이 좋지 않고 복잡합니다. function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; //클로저 console.log(increased); if (callback) { c..

이번 게시물에서는 Map과 Set이 특정상황에서 유용하도록 추가된 메소드에 대해 이야기해보겠습니다! Map이 무엇인지 잘 모르겠다면 자바스크립트 배열 내장함수에 설명해두었으니 참고해주세요 :) javascript #10. 배열 내장 함수 실무에서 많이 쓰이는 배열 내장 함수!! 배열을 다루어 써야할 때 유용한 내장 함수에 대해서 알아보겠습니다! forEach - for문을 대체하는 함수 //for문 const superheroes = ['아이언맨', '캡틴 아메리카', dvlpseo.tistory.com Map Map 객체는 object를 변형하여 만든 것이라 Object와 상당히 유사합니다. Map은 Object와 달리 넣은 순서가 기억되며 키가 문자열이 아니어도 가능합니다. var map = new ..

구조분해할당이란 비구조화라고 생각하시면 되는데, 객체나 배열을 분해하는 것입니다! 기존 코드 배열 해체 var array = [1, 2, 3]; var a = array[0]; var b = array[array.length - 1]; console.log(a); // 1 console.log(b); // 3 구조 분해 할당을 사용하지 않은 경우에는 배열의 위치를 각각 다 선언해준 뒤 호출하고 있습니다. 객체 해체 var obj = { e: 'Eeee', f: { g: 'Gee' } }; var e = obj.e; // 'Eeee' var g = obj.f.g; // 'Gee' 객체의 값들을 또 다시 변수로 선언해주고 있습니다. 구조 분해 할당 코드 배열 해체 const [c, ,d] = [1, 2, 3..

이번 포스트는 템플릿 문자열에 대해서 가져왔습니다! 템플릿 문자열?? 템플릿 문자열이란 미리 준비되어 있는 틀 안에 문자열을 넣는 것입니다. 이렇게 이야기하면 이해가 안되시죠? 바로 코드를 보여드리겠습니다. 기존문자열 var a = 3; var b = 'hi'; var object = { c: 'friends' }; var string = b + ', my ' + a + ' ' + object.c; // 'hi, my 3 friends' 기존에 문자열을 만들 때에는 +와 따옴표를 사용하고~ 띄어쓰기도 고려해야하고~ 복잡한 방식으로 문자열을 만들었습니다. 템플릿문자열 const string2 = `${b}, my ${a} ${object.c}`; 되게 간단해졌습니다! 따옴표 대신 ` 백틱을 사용하였고 문자..

ES6 때 자바스크립트에 화살표 함수가 추가되었습니다! 기존 함수 코드 var object = { name: 'Zero', friends: ['One', 'Two', 'Three'], alertFriends: function() { var self = this; this.friends.forEach(function(friend) { alert(self.name + ' and ' + friend); }); } }; object.alertFriends(); // 세 번 알림 function(매개변수){} forEach문 안에서 this가 바뀌기 때문에 미리 self에 object의 this를 저장해서 활용했습니다. 화살표 함수 코드 const object2 = { name: 'Zero', friends: [..

ES6에서 자바스크립트의 객체가 변경되었다는데 자바스크립트에 대해 공부하고있는데 차근차근 자바스크립트 변화에 대해서도 살펴보려합니다! 변화 전 코드 var sayYeah = function() { alert('Yeah'); }; var a = 1; var b = 'Wow'; var object = { sayHello: function() { alert('hello'); }, sayYeah: sayYeah }; object[a + 3] = 'four'; object['say' + b] = function() { alert('Wow'); }; 이름 : function(매개변수){내용} 참초하는 변수의 이름과 속성의 이름이 같은 경우 {이름: 이름} 두번씩 씀 변화 후 코드 const a = 1; const ..

먼저 ECMAScript란 자바스크립트의 결점을 보완하기 위해 ECMA라는 단체에서 결점을 보완한 표준 자바스크립트입니다! ECMAScript도 자바스크립트라고 봐도 무방합니다ㅎㅎ ES6는 2015년에 결점을 보완하고자 나온 자바스크립트 버전으로 const와 let부터 얘기해보겠습니다. var VS const와 let 자바스크립트에는 변수를 선언할 때 var뿐이었는데 const와 let이 추가됐습니다. var과의 가장 큰 차이점은 const와 let은 해당 블록에서만 접근할 수 있는 블록스코프를 따르고, var은 함수스코프라서 블록과 상관없이 접근할 수 있습니다. if (true) { var x = 3; } console.log(x); // 3 if (true) { const y = 3; } consol..