본문 바로가기

언어

(28)
Objects.entries(arr) 파이썬의 enumerate와 비슷한 자바스크립트 함수 바로 entries! nums = [7,2,5,3] console.log(Object.entries(nums)) // [ ["0", 7], ["1", 2], ["2",5], ["3", 3] ] 다음과 같이 Object.entries(nums))를 콘솔에 찍으면 객체형태의 key value로, key에는 스트링값이 넣어져 리턴된다. 또한 다음과 같이 쓸 수 있다. for (const [index, ele] of nums.entries()){ console.log(index, ele) } // 0 7 // 1 2 // 2 5 // 3 3
객체 순회 객체 순회는 단순 for문, for..of문으로는 되지않는다. 오로지 for..in문으로만 가능하다. function solution(participant, completion) { const name_dict = {}; for (let name of participant){ if (!name_dict[name]){ name_dict[name] = 1; continue; } name_dict[name] += 1; } completion.forEach((name) => name_dict[name]--); for (name of name_dict) if (name_dict[name]) return name; TypeError: name_dict is not iterable function solution(p..
map() vs foreach() map과 foreach는 모두 각 배열 요소를 돌며 주어진 콜백함수 조건 대로 조종하는 함수이다. 이는 함수형 프로그래밍을 지향한다 ( 변수 사용 억제, 조건문과 반복문 안보임.) 그렇다면 무엇이 차이가 날까? 결론 : foreach()은 결과값이 아닌 , undefined를 return한다. 그래서 무언가 값을 도출하고 싶다면 따로 배열을 만들어 push해줘야한다. foreach() arr.forEach(callback(currentvalue, index, array]])[, thisArg]) currentValue처리할 현재 요소. index (Optional)처리할 현재 요소의 인덱스. array OptionalforEach()를 호출한 배열. thisArg Optionalcallback을 실행할 ..
closure 자유변수 참조하는 함수를 리턴하는 함수를 클로저(closure)라고 한다. 이 자유변수를 참조하는 함수는 선언 될 때 환경을 [[Environment]] 프로퍼티에 저장한다. 그렇다면 closure의 목적은 무엇일까? 자바 등의 다른 객체 지향언어를 써보면 클래스를 활용하며 private protected public등의 지정자를 만난 적이 있을 것이다 (자바스크립트는 클래스를 지원하긴 하나 정확히는 prototype을 활용해 객체지향을 준수한다.) 하나의 변수에 이곳 저곳에서 참조를 하여 쓰고 값의 변경을 준다면 이는 큰 문제가 될 소지가 있다. 그렇기에 closure는 변수를 숨기기에 목적이 있다. 예시를 들어본다. function Character(name){ this._name = name; } ..
Array Destructing, Object Destructing let state = { items: ['item1', 'item2', 'item3', 'item4'] } const { items } = state; // ['item1', 'item2', 'item3', 'item4'] 할당받는 변수에 왠 객체가 있지 ? 어떻게 동작하지 궁금했는데, value값이 할당됨을 확인할 수 있었다. let options = { title: "MVC", width: 100, height: 200 }; let {title, width, height} = options; alert(title); // MVC alert(width); // 100 alert(height); // 200 왼쪽에 기재한 title, width, height 순서대로 options 객체의 value가 할..
es6 화살표 함수 특징 3가지 + reduce함수 결론 : 이름, this, argument 가 없다! 1. 이름 -> 화살표 함수는 기명함수가 없다! 항상 익명함 수! 2. this -> 앞선 this포스팅에 적었듯이 this가 화살표 함수에서 쓰이면 부모를 가리킨다! 3. arguments -> arguments속성이 없다! arguments는 값들을 배열 형태 담고있는데 화살표 함수 사용시 정의되지않았다고 에러를 뿜는다. 기능 유의 : 함수 본문에 return문만 존재할 경우, return 생략 가능 함수 body에 return문만 존재할 때 return을 생략하고 쓸 수 있다. 이때 중괄호({})도 생략해서 써야 정상 작동된다. // 정상 작동 function solution(numbers) { return 45 - numbers.reduce( ..
IIFE 즉시실행함수 와닿는 특징. const IIFE = (function (){ let num = 0; return num } ()) console.log(IIFE); // 0 const noIIFE = function(){ let num = 0; return num; } console.log(noIIFE); //ƒ (){ // let num = 0; // return num; //} 즉 IIFE는 한번 실행하고 소멸되기에 함수 원형을 찍으면 return값만 남더라...
script type = "module" 카페 매뉴 앱 만들기 HTML을 살펴보는데, 굳이 script태그에 script type = "module"을 기재하는 것을 보았다. 모듈은, 프로젝트 규모가 커졌을 때 파일을 분리할 때 JS파일 하나를 하나의 모듈이라 했다. 그렇기에 그냥 미기재 또는 text/javascript와 module 차이가 무엇일까? 궁금했다. 먼저 가장 큰 차이는 export import 를 하지 못한다. 브라우저에서 import ,export 지시자를 사용하려면 같은 속성이 필요했다. 모듈은 자신만의 스코프를 갖는다. 그렇기에 이를 공유하려면 위의 import, export를 활용해야했다. 항상 엄격 모드로 실행(use strict)되었다. 선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 내뿜었다. 직접 겪어 본 ..