분류 전체보기

OLD/Javascript

[Javascript] 자바스크립트 배열_02 (forEach(), map(), 정렬, 필터)

앞에 글에서 살펴본 메서드들이 기본적인 메서드들이였다면, 이번에 다룰 메서드들은 조금 심화된 메서드들이다. 1. forEach() 자바스크립트에는 다양한 반복문이 존재한다. (for, for-of, for-in, while...) 이 중 배열에 사용하는 반복문은 for-of문이다. (물론 for, while도 가능하다) forEach() 또한 배열에 사용하는 반복문이다. 그렇다면 왜 for-of 말고 forEach()가 또 있으며, 언제 사용할까? 성능, 코드 길이등등의 이유가 있겠지만, 가장 중요한 for-of와 forEach의 차이점은 어떠한 이유로 인덱스가 필요할 경우 for-of문은 활용될수없다는 점이다. 반면 forEach()는 가능하다 (물론 기본 for문으로도 인덱스에 접근할 수 있지만,,,..

OLD/Javascript

[Javascript] 자바스크립트 배열_01 (Iterable, 유사배열객체, 배열 메서드)

배열이라는 문법은 대부분의 프로그래밍 언어에 존재하고, 당연히 자바스크립트에도 존재한다. 또한, 배열의 활용도는 매우 높고 중요하기 때문에 정확히 알아둘 필요성이 있다. 1. Iterable, 유사 배열 객체 배열을 알기 위해서는 Iterable과 유사 배열 객체를 먼저 알아봐야한다. 1_1. Iterable Iterable이란 반복 가능한 객체로, for-of문을 사용할 수 있는 특징이 있다. 이러한 Iterable에는 대표적으로 배열, Map, Set..등이 존재한다. 1_2. 유사 배열 객체 유사 배열 객체란 배열과 비슷한 형태를 갖고있고, length 프로퍼티를 갖고있는 객체로, 아이템에 엑세스하기 위해 인덱스를 사용하는 객체이다. 이러한 유사 배열 객체에는 대표적으로 NodeList, Strin..

OLD/Javascript

[Javascript] DOM (DOM 쿼리, DOM Traversing) + live or non-live nodelist

자바스크립트에는 여러 주요 기능이 존재하지만, 가장 중요한 기능은 html 문서와의 상호작용을 통한 브라우저에 렌더링하는 기능이 제일 중요할것이다. 이렇게 html 문서와 상호작용하여 브라우저에 렌더링 할 수 있는 이유는 무엇일까? 바로 DOM(Document Object Model)때문이다. 1. DOM이란? DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 즉, 자바스크립트등의 언어가 쉽게 웹 페에지에 접근하여 조작할 수 있게 연결시켜주는 역할을 한다. 또한, DOM은 모두 노드(Node)로 이루어져있는 객체이다. 이러한 노드에는 두가..

OLD/Javascript

[Javascript] 속성 vs 프로퍼티

속성과 프로퍼티는 언뜻보기에 비슷해보이지만, 다르다. 이에대한 차이점을 간단하게 살펴볼려한다. 속성 vs 프로퍼티 1. 속성- 속성은 프로퍼티에 매핑되어있고, live synchronization이 설정되어있다. (단, 항상 그런것은 아님) ex) html 태그의 속성…id, class, value… 2. 프로퍼티 - HTML 코드를 기반으로 생성된 객체에 저장된 값 ex) const input = doucment.~ … input.id, input,className, input.value… 속성 설명에서 속성은 프로퍼티에 매핑되어있다는 것은 무슨 의미일까? -> 속성이 변하면 프로퍼티도 변하고, 프로퍼티가 변하면 속성도 변한다는 뜻이다.(live sync)..하지만, 예외도 존재 예를들어보자면.. - ..

OLD/Javascript

[Javascript] 자바스크립트에서의 함수(함수 표현식, 익명함수, Rest 연산자...)

모든 프로그래밍 언어에서 함수가 중요하듯 자바스크립트에서도 함수는 중요한 개념이다. 이러한 함수를 자바스크립트 관점에서 바라보고, 몇몇 특이점을 정리해볼려한다. 1. 함수? 메서드? 항상 헷갈리는 용어 2. 함수의 정체 3. 함수를 정의하는 두가지 방식 4. 함수를 표현하는 다양한 방식 5. Rest 연산자 1. 함수? 메서드? 항상 헷갈리는 용어 대부분 함수 = 메서드라 여기고 혼용한다. 하지만 함수와 메서드는 다른것이다. 객체에는 보통 키-값 쌍으로 데이터를 저장하는데, 여기에 함수도 저장할 수 있다. const person = { dummy: function dummyFn() { console.log("messi"); }, }; person.dummy(); 이런식으로 객체에 저장된 함수를 메서드라 ..

OLD/Javascript

[Javascript] 윈시 타입(Primitive Type) vs 참조 타입(Reference Type)

1. 힙(Heap) & 스택(Stack) 1_1. 힙(Heap)이란? Heap은 메모리 할당이 일어나는 곳입니다. 즉, 프로그램에서 선언한 변수 or 함수등이 저장되는 공간입니다. 이러한 heap은 - 장기적 메모리 - 주로 브라우저에서 작동함 1_2. 스택(Stack)이란? Stack은 코드 실행에 따라 호출 스택이 쌓이는 곳입니다. 즉, 현재 실행되고있는 함수,변수등을 관리하는 공간입니다. 이러한 stack은 - 단기적 메모리 1_3. Heap과 Stack의 흐름 const getName = () => { return prompt("당신의 이름을 작성해주세요: ", ""); } const dummyFn2 = () => { const userName = getName(); console.log("당신의..

OLD/Javascript

[Javascript] var 키워드를 더 이상 사용하지 않는 이유(let, const 사용 권장)

1. 자바스크립트 ES6에서의 변화 ES6으로 발전하면서 많은 코드 안정화등의 여러 변화를 가져왔지만, 가장 눈에띄는 변화는 var의 사용자제 및 let,const의 사용 권장이다. 기존(~ ES5)에는 자바스크립트에서 변수생성을 var 키워드를 통하여 행햐였지만, 자바스크립트가 ES6가 되면서 var의 사용을 권장하지 않게되었다. 왜 그럴까? 2. var vs let, const 우선 var, let, const의 공통점 및 차이점을 표로 나타내면 var let const 변수 생성 변수 생성 상수 생성 Js 초창기부터 사용되어옴 ES6 이후~ ES6 이후~ 함수, 전역 스코프 사용 블록 스코프 사용 블록 스코프 사용 여기서 다른 내용들은 특별한 점이 존재하지 않지만, "스코프"가 생소하다. 2_1. ..

joseph0926
'분류 전체보기' 카테고리의 글 목록 (12 Page)