ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 객체 (Object)
    FRONTEND/Javascript 2022. 7. 18. 11:44

    객체

    원시형(primitive type)
    자바스크립트 여덟 가지 자료형 중 일곱 개는
    오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있음

    객체(object)
    다양한 데이터를 담을 수 있음.
    키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장.
    주소록에 적합한 자료 구조.

    객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로
    자바스크립트를 잘 다루려면 객체를 잘 이해해야함

    1. 객체 선언

    let objectName = {
    keyName1 :'valueName1',
    keyName2 :'valueName2',
    keyName3 :'valueName3'
    }
    (객체 리터럴 문법)
    중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용.

    let user = {
    	firstName : ‘yebbang',
    	lastNanme : ‘kim’,
    	email : mm@gmail.com,
    	city : ‘Busan’
    	}
    
    여기서 firstName은 key
    ‘yebbang’은 value. (key - value pair)
    • const로 선언된 객체는 수정 가능
    const user = {
      name: "John"
    };
    
    user.name = "Pete"; // (*)
    
    alert(user.name); // Pete

    (*)로 표시한 줄 오류 발생 x.
    const는 key만 고정, value는 고정 x
    user=...를 전체적으로 설정하려고 할 때만 오류 발생.

    2. 조회

    1) dot notation

    key값이 정적일 때

    user.firstName ; // 'yebbang'

    2) bracket notation

    key값이 동적일 때

    User[‘firstName’]; // ‘webbing’
    

    3) in 연산자

    object에 해당하는 key가 있는지 확인

    tweet { writer : ’yebbang’; 
    		createAt:2022-01-01 12-03:33; 
    		content :'댓글’;
    		}
    ‘content’ in tweet; // true
    ‘age’ in tweet; // false

    ex) tweet에서 key ‘writer’ 값을 불러올 때

    tweet { writer : ’yebbang’; 
    		createAt:2022-01-01 12-03:33; 
    		content :'댓글’;
    		}
    tweet.writer; // ‘yebbang’ 
    tweet[‘writer’]; ‘yebbang' 
    let keyname = ‘writer' tweet[keyname]
    // ‘yebbang' tweet[keyname] === tweet[‘writer’]
    

    3.추가

    objectName[ ‘keyName’ ] = ‘value'
    objectName.keyName = ‘value'

    ex)tweet에 key, value 값을 추가할 때

    tweet { writer : ’yebbang’; 
    		createAt:2022-01-01 12-03:33; 
    		content :'댓글’;
    		}
    
    
    tweet[ ‘category’ ] = ‘잡담'
    tweet.isPublic = true;
    tweet.tags = [‘#일상’, ‘#소통’]

    4.변경

    tweet { writer : ’yebbang’; 
    		createAt:2022-01-01 12-03:33; 
    		content :'댓글’;
    		}
    
    
    tweet.writer = 'doong'
    tweet['writer']= 'doong'
    // tweet.writer === 'doong'

    5.삭제

    delete objectName['keyName']

    delete tweet[‘writer’] 

    6. key값들의 배열 만들기

    const obj = {
      a: 1,
      b: 2,
      c: 3,
    };
    
    Object.keys(obj) // [a, b, c]

    'FRONTEND > Javascript' 카테고리의 다른 글

    스코프 (Scope)  (0) 2022.07.18
    원시 자료형과 참조 자료형  (0) 2022.07.18
    배열 (Array)  (0) 2022.07.18
    자료형의 종류와 설명  (0) 2022.07.18
    변수 선언 방법과 차이 (let / var / const)  (0) 2022.07.18
Designed by Tistory.