함수에서 쓰는 점 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
-
primitive data type
문자, 숫자 자료형 변수에 직접 저장된다.
-
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이 존재한다.
Jr. FE Dev