Javascript #4

aksel26·2021년 4월 20일
0

JavaScript

목록 보기
11/16
post-thumbnail

함수에서 쓰는 점 3개 : Rest 파라미터

옛날문법 : arguments.

ES6 : Rest parameter

arguments의 단점

function 함수2(임시, a,b,c){
  for(var i = 0 ; i< arguments.length ; i++){
    console.log(arguments[i]);
  }
}

a,b,c 만 출력하고 싶으면 ?  
  arguments라는 자료를 쪼개야 함.. 번거롭다



********** Rest 파라미터 이용 **********

... : 1.rest파라미터, 2.스프레드 오퍼레이터

function 함수2(...파라미터들){
  console.log(파라미터들)
}

함수2(1,2,3,4,5,6,7);


arguments : 자리에 오는 모든 파라미터를 []에 보관해줌
모든 파라미터를 다 담아줌
rest파라미터는 특정을 지어서 넣을 수 있다.



function 함수2(a,b,...파라미터들){
  console.log(파라미터들)
}
함수2(1,2,3,3,4,5,6,7)
// VM820:2 (6) [3, 3, 4, 5, 6, 7]




***** 주의점 *****

1. 가장 뒤에 써야함 .
function 함수2(...파라미터들,a,b){ // X  
  console.log(파라미터들)
}


2. 두번이상 금지
function 함수2(...파라미터들,...파라미터들2){ // X  
  console.log(파라미터들)
}



reference type & primitive data type

  1. primitive data type

    문자, 숫자 자료형 변수에 직접 저장된다.

  1. reference type

    배열, 객체는 레퍼런스 데이터 타입

    var 사람 = { name : 'Kim' }

    화살표로 가리키고 있는 것 뿐

복사

********** Primitive data type **********
var 이름1 = '김';
var 이름2 = 이름1;
이름1 = '박';

// 이름1 : 박
// 이름2 : 김


********** Reference Data Type **********
var 이름1 = {name : '김'}
var 이름2 = 이름1;
이름1.name. = '박'
// 이름1 : 박
// 이름2 : 박


이름 1이 name을 가리키고 있고, 
  이름1(화살표)를 이름2에 복사했다.
이름1.name 이 박으로 변경된 화살표를 따라서 이름2도 화살표도 같은 주소를 가리키게 된다. (공유)
constructor를 활용해서 복사해야 한다.


***** Reference Data Type (Parameter) *****

var 이름1 = { name : '김' };
function 변경(obj){
  obj = { name : 'park' };
}
변경(이름1);


아무일도 일어나지 않는다.? 
 파라미터에서 obj값은 값 할당 & 생성이 이루어지기 때문
var obj = {name : 'park'}과 같은 의미가 된다.
즉 새로운 변수가 된다.


Constructor

배워서 어따쓸건지가 중요하다.

objcect를 마구 복사하고 싶을때 사용한다. 비슷한 object를 여러개 만들어 낼때

// var 학생1 = {name :  'Kim', age : 15}
// var 학생2 = {name :  'John', age : 15}
// var 학생3 = {name :  'Paul', age : 15}
// ....



// ********** Constructor **********
function Student() {
  this.name = "Kim" // this는 새로 생성되는 object를 뜻함 = instance
  this.age = 15
  this.sayHi = function () {
    console.log(`hi ${this.name}`)
  }
}
new Student() //이러면 Object뽑힙

var 학생1 = new Student()
var 학생2 = new Student()

console.log(학생1.sayHi())
console.log(학생2.sayHi())



// **** 계속 'Kim' 만 고정된다.. ****
console.log(학생1)
console.log(학생2)
// Student { name: 'Kim', age: 15, sayHi: [Function (anonymous)] }
// Student { name: 'Kim', age: 15, sayHi: [Function (anonymous)] }

// Constructor에 파라미터를 넣어보자
function Student2(name, age) {
  this.name = name // this는 새로 생성되는 object를 뜻함
  this.age = age
  this.sayHi = function () {
    console.log(`hi ${this.name} your age is ${age}`)
  }
}

학생3 = new Student2("John", 32)

console.log(학생3.sayHi())

Prototype

Prototype : 유전자



function Student1(name, age) {
  this.name = name // this는 새로 생성되는 object를 뜻함
  this.age = age
  this.sayHi = function () {
    console.log(`hi ${this.name} your age is ${age}`)
  }
}

var 학생3 = new Student1("John", 32)
// 학생3(자식)은 Student1인 부모로부터 물려받은 것으로 생각할 수 있다. (name, age, sayHi)



 ********** JS에만 있는 특징 Prototype **********
// 상속을 구현할 수 있는 또하나의 문법

// 컨스트럭터를 만들면 prototype이라는 공간이 자동으로 생김

console.log(Student1.prototype)

// prototype에 등록하면 다 물려줄 수 있다

Student1.prototype.gender = "남"

console.log(학생3.gender) //남

// 학생3.name 이 동작할때는 ..
// 1. 학생3이 직접 name을 가지고 있는가 ?
// 2. 그럼 학생3의 부모 유전자(Student1.prototype)를 가지고 있는가 ? 그럼 실행!

// 내장함수는 어떻게 동작하나 ?
학생3.toString() //Object / Array에 붙일 수 있는 내장합수
// 학생3.push()...
// 학생3은 toString메서드가 없다. 어떻게 가능 ?
// 값이 없으면 부모의 프로토타입을 찾아본다.
// 없으면 또 그의 부모를 찾는다.

// 부모의 끝판왕은 뭐냐

var arr = [1, 2, 3]
var arr = new Array(1, 2, 3) //실제 어레이가 만들어지는 방식

arr.sort() //arr은 없네, 그럼 arr부모의 유전자(Array.prototype)에 sort가 있나  ? 있다.

// 오브젝트도 마찬가지

var obj = { name: "Kim" }
var obj = new Object()
obj.toString()
// 1. obj에는 toString없네
// 2. Object.prototype에 toString이 존재한다.
profile
Jr. FE Dev

0개의 댓글