[javascript] 강의정리3

1. default 파라미터/arguments

• default 파라미터

함수를 만들 때, 파라미터에 기본값을 줄 수 있음.

function plus(a,b=10){
  	console.log(a+b)
}
plus(1);	//b값을 주지 않았음.b=10 디폴트 값으로 인해 출력값 :11

• default 파라미터 : 파라미터 선언시 등호로 입력. 파라미터가 정의되지 않았을 때, 등호 오른쪽 값이 적용됨.

// 1. default 파라미터로 수식입력 가능
function plus(a,b=2*5){
  console.log(a+b)
}
// 2. default 파라미터로 다른 파라미터와 연산도 가능
function plus(a,b=2*a){
  console.log(a+b)
}
//3. default 파라미터로 함수 입력도 가능
function f(){
  return 10
}
function plus(a,b = f()){
  console.log(a+b)
}
plus(3);		//출력 값 : 3+10 =13

• 함수의 arguments

함수의 모든 파라미터들을 한번에 다루고 싶을 때, arguments 키워드 사용
함수 안에서 사용할 수 있는 미리 정의된 키워드 혹은 변수임.

function fn(a,b,c){
  console.log(arguments)
}
fn(2,3,4);	//[2,3,4] 출력
function fn2(a,b,c){
  for(var i=0;i<arguments.length;i++){
    console.log(arguments[i])
  }
}
fn2(2,3,4);	//2,3,4, 각각 한 줄 씩 출력됨.

2. rest 파라미터

function fn3(...parameter){
  console.log(parameter)
}
fn3(1,2,3,4,5,6,7)
//출력 결과 : [1,2,3,4,5,6,7]

• rest 파라미터 : 원하는 파라미터 왼쪽에 ... 기호를 붙여주면, 이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터 라는 뜻.

function fn4(a,b,...parameter){
	console.log(parameter)
}
fn4(1,2,3,4,5,6,7)
//a=1, b=2, 나머지는 parameter [] 에 들어가게 됨. 따라서 [3,4,5,6,7]이 출력됨

• rest 파라미터 쓰기 전 주의사항

  파라미터가 여러개일 때, rest는 항상 마지막 파라미터로 넣어야 함. 또한, 2개 이상 쓸 수 없음.

  function fn(a,...parameter,b){
   ...
  }
  //error 남
  function fn(a, ...parameter, ...parameter2){
     ...
  }
   //error남

3. Reference/Primitive data type

자바스크립트의 자료형 (문자,숫자,array,object 등) 은 자료형을 Primitve & Reference 로 분류함.

• Primitive data type : 자료 자체가 변수에 저장되는 자료임.

  문자, 숫자 자료형이 대표적인 primitive data type
  
  

• Reference data type : 자료를 변수에 직접 저장하는 것이 아닌, 레퍼런스를 변수에 저장함. Array, Object 자료형

var person = {name : 'Kim'}

person 변수에 저장된 것은 {name : 'Kim'} 이 아닌, {name : 'Kim'}을 가리키는 레퍼런스가 저장된 것.

• Reference data type의 복사

var name1 = { name : 'Kim'};
var name2 = name1;
name1.name = 'Park';
console.log(name1);	//{name : 'Park'}
console.log(name2);	//{name : 'Park'} 

• 왜그럴까?

• 두번째 줄에서 name2에 name1을 복사해서 할당했는데, 이 때 {name : 'Kim'} 이 복사된 것이 아닌, reference가 복사된 것. 즉, name1과 name2는 같은 reference를 가지고 있음. 따라서 name1.name = 'Park'으로 변경하면 name1,name2 모두{name:'Park'}` 값을 출력하는 것.

• Object, Array 자료형은 등호로 복사하면 reference 값을 공유하여 문제가 생길 수 있다. -> constructor 로 object를 복사하자.
• 함수를 이용하여 object 변경하면?

var name1 = {name : 'Kim'};
function fn(obj){
  obj = {name : 'Park'};
}
fn(name1);

위 코드 실행시, name1의 값은 바뀌지 않는다. 왜그럴까?

• 함수의 파라미터는 일종의 변수처럼 생성되고 사라지는 존재라고 보면 됨.
  즉, var 변수라고 보면 됨.
• fn(name1) 이라고 했을 때, 자바스크립트 시점에서는 fn(var obj = name1) 이라고 인식한다고 생각하면 됨.
  앞에서 봤듯이, 변수에 name1 오브젝트를 복사해서 할당하면 변수와 name1은 같은 reference를 갖게 된다.
• obj = {name : 'Park'} 로 할당한 것은, 그냥 obj 라는 변수에 새로운 reference를 재할당한 것일 뿐, 실제 name1 변수는 전혀 건드리지 않은 것. 따라서 name1의 값은 바뀌지 않는다.

4. 상속 - Constructor,Prototype,Object.create()

상속(inheritance) : constructor가 가진 속성들을 그대로 물려받아서 object를 새로 생성함.

• Constructor

  새로운 object를 생성하고 싶을 때, constructor 사용

function constructor(name,age){
  this.name = name;
  this.age = age;
}
var st1 = new constructor('Kim',25);
var st2 = new constructor('Park',24);

• Prototype

  상속기능을 구현함.

  • constructor는 모두 prototype 이라는 항목을 내부에 생성함.
  • Prototype : 자식들이 물려받을 수 있는 유전자. 즉, constructor로 부터 생성되는 새로운 object들은 전부 constructor.prototype 의 내부를 그대로 물려받아 쓸 수 있음.
  • Prototype에는 값을 여러개 부여할 수 있고, 함수도 넣을 수 있음. Object 자료형처럼 다룰 수 있음.
  • Prototype에 추가된 데이터들은 자식들이 직접 가지는 게 아닌, 부모만 가지고 있음.

  function constructor(){
    this.name = 'Kim';
    this.age = 15;
  }
  constructor.prototype.gender = 'male';	//새로운 값 부여(object 형식)
  var st1 = new constructor();
  var st2 = new constructor();
  //st1, st2 모두 {gender : 'male'} 값을 가짐.

• object 에서 값을 출력할 때 순서?

  1. 내가 직접 가지고 있는지 검사.
  2. 내가 가지고 있지 않으면, 부모 유전자들을 차례로 검사.(부모->부모의 부모...)

• 자바스크립트 내장함수 toString() 등을 쓸 수 있는 이유?

  sort,push,toString,map,forEach 등.. 함수들을 쓸 수 있는 이유

  : 내가 만든 array의 부모 유전자(혹은 부모의 부모)가 toString()을 가지고 있기 때문이다!

• Prototype으로 상속시키는 것과 constructor로 상속시키는 것의 차이?

  • 자식들이 값을 직접 소유하게 만들고 싶다 : Constructor
  • 부모만 값을 가지고 있고, 자식은 그것을 참조해서 쓰게 하고 싶다 : Prototype

• Prototype의 특징

  1. Prototype은 Constructor 함수에만 생성됨.
  2. 내 부모님의 유전자를 찾고 싶다면 __proto__를 출력하라

  • 부모로부터 생성된 자식 object들은 __proto__라는 속성이 있다. 이것은 부모의 prototype을 뜻함.

  3. __proto__를 직접 등록하면 object끼리 상속기능을 구현할 수 있음.

  var parent = { name : 'Kim'};
  var child = {};
  child.__proto__ = parent;	//child object에 __proto__를 강제로 설정.
  console.log(child.name);	//Kim 출력.

  4. 모든 object 자료형의 조상은 Object() 이며, array 자료형의 조상도 Object()임. 모든 함수 자료형의 조상도 Object()임.

• Object.create()

  Object.create(부모object); 하면, 소괄호 안에 적은 부모 object가 prototype이 됨.

5. 상속2 - Class

class parent{
  constructor(){
    this.name = 'Kim'
    this.sayHi = function(){ console.log('hello');} 
    //constructor 안에 함수 추가 - 자식이 직접 sayHi 함수를 가지게 됨.
  }
  sayHi(){
    console.log('hello');
    //prototype에 sayHi 함수 추가 - 자식은 부모의 prototype에 있던 sayHi() 쓰게 됨.
}
var child = new parent();

• extends/super

  extends : 기존에 있던 Class를 상속한 또 다른 Class를 만들고 싶을 때 씀.
  super : extends로 상속중인 부모 class의 constructor()

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.name = name;
  }
  sayHi(){
    console.log('안녕 나는 할아버지');
}
class 아버지 extends 할아버지{
  constructor(name){
    super(name);		//할아버지 class의 constructor()
    this.나이 = 50;		//아버지 class에 새로운 속성 추가.
  }
  sayHi2(){
    console.log('안녕 나는 아버지');
    super.sayHi();	//부모 class의 prototype을 의미함.
}

• super의 용도

  1. Constructor 안에서 쓰면 부모 class의 constructor.
  2. prototype 함수 안에서 쓰면 부모 class의 prototype.

6. getter/setter

• 얕게 말하자면 오브젝트 내의 함수들을 괄호없이 쓸 수 있게 만들어주는 키워드, 깊숙히 말하자면 데이터의 무결성을 보존하기 위해 쓰는 키워드.
• 즉, 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라, 함수로 간접적으로 다루기 위해 사용.

class 사람 {
  constructor(){
    this.name = 'Park';
    this.age = 20;
  }
  get nextAge(){
    return this.age + 1
  }
  set setAge(나이){
    this.age = 나이;
  }
}
var 사람1 = new 사람();
사람1.setAge=50;
사람1.nextAge;

• get/set 사용하는 기준?

  • get : 데이터를 가져와주는 함수들. 함수 내에 return값을 가져야 함.
  • set : 데이터를 입력,수정해주는 함수들. 파라미터가 한개 꼭 존재해야 함.