Javascript (130) 썸네일형 리스트형 [Javascript] computed property 문법(객체의 key를 변수로 접근하기) 과거, 자바스크립트에서는 객체를 만들 때 정해진 문자열 이름의 속성명을 사용해 왔다. 하지만 ES6 이후로는 computed property를 사용하여 객체를 선언하는 순간 변수 또는 함수를 활용하여 동적인 프로퍼티명을 할당할 수 있게 되었다. 즉, computed property 문법은 자바스크립트 객체의 key 속성명을 표현식(변수, 함수 등)을 통해 지정하는 문법인 것이다. let kk = "id";let obj = { name : "super", [kk] : 123 // computed property}let mm = "rank";obj[mm] = '#1'; console.log(obj) // {name: "super", id: 123, rank: "#1"} 속성이 추가됨 변수를 .. [Javascript] 호이스팅(Hoisting)의 발생 원리 자바스크립트에서 호이스팅(Hoisting)이란 변수 또는 함수의 선언이 맨 위로 끌어올려지는 현상을 말한다. 그래서 개발자가 어느 라인 어느 위치에 코드를 선언하더라도 실행되기 전 해당 코드가 최상단으로 끌어올려지고 실행된다. 이러한 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성(instantiation)과 초기화(initialization)의 작업이 분리되어 진행되기 때문이다. console.log(a()); // 'a'console.log(b()); // Uncaught TypeError: b is not a functionconsole.log(c()); // Uncaught TypeError: b is not a function function a() { return 'a';} var b.. [Javascript] Cookie 다루기 Cookie란?Cookie는 데이터이면서 우리가 현재 사용하는 PC에 작은 텍스트 파일로 저장되어 있는 것이다. 어떤 사이트에 접속했을 때 '일주일 동안 이 창 보지 않기'나 로그인 페이지에서 '아이디 저장' 또는 '자동 로그인' 같은 기능을 사용해 본 적이 있지 않은가? 사실 브라우저는 내용을 기억할 공간이 없는데, 이를 도와주는 것이 바로 쿠키이다. 쿠키에 대해 알아보기 전에 쿠키가 저장되는 방식은 key : value라는 점을 기억해 두자. 브라우저가 웹 페이지를 서버로부터 요청하게 되면 이 페이지에 속한 쿠키들이 추가로 요청된다. 이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다. Cookie vs Session쿠키는 사용자가 브라우저의 쿠키 데이터를 비.. [Javascript] 객체의 value 값으로 key 값 찾기 Object 함수와 배열 내장 함수를 적절히 조합하여 사용하면 생각보다 간단히 구현이 가능하다. function getKeyByValue(object, value){ return Object.keys(object).find(key => object[key] === value);} 우선 key만 따로 배열로 배열로 전환한 뒤(Object.keys()), 배열 내장 함수 find()를 통해 배열을 순회하여 object[key]의 값과 비교하려는 value의 값이 같으면 그 값을 반환시킨다. 참고https://inpa.tistory.com/entry/JS-%F0%9F%9A%80-value%EA%B0%92%EC%9C%BC%EB%A1%9C-key%EA%B0%92-%EC%B0%BE%EA%B8%B0 [Javascript] forEach()에 break 걸기 본래 Javascript에서 Array.forEach()는 break문을 따로 지원하지 않는다. 만약 일반 for문의 break 구문을 forEach에서 구현하고 싶다면 아래의 3가지 방법을 사용할 수 있다. try... catch문 안에서 forEach를 실행하고 강제로 예외를 던져 루프를 벗어나는 방법Array.some() 함수를 사용하는 방법Array.every() 함수를 사용하는 방법 이들을 차례로 소개해 보려 한다. 1. try...catch 사용하기forEach()에서는 return true를 하든 false를 하든 관계 없이 모두 continue로 작동된다. 따라서 return을 통해 break처리를 할 수는 없어 아예 예외 처리를 통해 강제로 반복문에서 벗어나는 방법을 사용한다. let a.. [Javascript] Event 동작 취소하기 웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 둔 상태에서 키보드를 입력하면 텍스트가 입력된다.form에서 submit 버튼을 누르면 데이터가 전송된다.를 클릭하면 href 속성의 URL로 이동한다.이러한 기본적인 동작들을 이벤트라고 하는데 지난 포스트에서는 이벤트를 추가하는 세 가지 방법에 대해 정리한 바 있다. [Javascript] 이벤트 추가 바로 알기이벤트(event)란 웹 페이지에서 발생하는 상호작용을 말한다. 웹 페이지에서 '무언가 일어났다'는 일종의 신호 같은 것이다. 우리가 사용하는 웹 애플리케이션에서는 수많은 이벤트가 발생한다.developing-move.tistory.com 이벤트는 등록뿐 아니라 취소하거나 조작할 수도 있는데 다음의 세 .. [Javascript] Attribute와 Property Attribute와 Property. 한국어로는 둘 다 '속성'이라는 의미를 가지고 있지만 단순히 의미가 같은 것을 떠나 이 둘은 실제로 HTML 요소에 대한 클래스와 아이디 등의 속성을 가리킨다. 그럼에도 웹 프로그래밍에서는 구체적인 차이점이 존재한다. HTML의 Attribute Attribute는 HTML 문서의 정적인 속성이다. Element의 id나 class와 같은 추가적인 정보를 가리킨다고 보면 된다. DOM의 Property Property는 DOM의 속성이다. 즉 HTML의 Attribute를 DOM 내에서 표현하는 것이라고 볼 수 있다. Attribute가 정적인 속성인 것에 반해 Property는 DOM에서의 동적인 속성인 것.Hemllo World cf) 안에 class='m.. [Javascript] URL 객체 과거, 자바스크립트에서는 URL을 일반 문자열로 다루는 경우가 많았으나 URL 문자열은 엄격한 규격을 따르기 때문에 버그가 생기기 쉬웠다. 그러므로 URL에서 특정 요소를 추출하거나 조작하는 데 적지 않은 주의가 필요하게 되었다. 이러한 문제점을 보완하기 위해 대부분의 브라우저와 자바스크립트 런타임에서는 URL API를 지원하고 있는데, 이 웹 표준 API를 이용하면 웹 주소를 보다 쉽고 안전하게 자바스크립트로 다룰 수 있게 된다. URL API는 크게 웹 주소를 다루기 위한 URL 객체와 쿼리 스트링을 다루기 위한 URLSearchParams로 나뉘는데, 본 포스팅에서는 URL 객체에 대해서만 다뤄 보고 URLSearchParams는 별도의 글에서 다루도록 하겠다. URL의 기본적인 구성요소에 대해서는.. 이전 1 2 3 4 5 6 ··· 17 다음
