JAVASCRIPT 25 Introduction To Object

 object literal syntax

property

array는 ordered data structure  순서가 중요함

object는 unordered data structure  키가 그 역할을 대신한다.

자바스크립트의 object 에 대해 알아보자!

객체(object)는 자바스크립트의 데이터 구조로써 배열과 다르게 property(특성)을 가진다.

const jonasArray = [
    'jonas',
    'Schmedtmann',
    2022 - 2001,
    'teacher',
    ['Micheal', 'Peter', 'Steven']];

위에 있는 배열과 같은 객체를 만든다면

const jonas = {
    fristName: 'jonas',
    lastName: 'Schemedtmann',
    age: 2022 - 2001,
    job: 'teacher',
    friends: ['Micheal', 'Peter', 'Steven']};

다음과 같다 배열과 다른 점은 {   } 중괄호를 사용하며 특성(property)이 존재한다.


객체를 선언 했으니 이를 꺼내는 방법에는 

dot notation

console.log(jonas.lastName);//dot notation

 점(.) 을 이용하여 특성을 찾으면 그 특성 값을 내놓게 된다. 이때 . 은 연산자로써 연산자 계산 순서가 괄호 다음으로 높다. 그리고 . 뒤에는 표현형이 오면 안된다.

bracket notation

console.log(jonas['last' + 'Name']); //bracket notaion expression okay!

이번에는 배열과 비슷하게 대괄호 안에 특성을 넣어 특성값을 찾는 방식이 있다.

이때 dot notation 과 다른 점은 표현형을 사용해도 된다는 것이다. 위의 예시 처럼 표현형이 사용 가능하면 여러가지 응용이 가능하니 주의 하자.


배열과 매우 비슷하다는 걸 알 수 있는데 배열은 a[배열의 숫자] 가 들어 갔다면 

객체는 a[특성(property)] 를 사용함을 확인 할 수 있다. 따라서 객체의 특성은 배열의 순서를 대신 한다는 걸 확인 할 수 있다.  다시 말하자면 배열은 ordered data structure 그리고 객체는 unordered data structure 이다.


만약 객체의 특성이 정의 되지 않은 걸 넣으면 어떻게 될까 바로 undefined 자료형을 내놓는다. 여기서 undefined는 falsy value 로 if/else에서 활용 가능하다. 아래 예시를 보자.

if (jonas[interestedIn]) {
    console.log(jonas[interestedIn]);
} else { console.log('Wrong request!');}

여기서 변수 interestedIn 이 jonas의 특성을 가지고 있지 않다면 undefined 자료형을 가져 

else가 실행 될 것이다. 

























댓글

댓글 쓰기

이 블로그의 인기 게시물

Javascript this keyward

This 란? This 는 모든 실행 컨텍스트(모든 함수)에 대해 생성되는 특별한 값이다. 그리고 this 키워드가 사용된 함수의 "owner" 의 값을 가진다 this는 값이 똑같지 않다. this 의 값은 함수가 어떻게 호출됬는지에 따른다. 그리고 this의 값은 오직 함수가 실제로 호출될 때만 할당된다. Method => this 는 method를 소유한 객체를 가르킨다. Simple function call => this = undefined (엄격 모드에서만 해당된다. 아닐 경우 전역 객체인 window 의 값을 가져온다.) Arrow function => this = lexical this 이다. 즉, 자신을 둘러싼 환경의 this 를 그대로 승계받는다. Event Listener = > this => handler 함수가 붙어 있는 DOM 요소이다. new,call,apply,bind => later course.. this 는 사용하고 있는 함수를 절대 가르키지 않는다. 또한 함수의 variable environment를 절대 가르키지 않는다. 1 2 3 4 5 6 7 8 9 10 11 12 const  jonas  =  {   firstName:  'Jonas' ,   year:  1991 ,   calcAge:  function  () {      console .log( this );      console .log( 2037   -   this .year);   },     greet: ()  = >   console .log(`Hey ${ this .firstName}`), }; jonas.greet(); ...
자세한 내용 보기

Javascript Object vs Primitives (Primitives vs reference type)

이미지
먼저 조금은 이해가 가지 않는 코드에 대해 이야기해보자. 1 2 3 4 5 6 7 8 9 const  me  =  {   age :  21 , }   const  you  =  me; you.age  =   30 ;   console .log(you);          //30 console .log(me);           //30 me 라는 객체에서 나이에  21을 할당했다.  그리고 you 에 me 의 객체를 똑같이 넣어주고 you의 나이를 30 으로 할당했다. 이때 me 의 객체와 you 의 객체는 따로 있으므로 나이는 다르다고 생각 할 수 있다. 하지만 값은 둘 다 30으로 동일하다. 어떻게 이런 일이 일어날까 이를 알기 위해서 우선 primitives value 와 object 의 차이를 알아야 한다. 자바스크립트에서의 원시값은 7개로 int , string , boolean ,  undefined , symbol, bigint, Null 있다. 원사 값을 제외한 모든 값은 Object로 대표적으로 object literal , array , function ....... 등이 있다. 자바스크립트 엔진의 구성요소에 대해 기억하는가? 콜 스택과 메모리 힙으로 구성되어 있다. 여기서 간단하게 말하자면 원시 값 (primitive type) 은 콜 스택에 저장되고 객체 (reference type) 은 메모리 힙에 저장된다. 콜 스택 그리고 메모리 힙에서 어떻게 원시 값과 객체가 저장되는 지는 아래 글을 ...
자세한 내용 보기

javascript 15 switch statement

자바스크립트의 스위치 명령문에 대해 알아보자 스위치 명령문은 if/else 와 비슷하다. 아래 쓰인 예시를 보자.  const day = ' wednesday ' ; switch ( day ) {     case ' monday ' :   //day === monday         console . log ( ' today is monday! ' );         console . log ( ' sad day ' );         break ; 위의 코드를 보면 괄호안에 어떤 변수가 필요한지 선언해야 한다. case 옆에는 변수안의 값이 일치하는지 확인하기 위한 요소이며 type coerison이 적용되지 않아 === 처럼 strict comparison operator 라고 생각하면된다.     case ' tuesday ' :         console . log ( ' today is tuesday! ' ); //if no break code is executed until break appear     case ' wednesday ' :     case ' saturday ' :         console . log ( ' my Favorite day! ' );         break ; 위에 tuesday 에서는 break; 를 뺏는데 이 경우 아래 break 코드가 나올때 까지 모든 코드를 실행 시킨다. 따라서 wednesday 그리고 saturday는 같은 결과를 가진다.     default :         console . log ( ' good day! ' )...
자세한 내용 보기