본문 바로가기

Study

 (46)
[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..
[JavaScript] function 파라미터 탐구하기 (default 파라미터, ...Rest 파라미터) #0. 파라미터 (= 매개변수, parameter) - 함수 작성시 사용할 수 있는 특별한 형태의 변수다. - 아래 함수에서 1번째줄 a,b가 파라미터이며, - 함수호출시, 함수명(값1, 값2) 형태로 함수를 호출하고, 이때 a = 값1. b=값2 와 같은 형태로 함수가 돌아간다. function 더하기(a, b) { // 여기 있는 a, b가 파라미터임 console.log(a+b); } 더하기(1, 2) // a=1, b=2 로 대입하여, 더하기 함수를 실행하겠다. #1. default 파라미터 - 파라미터는 기본값도 정할 수 있다. - 그냥 파라미터 자리에 함수명(a=10) 과같은 형태로 사용되면, 호출시 argument가 비었을때 default값이 대입되어 함수가 실행된다. - 아래 함수에서는 더..
[JavaScript] ... Spread Operator = 괄호 벗겨주세요 Spread Operator - array나 문자열 앞에 ...을 붙여주면, array나 문자열, object의 괄호를 제거한 결과값을 얻을 수 있다 주의 ) ...은 항상 괄호 안에서만 써야함. #1. 사용예시 1. array에 사용 >> 대괄호를 제거해줌 var arr = ['hello','world']; console.log(arr); // 출력결과 >> (2) ['hello', 'world'] console.log(...arr); // 출력결과 >> hello world // console.log(...arr) == console.log('hello','world') 2. 문자에 사용 >> 문자들을 하나씩 다 펼쳐줌. var str = 'hello'; console.log(str) // 출력결과 ..

티스토리툴바