본문 바로가기

배운 것/js

 (14)
[js] Destructuring assignment (해체할당) 1. 배열의 해체 할당 var colors = ['red', 'blue','white']; var first = colors[0]; var second = colors[1]; var third = colors[2]; colors 배열의 요소들을 전부 펼쳐서 var [first, second, third] = colors; 위와 같이 배열 안에 1:1 순서대로 변수를 선언하는 것과 같다. 2. 객체의 해체 할당 const iu = { name : '아이유', age : 25, gender : 'female' } const { name, age, gender } = iu console.log(name, age, gender) // '아이유', 25, 'female const loginInfo = { devi..
[js] ES6 클래스 방식의 인스턴스는 name 프로퍼티를 찾는다 ES5 방식의 인스턴스는 name 프로퍼티를 찾지 못한다 예제 function G () {} G.method1 = function (){} G.prototype.method2 = function (){} const g = new G() console.log(G.method1.name, g.method2.name) 코드 해석 : -> G.method1 = function (){} G 를 생성자 함수로 사용했고 함수는 일급 객체이기 때문에 프로퍼티를 할당할 수 있다. -> G.prototype.method2 = function (){} G 의 프로토타입이 할당할 메서드들은 인스턴스(g)에 상속이 된다. 그렇기 때문에 -> g.method2 인스턴스 입장에서 자신의 것처럼 호출할 수 있다. G의 메서드 이름과..
[js] arrow function 의 this function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다. 1. 일반 함수의 this : 이벤트 리스너 예제 const button = document.querySelector("button"); button.addEventListener("click", function(){ console.log(this) // button 콘솔에 찍힘 }); - 일반 함수의 경우 바인딩할 객체를 기준으로 this가 존재했다. 2. 화살표 함수의 this : 이벤트 리스너 예제 const button = document.querySelector("button"); button.addEventListener("click", () => { console.log(this) // window가 ..
[js] Ajax란 AJAX란 JAVASCRIPT 의 라이브러리 중 하나로 비동기식 자바스크립트(Asynchronous Javascript And Xml)이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 웹페이지 전체 페이지를 새로 고치지 않고 페이지 일부만을 위한 데이터 로드하는 기법. * 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있다는 큰 장점이 있다 구동 방식 XML HttpRequest객체를 통해 서버에 request(요청) -> JSON 이나 XML 형태로 필요한 데이터만 받아 갱신 AJAX 장단점 장점 1. 서버의 처리가 완료될 때까지 기다리지 않아 속도가 향상된다 2. 서버에서 데이터만 전송하면 되므로 코딩의 양이 줄어든다 단점 1. 히스토리 관리가 안 된다 2. 연속으..
[js] 프로토타입 상속이 어떻게 작동하는가 var a = { attr1: 'a1' } var b = { attr2: 'a2' } b.__proto__ = a; // b의 프로토타입 속성이 객체 a를 가리키고 있다 (= 상속) b.attr1 // 'a1' a.attr1 = 'a000'; // 상속받은 객체의 내용 변경 b.attr1 // 'a000' a.attr3 = 'a3' // 상속받은 객체의 내용이 추가 b.attr3 // 'a3' delete a.attr1 // 상속받은 객체의 내용이 삭제 b.attr1 // undefined 상속 시키고자하는 객체(b)에 상속 받고자하는 객체(a)를 프로토 속성(__proto__)을 이용해 상속시킨다. 이렇게 객체과 객체의 연결을 통한 단방향 공유 관계를 프로토타입 체인이라고 한다. object.creat..
[js] arrow function 규칙 //기존의 function sample var double = function(x){ return x*2;} //arrow function sample const double = (x) => { return x*2;} //매개변수가 1개인 경우 소괄호 생략 가능 const double = x => {return x*2} //함수가 한줄로 표현가능하면 중괄호 생략 가능하고 자동으로 return됨 const double = x => x * 2 //매개변수가 두 개 이상일 때 const add = (x,y) => x + y //매개변수가 없을 때 () => { ... } //객체변환할 때 중괄호 사용 () => {return {a:1};} //return 바로할땐 소괄호 사용 () => ({a:1}) 출처: ..
[js] 삼항연산자 목표 : 삼항연산자를 사용해서 class "red" 를 갖고 있는 태그들은 red 라는 텍스트가 찍히게 해보자 html aaa bbb ccc ddd eee eee 나나 css .red {color:red;} .blue {color:blue;} js let li = document.querySelectorAll("li"); li.forEach(function(item){ // if(item.classList.contains("red")){ // item.innerHTML="red" // } item.classList.contains("red") ? item.innerHTML="red" : console.log("?") }); 삼항연산자를 쓰면, if( 조건문 ) { 조건문 결과 } else { 조건문 외의..
[js] filter filter 함수를 활용해 배열에서 조건에 해당하는 값만 추출해 낼 수 있다. (function test(){ const testArray = [1,2,3,4]; function getThreeUnder(value){ return value

티스토리툴바