객체의 비구조화 할당문 구조화 구조화란 인터페이스나 클래스를 사용해 관련된 정보를 묶어 새로운 타입으로 표현하는 것을 말한다. 비구조화 구조화된 데이터는 데이터의 일부만 사용해야 할 때가 있는데 아래와 같이 구조화된 데이터를 분해하는 것을 비구조화라고 한다. 잔여 연산자/ 전개 연산자 ESNext 자바스크립트와 타입스크립트는 점을 연이어 3개 사용하는 ...연산자를 제공하는데 사용하는 위치에 따라 잔여 연산자 혹은 전개 연사자라고 부른다. Web/javascript 2022.10.05
보자마자 유용하다고 느끼는 javascript 문법 보통 프로젝트를 하면 null,undefined, "", 0 등을 체크할 때 새로운 공통 유틸 함수를 만들어서 체크하는데 아래 문법을 잘 알고 있으면 object의 value값을 빈값 체크 시에도 runtime error 없이 체크할 수 있다. 1. && and함수 console.log(undefined && 'ㅁㅁㅁ') => undefined console.log(null && 'ㅁㅁㅁ') => null console.log(0 && 'ㅁㅁㅁ') => 0 console.log("" && 'ㅁㅁㅁ') => "" console.log(false && 'ㅁㅁㅁ') => false console.log(true && 'ㅁㅁㅁ') console.log('aaa' && 'ㅁㅁㅁ') => 'ㅁㅁㅁ' 2. || or.. Web/javascript 2022.06.14
array.map 안에서의 async/await 사용하기 아래 코드와 같이 한 리스트 안의 데이터를 map으로 loop 돌면서 각 item의 데이터를 가지고 박스번호를 가지고오는 api를 호출하였다. 잘 될것이라고 예상하였으나 async/await을 사용하였음에도 불구하고 기다리지않고 바로 다음 loop를 수행하는 바람에 _inRow라는 데이터에 boxNo가 undefined로 찍히는 현상이 발생하였다. breakpoint를 찍어보면서 디버깅 해보니 await문을 기다리지 않고 map을 빠져나가는 바람에 boxNo에 그렇게 찍힌것으로 확인되어 구글링을 해보았다. body.map(async (item) => { ------생략------- } else if (msg == '박스 분할') { //2개담기 const res = await OrderReleaseSer.. Web/javascript 2022.05.01
함수 선언식과 함수 표현식 그리고 화살표 함수 함수 선언식 - Function Declarations function test() { return 'function declarations' } test(); 함수 표현식 - Function Expressions var test = function () { return 'function expressions'; } test(); 두 방식의 차이점 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다. console.log(test()) //@@@@ 정상 출력 console.log(test2()) // undefined 뜨고 TypeError 발생(TypeError: test2 is not a function) function test() { console.log('@@@.. Web/javascript 2021.08.02
querySelector와 querySelectAll 개발 소스 중 qeurySelector와 qeurySelectAll이라는 함수가 있길래 궁금해서 검색해보니 getElementById, getElementsByClassName 과 같이 DOM 을 다루는 함수라는 공통점이 있었다. 하지만 꽤 여러가지의 차이점이 있었는데 아래와 같은 차이점이 있었다. getElementById querySelector id를 가져옴 class / id 모두 적용 가능하며 class를 사용하여 다수의 element를 가져올 시 가장 상단의 element 하나만 return함 속도가 빠름 속도가 느림 공통적으로 HTML element를 return함 getElementsByClassName querySelectorAll HTMLCollection을 리턴 NodeList를 리턴.. Web/javascript 2021.05.10
leetcode - 103. Binary Tree Zigzag Level Order Traversal BFS (breadth first search) Input: root = [3,9,20,null,null,15,7] Output: [[3],[20,9],[15,7]] /** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (val===undefined ? 0 : val) * this.left = (left===undefined ? null : left) * this.right = (right===undefined ? null : right) * } */ /** * @param {TreeNode} root * @return {number[][]} */ var zigzagLevelOrder = f.. 알고리즘 2021.03.24
Leetcode - Kth Largest Element in an Array(215) JS heap priority queue - javascript 로 heap 우선순위 큐 알고리즘 풀이 /** * @param {number[]} nums * @param {number} k * @return {number} */ var findKthLargest = function(nums, k) { if(nums.length == 1) { return nums[0]; } //k가 1일 때 nums Array에서 바로 max값 return if(k === 1) { var maxNum = 0; return nums.reduce((bef, cur) => { console.log(bef + ", " + cur) return max = Math.max(maxNum, bef, cur) }); } var queu.. 알고리즘 2021.03.05
Array - map과 reduce 1. map => 배열.map((요소, 인덱스, 배열) => { return 요소 }); map은 해당 Array를 반복적으로 돌면서 각 요소들에 대해 callbackFunc를 정할 수 있다. 새로운 객체가 생성되어 리턴되고 기존 배열의 크기를 그대로 반환하기 때문에 아래 코드와 같이 조건에 맞지 않을 경우 해당 인덱스의 값은 undefined를 리턴하게 된다. var mapTest = [1,2,3,4,5] var tmp = mapTest.map(v => { if(v>3){ return v } }) //크기를 그대로 반환 //[undefined, undefined, undefined, 4, 5] 2. reduce => 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, .. Web/javascript 2021.02.02
$(document).ready, $(window).load 순서 : $(document).ready 실행 → $(window).load(=window.onload) 실행 $(document).ready는 jQuery에서 사용되는 이벤트로서 DOM을 생성 후 수행된다. $(window).load는 모든 리소스(외부 리소스, 이미지 등등)가 로드된 후 수행된다. window.onload javascript의 내장 함수로서 $(window).load와 같은 기능을 한다. window.onload는 중복이 허용되지 않으며 중복될 시에 가장 아래에 있는 함수가 수행된다. 이러한 문제를 해결하기 위해 jQuery에서 window.onload를 제공한다. [출처] $(document).ready, $(window).load 순서|작성자 2JM Web/javascript 2021.01.28
javascript - 호이스팅(hoisting) 호이스팅 - 함수 내의 모든 선언들을 해당 함수 최상단으로 끌어올려 선언하는 것 {}블럭 안에서 유효 자바스크립트 parser가 함수 실행 전 한번 훑어 선언부를 모두 최상단으로 끌어올림 메모리 상의 변화는 없다. 최대한 호이스팅이 일어나지 않도록 함수 선언을 let, const 와 같이 선언한다. 함수 선언문과 함수 표현식 에서의 Hoisting 함수 선언문 function print() { var result = inner(); console.log('javascript - ' + result); function inner() { return 'hoisting' } } print(); // 'javascript - hoisting 정상 출력 함수 표현식 function print() { var res.. Web/javascript 2021.01.26