JavaScript 정리3(Object, 프로퍼티 전달, 배열 출력, clone)

javascript

Object 전달

const name ='evan';
const age = 44;
print(name, age);
function print(name, age){
    console.log(name);
    console.log(age);
}

위와같이 전달하게 되면 매개변수가 많아지면 다 받기 곤란.

const evan = {name : 'evan', age:4};

function print(person){
    console.log(person.name);
    console.log(person.name);
}

따라서 이처럼 객체로 전달하게 되면 처리하기 편하다.

 

 

프로퍼티 변수를 나중에 따로 선언해도됨.

예시) hasJob 프로퍼티 주목

function print(person){
    console.log(person.name);
    console.log(person.name);
}

const evan = {name : 'evan', age:4};

print(evan);

evan.hasJob=true;//이렇게 추가하는것도 가능
console.log(evan.hasJob);

delete evan.hasJob;//프로퍼티를 이렇게 지울수있음
console.log(evan.hasJob); 

delete를 하니 undefined로 변함

위처럼 다른언어와 달리 프로퍼티 변수를 나중에 추가했다가 지워줄 수도 있다.

 

 

값 불러오기<key, object>

//object는 <key,value>로 매핑되어있음.
console.log(evan.name);//<-출력할때는 이렇게 .을 쓰면됨
console.log(evan('name'));//key는 String 타입으로 해야됨.
evan('hasJob')= true;
console.log(evan.hasJob);

.을 이용하는 방법도 있고, 'key'값을 String으로 가져오는 방법도 있다.

 

 

그리고 아래는 동적으로 key값을 받아와서 출력할때 쓰는 방식이다.

function printVal(obj, key){
    console.log(obj[key]);//이처럼 동적으로 받아올때 사용
}

printVal(evan, 'name');

위처럼 obj[key]를 하면 'name'에 해당하는 프로퍼티를 불러올수있다.

 

 

객체선언

Property Value ShortHand & Constructor Function

const person1= {name:'bob' , age:2};
const person2= {name:'steve', age:33};

//Property value Shorthand
const person3 =new Person('ellie', 30);
funcion Person(name, age){
    this.name=name;
    this.age=age;
}

//Property value shorthand
const person4 = makePerson('ellie', 30);
function makePerson(name, age){
    return{
        name,
        age,
    }
}

 

in operator : 오브젝트 안에 key가 있는지 확인용

//in operator : 오브젝트 안에 key가 있는지 확인용
console.log('name' in ellie);//true

 

for..in vs for...of

//for ... in
for(let key in ellie){
    console.log(key);//모든 키 호출
}

//for ... of
const array=[1,2,5,6];
for(value of array){
    console.log(value);
}

 

오브젝트 복사(clone)

//기본틀
const user = {name : 'ellie', age:'20'};
const user2 = user;
user2.name='coder';//포인터로 user와 같은걸 가르킴
console.log(user);//user.name='ellie'->'coder'로 바뀌어버림

//옛날방식
const user3 ={};
for(key in user){
    user[key] = uwer[key];
}
console.log(user3);


//js의 오브젝트 클로닝 두가지 방법
const user4 = Object.assign({}, user);//리턴값받아오기

Object.assign(user5, user);//바로 만들기

Object.assign()메소드를 이용하면 clone복제를 할 수 있다.

 

 

추가 clone

assign을 여러개를 할 경우 위처럼 덮어쓰기가 된다.