JS 객체

Jungwon Lee(Jenny)·2021년 1월 13일
0
post-thumbnail

참고: 쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1

예제로 보는 객체

var p1={};
console.log(typeof p1);//Object
p1.name="Jenny";
console.log(p1); //{name:"Jenny"}
p1.name="Jungwon"; //이러면 과연 바뀔까?
console.log(p1);//{name:"Jungwon"} 바뀐다

객체 만들기

var p2={};
p2.name="Jenny";
p2.weight="100";
p2.eat=function(food){
	console.log(this.name + "이" + food + "를 먹었습니다.");
    this.weight+=1;//this.name, this.weight 객체 자신의 name, weight를 의미
}

JSON 표기법으로 객체 만들기

var m1={"name":"Jenny",
	"hp":100,
        "power":50,
        "attack": function(target){
        	target.hp-=this.power;
        	}
        };
m1.attack(m1); //hp:50

생성자로 객체 만들기

-보통 비슷한 여러 객체를 만들고 싶을 때는 생성자를 통해서 만들면 편하다.

example)

let Human = function (name, hp, power) {
	this.name=name;
    	this.hp=hp;
    	this.power=power;
    	this.attack=function(target){
    		target.hp-=this.power;
    }
}

이렇게 생성자를 만들고, 생성자를 이용해서 객체를 생성할때는 new키워드를 사용한다.

let m1=new Human("Jenny", 100, 10);
let m2=new Human("Jungwon", 999, 1);
m1.attack(m2);
console.log(m2); // ["Jungwon", 989, 1]

이때 m1은 참조변수다~


참조변수와 일반변수

객체를 변수에 할당하면 참조변수, 기본타입을 변수에 할당하면 일반변수다

  • 일반변수는 값 복사 및 바꾸기 가능
    • 값만 저장하고 다른 변수에 언제나 독립적으로 존재한다
let a = 5;
let b = a;
b = 10;
  • 참조변수의 동작 방식 이해하기
let arr1=[0, 1, 2, 3, 4];  //배열객체를 arr1 참조변수가 참조.
let arr2=arr1; //참조변수가 참조변수를 참조하고있다.
arr1.push(5);
console.log(arr1); //[0, 1, 2, 3, 4, 5]
console.log(arr2); //[0, 1, 2, 3, 4, 5]
console.log(arr1===arr2); //true

TIP) 참조변수를 객체에 대한 별명이라고 생각해보자. 예를들면 Jenny, 정원, 정순이 다 나인데 내가 살찌면 저 셋도 살찐다. 나니까...

참조변수와 call by reference

두 코드의 차이를 보자
  • 값 전달
let foo=function(v){
	v=v*2;
    	console.log(v);
	};
let a = 10;
foo(a); //20
console.log(a);//10 a는 여전히 10
  • 참조 전달
let foo=function(ref){
	ref.v=ref.v*2;
	console.log(ref);
}
let p = {name: "Jenny", v: 90};
foo(p);// {name:"Jenny", v:180}
console.log(p); // {name: "Jenny", v: 180}

값 전달 변수는 함수 내부에서 값을 바꿔도 외부에서는 그대로다.
참조전달 변수는 내부에서 값을 바꾸면 외부의 객체도 값이 바뀐다.

profile
FE개발자가 되고싶은 말하는 감자

0개의 댓글