본문 바로가기

Study/JavaScript

 (15)
[JavaScript] Set : Array 중복 값 제거 하기 좋은 신문법 #0. Set - ES6에서 추가된 자료형 - 중복값을 허용하지 않는다. - array 자료형과 비슷한 모양이지만, 약간은 다른 모양이다. 1) {}로 데이터를 감싼다. 2) 중복값을 허용하지 않는다. - 중복값을 허용하지 않는단 점에서 아주 요긴하게 사용할 수 있다. -> array에 있는 중복값을 제거하고 싶을때 set 사용하면 왕간단, 신세계 - 자료형이니까 보통 자료형처럼 아래와 같은 형식으로 쓴다. #1. set 사용법 - 기본형식 - 다음과 같은 형식으로 사용하고, var 변수명 = new Set(어레이); - 적용예시 - 이제 어떻게 array에 적용해 중복값을 제거할지 감이 오시져? var student = new Set(['김','이','박','박','창','구','구']); // 실행결..
[JavaScript] import/ export : js파일 모듈식으로 가져오고(import), 내보내기(export) import/ export - ES6에서 도입된 js 파일 가져오고(import) 내보내는(export) 방식 - js파일 전체를 가져오는게 아니라, 사용할 변수를 선택해서 export, import하는 방식이다.(모듈 형식으로 import, export) - vue나 react에서 이런 방식으로 많이 사용한다. - 그런데 고전적인 가 호환성은 더 좋긴함. #1. 기본사용법 1. 가져올 js 파일 만들기 - 마지막에 내보내고 싶은 데이터는 하단의 방법으로 내보내준다. 변수1 = 10; export default 변수1 2. js 파일 가져오기 - 아래의 방식으로 가져온다. - script type은 꼭 module로! // script type은 module!! import 가져올거 form '경로' 3..
[JavaScript] 배열, 오브젝트안의 값들을 한꺼번에 변수에 담으려면? > Destructuring 배열, 오브젝트안의 값들을 한꺼번에 변수에 담으려면? 그럴때 사용할수있는게 Destructuring이다. #1. array destructuring - 간단하다. 좌항과 우항의 형식을 맞추어 대입해주면된다. 1. 사용해보기 var [변수1, 변수2, 변수3] = [값1, 값2, 값3]; - 적용한 예제! // 이 arr안의 값을 한번에 변수에 저장할수 있는 방법이 없을까? var arr = [1,2,3]; // 이런식으로 좌항과 우항의 형식을 맞추어 대입해준다! var [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 출력결과 >> 1 2 3 // arr에도 배열 형태의 값이 있으니까, 이런식으로 대입하면 간단하게 해결완료! var [d, e, f] = arr; con..
[JavaScript] 객체지향4. class 2 : class를 복사하고 싶을땐 extends, 복사한 class를 잘 사용하기 위해선 super() #0. 오늘은 결론먼저.. extends class를 상속할때 사용 super : 1) (클래스 extends시 costructor에) 부모 한번 돌고와서 this값 잘 바인딩하려고 사용 2) 부모의 prototype가져올때도 사용 #1. 적용해나가는 기나긴 과정 1. grandPapa의 속성을 그대로 물려받은 class를 만들고 싶을때 - extends 사용하면 됨. class grandPapa { constructor(name) { this.firstName = "Kim"; this.name = name; } } var grandPapa1 = new grandPapa("동식"); >> {firstName: 'Kim', name: '동식'} 2. extends 는 다음과 같은 방식으로 사용가능하다. /..
[JavaScript] 객체지향3. Object.create() : 간단하게 부모 속성 상속받기 #0. Object.create() - ES5에서 도입된 상속을 쉽게 구현하는 방법 - 사용법은 다음과 같다. Object.create(상속받고싶은Object); #1. 사용해보기 1. 복사하고싶은 object 생성 2. Object.create(상속받고싶은Object) 사용하여 자식 인스턴스 생성하면 된다! (다른 상속 방법에 비해)왕간단! // 1. 복사하고싶은 object 생성 var parent = { name: "Kim", age: 50 }; // 2. Object.create(상속받고싶은Object) 사용하여 자식 인스턴스 생성 // >> parent가 가진 name, age를 그대로 물려받은 자식 object를 만들어짐 var child = Object.create(parent); // 2-..
[JavaScript] 객체지향2. Prototype = 유전자 #0. Prototype - prototype은 construnctor를 만들면 자동으로 생성되는 공간이다. - 이 안에는 constructor에 대한 정보들이 담기는데, 다음 사진과 같은 정보들이 담긴다. - 저들은 대대로 전해져 오는 나의 유전자라고 생각하자. * constructor를 모른다면? 아래 글 먼저 읽어보세요 더보기 https://isfpp.tistory.com/133 - constructor만 생성하면 prototype이 정말 생성되는지 확인해보자. - 진짜 constructor만 생성하고 나는 저기 this.prototype같은거 추가안해줬는데, 뭐가 출력이 된다. // 1. Constructor 생성 function Student(name, age) { this.name = name..
[JavaScript] 객체지향1. Constructor = Object 뽑아내는 기계 #0. Constructor (생성자) - 비슷한 유형의 오브젝트를 편리하게 생성하도록 도와주는 기계다. #1. 왜 이걸 사용해야하나? - 학급의 30명의 학생들의 인적사항을 담은 출석부 데이터를 생성해야한다고 생각해보자. - 기존의 지식으론, 학생 데이터를 30개 일일히 다 만들어야한다. 이건 너무 번거롭다. 이런한 반복작업을 조금 더 쉽게 할수 있도록 도와주는 것이 constructor ! var 학생1 = {name: '김윤아', age: 15}; var 학생2 = {name: '남도일', age: 15}; var 학생3 = {name: '손예진', age: 16}; // ...(중략) var 학생30 = {name: '송혜교', age: 15}; #2. Constructor 사용법 1. fucnt..
[JavaScript] Reference data type ( VS Primitive data type ) - 자바스크립트의 데이터타입을 크게 나누자면 Primitive(원시) data type과 Reference(참조) data type이 있다. #1. Primitive(원시) data type - 변수값이 그대로 저장되는 그냥 문자와 숫자 등을 의미한다. - Boolean, number, String, null, undefined 등이 이해 해당된다. var pData1 = true; var pData2 = 1; var pData3 = 'hi'; var pData4 = null; var pData5 = undefined; #2. Reference(참조) data type - 변수에는 변수 값대신 Reference가 저장되는 data type을 말한다. - Array와 Object가 이에 해당된다 * Ref..

티스토리툴바