Bang's

알고있으면 좋은 Javascript Tip✨ if 문 if 안에 있는 조건식이 참인 경우 해당하는 if 문을 실행한다. if(조건식){ //조건식이 참인 값이 실행 동작문; } else { // 조건식이 거짓인 값이 실행 동작문; } // 예제 (1) let value = '사과'; let fruit = false; if(fruit){ value = '바나나'; } else{ value = '포도'; } // '포도' 출력 console.log(value); else if 문 if 안에 있는 조건식이 참인 경우 해당하는 else if 문을 실행한다. if(조건식){ 동작문; } else if(조건식){ 동작문; } else if(조건식){ 동작문; } else{ 동작문; } // 예제 (1) const ..

알고있으면 좋은 Javascript Tip✨ for 문 for문은 조건식이 참일 경우에 증감식 구문을 거쳐 명령문 구문을 반복하여 실행한다. 반복문 안에 break 문, continue 문 사용 가능하다. break : for 문과 while 문의 루프에서 벗어나기 위해 사용한다. continue : 반복을 유지한 상태에서 코드의 실행만 건너뛰는 역할을 한다. for(초기화식; 조건식; 증감식;) { 조건이 참인 동안 실행할 명령문 } // 예제 (1) for (let i = 0; i < 10; i++) { // 0 1 2 3 4 5 6 7 8 9 console.log(i); } for in 문 for in 문은 객체의 모든 문자열로 된 키를 반복하여 열거한다. // 예제 (1) const object ..

알고있으면 좋은 Javascript Tip✨ draggable draggable 라이브러리는 지정한 요소를 드래그로 이동시킬 수 있도록 만들어준다. 이때 draggable로 설정된 요소는 position: absolute 속성을 가지게 되며, left, top 속성으로 움직이게 된다. JS에서는 일반 요소의 drag 여부를 판단할 수 없다. 그러므로 드래그의 조건인 마우스 클릭과 움직임 이벤트로 드래그를 구현해야 한다. (1) JQuery에 존재하는 draggable 라이브러리를 자바스크립트로 구현할 수 있다. const $draggable = (target) => { // 마우스를 눌렀을 때 let $isPress = false; // 이전에 위치한 x 값 let $prevPosX = 0; // 이전에..

알고있으면 좋은 Javascript Tip✨ Spread Operator (전개 연산자) Spread Operator(전개연산자)는 ES6의 문법으로, 배열이나 문자열과 같이 반복가능한 객체를 하나씩 펼쳐서 리턴한다. ... 과 같이 점 3개를 붙여서 사용한다. (1) 배열에서 사용하는 경우 (concat 메서드) // 예제 (1) const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; const arrWrap = arr1.concat(arr2, arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arrWrap); // 예제 (2) const arr1 = [1, 2, 3]; const arr2 ..

알고있으면 좋은 Javascript Tip✨ map() 배열을 순회하며 요소마다 callback 함수 적용 후 새로운 배열로 리턴 한다. 쉽게 말해, callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 생성한다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) (1) map() 함수 문법 let items = list.map((txt, id, arr) => { // txt : list를 순서대로 돌면서 나오는 값 console.log('txt : ', txt); // id : 방금 나온 값의 인덱스 console.log('id : ', id); // arr : 현재 반복을 돌고 있는 배열(생략가능..

알고있으면 좋은 Javascript Tip✨ 비교 연산자 자바스크립트는 변수 선언에 자료형이 자유롭기 때문에 연산자의 형태의 구분이 필요하다. (1) == , !== 연산자 console.log(1 == true);//true console.log(1 == '1');//true == , !== 연산자는 자료형을 상관하지 않고 오로지 수치만 비교한다. 쉽게 말해, ==, != 연산자는 비교 과정에서 데이터형을 동일하게 변환한 다음에 비교한다. 양 옆의 값을 비교하기 전에 강제 형 변환을 수행하며, 연산자들을 공통 타입으로 만들고 그 값만 비교한다. (2) == =, !=== 연산자 console.log(1 == true);//true console.log(1 == '1');//true == , !== 연산..

알고있으면 좋은 Javascript Tip✨ 논리 연산자(&&, ||) ||(논리합), &&(논리곱) 연산자는 왼쪽부터 오른쪽으로 평가를 진행 한다. 중간에 평가 결과가 나오면 오른쪽 끝까지 가지 않고 평가 결과를 반환해 버린다. (1) || (논리합) 연산자 true || true; // true true || false; // true false || false; // false 둘 중 값이 하나라도 true가 존재한다면 true로 결과값 반환한다. (2) && (논리) 연산자 true && true; // true true && false; // false false && false; // false 둘 중 값이 하나라도 false가 존재한다면 false로 결과값 반환한다.

알고있으면 좋은 Javascript Tip✨ 콜백 함수 (Callback Function) 콜백함수는 파라미터로 전달받은 함수를 말한다. 파라미터로 콜백함수를 전달받고 함수 내부에서 필요할 때 콜백함수를 호출 할 수 있다. (1) 기존 방식 function add(x, y) { return x + y } function resultFunction(result) { console.log(result) } resultFunction(add(10,20)) (2) 콜백 함수(Callback Function) 방식 function add(x, y, print) { print(x + y) } function resultFunction(result) { console.log(result) } add(10, 20, r..

알고있으면 좋은 Javascript Tip✨ async & await 가장 최근에 나온 비동기 처리 패턴으로, 기존의 콜백함수와 프로미스의 단점을 보완한 문법이다. (1) async 와 await의 사용법은? 함수앞에 async를 붙이면 해당 함수는 자동으로 프로미스를 반환하게 된다. 비동기로 처리되는 부분에 await를 붙이면 해당 프로미스가 끝날때까지 기다린다. (동기식으로 처리) await은 async가 붙은 함수 안에서만 사용 가능하다. (2) async 와 await의 진행 방식은? async을 포함한 함수는 프로미스 객체가 반환되고 async 함수의 return 값은 프로미스의 resolve(성공)값이 된다. async/await는 따로 에러 핸들링 기능이 없어 try-catch()문을 활용해..

알고있으면 좋은 Javascript Tip✨ 프로미스 (Promise) 자바스크립트는 비동기 처리를 위해 콜백함수를 사용한다. 하지만 콜백을 너무 남용하게 되면 우리가 흔히 부르는 콜백 지옥에 빠질 수 있다. 이런 콜백 함수의 단점을 보완하며 비동기 처리에 사용되는 객체를 프로미스 (Promise)라 한다. (1) 프로미스(Promise)를 사용하면 다음과 같은 이점은? 비동기 처리 시점을 명확하게 표현 할 수 있다. 연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연하다. 비동기 작업 상태를 쉽게 확인 할 수 있다. (2) 프로미스(Promise)의 진행 방식은? 프로미스 객체를 생성하여 비동기 작업이 완료되면 성공(resolve)과 실패(reject)에 대한 결과값을 인자 값으로 받으며, ..