분류 전체보기 검색 결과

224 개의 검색 결과가 있습니다.

Frontend/JavaScript

[JS] 자바스크립트 유사 배열(Array-Like Object)

자바스크립트에서 배열과 유사한 객체를 유사 배열이라고 한다. 1. 유사 배열이 되기 위한 조건 1-1. 숫자 형태의 indexing이 가능해야 한다. 1-2. length 프로퍼티가 있어야 한다. let arrayLikeObject = { 0: 'a', 1: 'b', 2: 'c', length: 3 } 2. 배열과 유사 배열의 차이점 ▶ 유사 배열은 배열의 메서드를 사용할 수 없다. 유사 배열과 배열의 가장 큰 차이점은 유사배열은 forEach, map, filter, reduce와 같은 메서드를 사용할 수 없다는점이다.( 배열의 메서드: https://cocobi.tistory.com/69 ) 또한, 유사 배열은 배열이 아니기 때문에 isArray의 값으로 false를 리턴한다 Array.isArray..

2021. 8. 29. 23:22

Frontend/JavaScript

[JS] 원하는 위치에 노드를 삽입하는 함수(insertAdjacentElement)

insertAdjacentElement()은 Element Node 또는 Text Node안에 원하는 Node를 삽입할 때 유용한 함수이다. 1. insertAdjacentElement() element.insertAdjacentElement(position, element); position 의 매개변수에 사용할 수 있는 값은 아래와 같다. - beforebegin : 타겟 Element Node 바로 앞 - afterbegin : 타겟 Element Node의 첫 번째 Text Node 앞 - beforeend : 타겟 Element Node의 마지막 Text Node 뒤 - afterend : 타겟 Element Node 바로 뒤 foo 두번째 매개변수인 element는 트리에 삽입할 요소이다. 2..

2021. 8. 28. 22:11

Frontend/JavaScript

[JS] 자바스크립트 배열 메서드

1. forEach forEach 메서드를 사용하면 기존에 정의된 배열을 다시 정의할 수 있다. var arr = [1, 2, 3, 4]; // 함수 인자는 3개이다 (요소, 인덱스, 원본배열) arr.forEach(function(element, index, array) { array[index] = element * 100; }); console.log(arr); // [100, 200, 300, 400] 2. map map 메서드는 기존 배열은 유지한 채, 기존 배열을 재정의하여 새로운 배열을 만든다. var arr = [1, 2, 3, 4] // forEach와 같이 3개의 인자를 받으며 return이 있어야함 var newArr = arr.map(function(element) { return ..

2021. 8. 28. 00:02

Frontend/JavaScript

[JS] 자바스크립트 typeof와 instanceof

1. typeof typeof는 변수의 타입을 알고자 할 때 사용하며, 확인 가능한 type의 종류는 원시타입과 함수, object이다. object는 object인지 여부만 알 수 있고 해당 object의 인스턴스를 알고 싶을때는 instanceof를 사용해야한다. typeof var // 예시 typeof 0; // return 'number' typeof 'str'; // return 'string' typeof {}; // return 'object' typeof []; // return 'object' typeof function () {}; // return 'function' typeof null; // return 'object' let str = "this is String" typeof..

2021. 8. 26. 01:58

Frontend/JavaScript

[JS]자바스크립트 템플릿 리터럴

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 쉽게말해 여러 줄로 이루어진 문자열과 문자 보간기능을 사용할 수 있도록 해준다. 기존 ES5는 문자열을 만들 때는 큰 따옴표("), 작은 따옴표(')를 사용해서 문자열을 만들었다. var name = "Jinny"; console.log("My name is " + name + "."); // My name is Jinny. ES6의 템플릿 리터럴은 백틱( ` )기호를 사용해서 문자열을 더 간편하게 만들 수 있다. 문자열에 변수를 넣고 싶으면 ${변수}와 같이 쓰면 된다. var name = "Jinny"; var introduce = `My name is ${name}.`; console.log(typeof(introduce)); // str..

2021. 8. 24. 23:32

Frontend/JavaScript

[JS] onclick과 addEventListener

자바스크립트에서 이벤트를 사용할 때 onclick과 addEventListener를 사용한다. 1. onclick onclick은 하나의 요소에 클릭 이벤트를 걸어줄 때마다 기존에 걸려있던 클릭 이벤트가 덮어쓰여진다. ※ onclick은 html 태그에 인라인 방식으로 넣을 수 있지만 남발하면 코드가 지저분해지므로 주의해서 사용한다. var btn = document.querySelector('.btn'); btn.onclick = function() { console.log('100'); } btn.onclick = function() { console.log('200'); } btn.onclick = function() { console.log('300'); } 2. addEventListener a..

2021. 8. 23. 19:44