Javascript #object

김상웅·2022년 5월 3일
0

객체 (object)


  • 자바스크립트의 데이터 타입 중 하나이다.
  • 배열과는 달리 값의 순서가 중요하지 않다.
  • 변수나 상수를 통해 다양한 값을 다룰 때 유용하게 쓰인다.
  • 객체는 {key: value}로 구성된 property(내부 속성)로 이루어져 있다.
	const object1 = { key : value }
    const object2 = { "hello java" : "hello script"}
    const object3 = { "hello-java" : "hello script"}
    const person1 = {
      name: "sangwoong",
      age: 27,
      mbti: "ENTJ",
      favorite: "sports"
    }

다음과 같이 key 자리에 해당하는 부분에 공백이나 특수문자가 들어갈 경우 큰따옴표로 감싸준다.
key값이 여러개일 경우 쉼표(,)로 구분해준다.

📌 객체에 접근 및 값 추가/수정/삭제


1. 객체 접근 방법

  • key를 활용하여 객체의 값 얻기

    const object = {
    key1: "첫번째",
    key2: "두번째",
    key3: "세번째"
    }
    const first = object.key1
    consolt.log(first) // "첫번째"
  • 변수를 활용하여 객체의 값 얻기

    const object2 = {
    	1: "첫번째",
    	2: "두번째",
    	3: "세번째"
    };
    const two = 2;
    const value = object2.two;
    consolt.log(value); // "두번째"
    	```
    
  • Object.keys를 활용하기

const object2 = {
  	1: "첫번째",
  	2: "두번째",
  	3: "세번째"
};
const keys = Object.keys(object2);
consolt.log(keys); // ["1", "2", "3"],, 배열로 추출

// Object.keys() 활용하기
let newArray = [];
keys.filter(key => newArray.push(object2[key]));
console.log(newArray) // ["첫번째", "두번째", "세번째"]
  • 객체의 값 추가/수정/삭제
const object2 = {
  	1: "첫번째",
  	2: "두번째",
  	3: "세번째"
};
// 추가
object2[4] = "네번째"
console.log(object2)
// {1: "첫번째", 2:"두번째", 3:"세번째", 4:"네번째"}

// 삭제
delete(object2[2])
console.log(object2)
// {1: "첫번째", 3:"세번째", 4:"네번째"}

// 수정
object[3] = "셋"
console.log(object2)
// {1: "첫번째", 3:"셋", 4:"네번째"}

📌 함수에서 객체를 매개변수로 받기


객체 및 함수 생성

	const coffeeBrnad = {
    	name: "메가 커피",
      	best: "아이스 아메리카노",
      	where: "역 근처"
    };
    
    function myFunction(coffee) {
      const text = `${coffee.where} ${coffee.name}의 가장 잘 팔리는 음료는 ${coffee.bset}입니다.`;
      
      console.log(text);
    }

	myFunction(coffeeBrand);
	// result
	// "역 근처 메가 커피의 가장 잘 팔리는 음료는 아이스 아메리카노입니다."

객체의 value 값은 다음과 같이 접근할 수 있다.

	객체 이름.key
    객체 이름[key] //띄어쓰기나 특수문자가 있는 경우

📌 객체 비구조화 할당


객체 비구조화 할당을 통해 간결하게 객체에 접근할 수 있다.

예시 1)

	const coffeeBrnad = {
    	name: "메가 커피",
      	best: "아이스 아메리카노",
      	where: "역 근처"
    };
    
    function myFunction(coffee) {
      // 비구조화 할당
      const { where, name, best } = coffee;
      
      const text = `${where} ${name}의 가장 잘 팔리는 음료는 ${bset}입니다.`;
      
      console.log(text);
    }

	myFunction(coffeeBrand);

객체에서 값을 추출하여 새로운 상수로 선언을 해주는 것이다.

	const { key1, key2, ... , keyN } = 객체 이름 

예시 2) 파라미터에서 구조 분해하기

	const coffeeBrnad = {
    	name: "메가 커피",
      	best: "아이스 아메리카노",
      	where: "역 근처"
    };
    
    function myFunction({ name, where, best }) {     
      const text = `${where} ${name}의 가장 잘 팔리는 음료는 ${bset}입니다.`;
      
      console.log(text);
    }

	myFunction(coffeeBrand);

📌 객체 안의 함수 넣기


객체의 값으로 함수를 넣을 수 있다.

	const myDog = {
      name: "땡구",
      sound: "왈왈!",
      say: function hello() {
        	console.log(this.sound);
      }
    };
	
	myDog.say();
	// result
	// 왈왈!

객체 내부에 함수가 사용되면 this는 자신이 속한 객체를 가리킨다.
함수를 선언할 때는 이름이 없어도 되지만, 화살표 함수를 사용하게 되면 this가 가리키는 것이 달라 제대로 작동하지 않는다.

화살표 함수에는 this가 없고 화살표 함수를 둘러싸는 (상위) 스코프 블
록의 this를 참조하게 되기 때문이다.




[참고자료]
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

profile
누구나 이해할 수 있도록

0개의 댓글