JS 객체 (PurpleCode Study)

김지원·2020년 11월 1일
JavaScript객체비구조화 할당
0

JavaScript

목록 보기
4/21
  • 원시형: 하나의 데이터만 담을 수 있다.
  • 객체형: 원시형과 다르게 다양한 데이터를 담을 수 있다.
const coffee={
    name:"아메리카노",
    price:3200
  };

  console.log(coffee.name+": "+coffee.price);
  //아메리카노: 3200
  • 객체는 중괄호{..}을 사용해서 만든다.
  • key와 value 쌍으로 구성된 프로퍼티를 넣을 수 있다.
  • key는 문자형, value는 모든 자료형

객체 생성 방법

1.객체 리터럴 

const coffee={
    name:"아메리카노",
    price:3200
  };

  console.log(coffee.name+": "+coffee.price);
  //아메리카노: 3200

2.함수를 사용한 객체 생성

const createMenu = (name, price) => ({name,price});

const coffee = createMenu("아메리카노", 3200);

console.log(coffee);
//{ name: '아메리카노', price: 3200 }

3.new 연산자 사용 //화살표 함수는 불가능

function Menu(name, price){
    this.name=name;
    this.price=price;
}

const coffee = new Menu("아메리카노", 3200);

console.log(coffee);
//Menu { name: '아메리카노', price: 3200 }
//new를 사용하면 앞에 함수명이 붙는거?????

4.Object()

const coffee = new Object();

coffee.name="아메리카노";
coffee.price=3200;

console.log(coffee);
//{ name: '아메리카노', price: 3200 }

객체 동적 바인딩(생성, 수정, 삭제)

const coffee = {
    name:"아메리카노",
    price:3200
};

console.log(coffee);
//{ name: '아메리카노', price: 3200 }

//객체에 있는 값 수정
coffee.price=4200;
console.log(coffee);
//{ name: '아메리카노', price: 4200 }

//객체 안에 새로운 프로퍼티 추가
coffee.size="extra";
console.log(coffee);
//{ name: '아메리카노', price: 4200, size: 'extra' }

//객체 안에 프로퍼티 삭제
delete coffee.size;
console.log(coffee);
//{ name: '아메리카노', price: 4200 }

객체를 찍어내는 함수 만들기

const createMenu =(name,price)=>({store:"ediya", name, price});
//객체의 키와 들어가는 변수의 이름이 같다면 name:name 안해줘도됨
//:생략가능

const coffee = createMenu("아메리카노",3200);
const milkBeverage = createMenu("민트초콜릿",3400);
const tea = createMenu("밀크티",3500);

console.log(coffee);
console.log(milkBeverage);
console.log(tea);
//{ store: 'ediya', name: '아메리카노', price: 3200 }
//{ store: 'ediya', name: '민트초콜릿', price: 3400 }
//{ store: 'ediya', name: '밀크티', price: 3500 }

존재하지 않는 프로퍼티에 접근

  • 에러가 발생하지 않고, undefined가 반환됨
  • 객체의 in 연산자를 사용해서 프로퍼티의 존재 여부를 확인할 수 있다.
const member={
    id: "annie1004619",
    name: "김지원",
    pwd: 1234,
    nickname:''
};

console.log(member);
//{ id: 'annie1004619', name: '김지원', pwd: 1234, nickname: '' }
console.log("name" in member);//true
//console.log(name in member); //error 
console.log("age" in member);//false
console.log("nickname" in member);//true
console.log(member.nickname);//   
console.log(member.age);//undefined

정수 프로퍼티

for..in을 사용해 key값과 value 출력

const  visitList = {
    date:"201102",
    name:"kimjiwon"
};

for(let key in visitList){
    console.log(key); //date name
    console.log(visitList[key]);//201102, kimjiwon
}

객체 정렬 방식

  • 정수 프로퍼티는 자동 정렬!!
  • 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬
const  visitList = {
    "201102":"김지원",
    "201101":"김지투",
    "201030":"김쪼꼬"
};

for(let key in visitList){
    console.log(key); 
    console.log(visitList[key]);
}
//출력)
//201030
//김쪼꼬
//201101
//김지투
//201102
//김지원

비구조화 할당

객체 구조 분해 또는 객체 비구조화 할당을 이용하면 훨씬 더 코드를 보기 좋게 작성할 수 있다.
//두개가 다른 것?????

const createMenu = ({name,price})=>{
    console.log(`${name}의 가격은 ${price}`);
};

const coffee = {
    name:"아메리카노",
    price:3200
};

createMenu(coffee);
//아메리카노의 가격은 3200
  • 함수에서 매개변수를 받을 때 {}를 사용해서 객체를 비구조화 할당해줄 수 있다.
  • 구조 분해 할당을 할 경우 변수의 값을 바꿔줄 수 있다.
    ???????????
const getServeData = () => ({ my_name: "이재준", my_age: 23 });

const { my_name: myName, my_age: myAge } = getSeverData();

console.log(`${myName}의 나이는 ${myAge}살 입니다.`);
//error

spread, rest

  • spread:
    • ... 연산자
    • 객체, 배열을 펼쳐서 새로운 객체나 배열에 넣어줄 수 있다.

EX )

const student={
    name:"김지원",
    age:24,
    major:"computerscience"
};

const seniorStudent={
    ...student,
    grade:"senior"
};

const senierProject = {
    ...seniorStudent,
    senierproject: false
};

console.log(student);
//{ name: '김지원', age: 24, major: 'computerscience' }
console.log(seniorStudent);
/*{ name: '김지원',
  age: 24,
  major: 'computerscience',
  grade: 'senior' }*/
console.log(senierProject);
/*{ name: '김지원',
  age: 24,
  major: 'computerscience',
  grade: 'senior',
  senierproject: false }
*/
  • rest:
    • spread와 비슷하게 생겼지만 매우 다른 역할을 한다.
    • 함수, 객체, 배열에서 사용이 가능하다.
    • ex) 함수에서 가변인자

EX )

const student={
    name:"김지원",
    age:24,
    major:"computerscience",
    grade:"senior"
};

//const {name, ...rest , grade}= student;
//SyntaxError: Rest element must be last element

const {name, grade, ...rest }= student;
console.log(rest);//{ age: 24, major: 'computerscience' }
console.log(name);//김지원
console.log(grade);//senior

객체의 복사

원시 값 복사

  • 값 그대로 저장 할당되고 복사가 진행
let name = "김지원";
let newName = name;
console.log(newName);//김지원
 
newName="김쪼꼬";
console.log(newName);//김쪼꼬
console.log(name);//김지원

객체 복사

  • 객체가 저장되어 있는 메모리 주소인 객체에 대한 참조 값이 저장
//student 객체에 값을 할당하면 객체는 메모리 내 어딘가에 저장
//변수 student에는 객체를 참조할 수 있는 값이 저장!
//객체가 할당된 변수를 복사하게 되면 참조 값이 복사되고 객체는 복사되지 않는다.
const student={
    name:"김지원",
    age:24,
    major:"computerscience",
    grade:"senior"
};

const copyObject = student;

copyObject.age = 100;
//copyObject를 수정해도 student의 값이 변화
console.log(student.age);//100

참조 값말고 객체를 복제하기

1.반복문 사용하기

const student={
    name:"김지원",
    age:24,
    major:"computerscience",
    grade:"senior"
};

let copyObject = {};

for(let key in student){
    copyObject[key] = student[key];
}

console.log(copyObject);
/*{ name: '김지원',
  age: 24,
  major: 'computerscience',
  grade: 'senior' }*/

copyObject.age = 100;

console.log(student.age);//24
console.log(copyObject.age);//100

2.Object.assign 사용하기

const student={
    name:"김지원",
    age:24,
    major:"computerscience",
    grade:"senior"
};

let copyObject = Object.assign({}, student);

console.log(copyObject);
/*{ name: '김지원',
  age: 24,
  major: 'computerscience',
  grade: 'senior' }*/
copyObject.age=100;
console.log(student.age);//24
console.log(copyObject.age);//100

메서드와 this

  • 객체 안에 함수를 할당할 수 있다.
  • 이렇게 객체 프로퍼티에 할당된 함수를 메서드라고 부른다.
  • 메서드는 객체에 저장된 정보에 접근할 수 있어야 한다.
  • 어떻게 접근? -> 메서드 내부에서 this 키워드를 사용한다!
const square ={
    width:15,
    height:24,
    //일반 메서드
   /* calcArea: function(){
        const area = this.width * this.height;
        console.log(area);
    }*/
    //축약형 메서드
    calcArea(){
        const area = this.width * this.height;
        console.log(area);
    }
};

square.calcArea();//360
  • 자바스크립트에서는 모든 함수에 this가 사용 가능
  • this는 런타임에 결정된다. 컨텍스트에 따라 this가 달라지게 된다.
const square1 = {
    width:15,
    height:24,
};

const square2 = {
    width:10,
    height:3
};

function calcArea(){
    const area = this.width * this.height;
    console.log(area);
}

square1.calcArea=calcArea;
square2.calcArea=calcArea;

square1.calcArea();//360
square2.calcArea();//30

화살표 함수는 일반 함수와 다르게 this를 가지지 않는다.
화살표 함수에서 this를 참조하게 되면 화살표 함수가 아닌 평범한 외부 함수에서 this 값을 가져온다.

Getter, Setter

const square = {
    _width:15,
    _height:24,
    _area:360,
    calcArea(){
        this._area=this._width * this._height;
    },

    get area() {
        return this._area;
    },
    get width(){
        return this._width;
    },
    set width(value){
        console.log("width 값 변경");
        this._width=value;
        this.calcArea();
    },
    get height(){
        return this._height;
    },
    set height(value){
        console.log("height 값 변경");
        this._height=value;
        this.calcArea();
    }
};

console.log(square.area);//360

square.width=10;//width 값 변경
square.height=20;//height 값 변경
console.log(square.area);//200
  • Getter는 get 키워드 사용
  • Setter는 set 키워드 사용

이런식으로 구성을 해주면 값을 은닉화하고 값을 설정하거나 불러올 때 우리가 원하는 행동을 추가적을 할 수 있다.

옵셔널 체이닝 ?.

  • Node14 버전 이상부터 사용가능 하다.
  • 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근 할 수 있다.
    ?.은 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환!
    ?.는 연산자가 아니다. 함수나 대괄호와 함께 동작하는 특별한 문법 구조체이다.

존재여부가 확실치 않은 함수를 호출할때 ?.()

let student = {
	name:"김지원",
    study(){
     	console.log("자바스크립트 공부 중!");
        }
     }
     
let teacher ={};

student.study?.();//"자바스크립트 공부 중!"
teacher.study?.();

let key = "name";

console.log(student?.[key]);//김지원
console.log(teacher?.[key]);//undefined

객체의 순회

  • 배열에서는 내장 함수로 map, forEach를 사용하여 순회를 하고 데이터를 처리했다.

일반 객체 메서드

  • Object.keys(obj): 키가 담긴 배열을 반환한다.
  • Object.values(obj): 값이 담긴 배열을 반환한다.
  • Object.entries(obj): [key, value] 쌍이 담긴 배열을 반환한다.
const menu = {
    name:"팥빙수",
    price:9800,
    season:"summer"
};

console.log(Object.keys(menu)); //[ 'name', 'price', 'season' ]
console.log(Object.values(menu));//[ '팥빙수', 9800, 'summer' ]
console.log(Object.entries(menu));
//[ [ 'name', '팥빙수' ], [ 'price', 9800 ], [ 'season', 'summer' ] ]

중요한 점은 호출 시에 배열을 반환한다!
그러므로 map, filter같은 배열 전용 메서드가 사용이 가능!

const menu = {
    name:"팥빙수",
    price:9800,
    season:"summer",
    onSale:true
};

console.log(
    Object.entries(menu).map(([key, value]) => {
      if(key ==="onSale"){
          value=value?false:value;
          return[key,value] 
      }else {
          return [key, value]
      }
  }
));

Object.fromEntries메서드는 배열을 다시 객체로 만드는 메서드

프론트엔드에서는 보통 map을 사용할 경우에 key 값을 준다.

ex) entries메서드를 활용하여 key값을 주고 value 값을 가져오기

const menu = [
    {name: "아이스아메리카노", price:3200},
    {name: "복숭아 아이스티", price: 2800},
    {name:"꿀호떡", price:1500},
    {name:"꿀복숭아 플렛치노",price:3500},
    {name:"딸기 쉐이크", price:4800}
];
let count =0;
const array = Object.entries(menu).map(([key, {name, price}])=>{
    if(price>3000){
        if(count>0){
            key=key-count;
        }
        return [key, name, price];
    }else{
        count++;
    }
      
});

console.log(array);
/*[ [ '0', '아이스아메리카노', 3200 ],
  undefined,
  undefined,
  [ 1, '꿀복숭아 플렛치노', 3500 ],
  [ 2, '딸기 쉐이크', 4800 ] ]*/
profile
김지원
이전 포스트

JS 함수 기본 (PurpleCode Study)

다음 포스트

브라우저: 문서

0개의 댓글