JavaScript : ReferenceType Object

이번에는 참조형 자료중에 객체에 대해 알아보자! 파이썬기준으로 dictionary와 유사한 형태를 갖고있지만 사용 방식이 다양하다. key : value 쌍을 갖고있지만 내부에 메서드를 포함할 수도 있다. 

---

Object (객체)

: key로 구분된 데이터 집합을 저장하는 자료형 

 

객체 구조

• 중괄호 '{ } '를 이용해 작성
• 중괄호 안에는 key : value 쌍으로 구성된 속성(property)를 여러 개 작성 가능
• key : 문자형만 허용
• value : 모든 자료형 허용 

심지어 내부에 함수(메서드)를 정의하고 호출할 수 있다

 

속성 참조

• 점(' . ', chaining operator) 또는 대괄호('[ ]')로 객체 요소에 접근
• ' . ' 의 경우는 변수 혹은 객체 호출시 사용하며 '[ ]' 의 경우는 숫자, 문자열 객체 호출시 사용한다
• 객체 안에 객체를 접근 시 혼용 가능
• key 이름에 띄어쓰기 같은 구분자가 있다면 chaing operator는 사용 불가 - > 대괄호로만 접근 가능

작성한 객체 내부 데이터 호출 방법

 

근데 왜 key를 문자형만 허용된다고 해놓고 문자열 형태로 사용하지 않았을까? 실제로는 숫자, 문자열, 객체까지 key로 사용할 수 있는데 이유는 JavaScript 내부적으로 문자열 변환 처리하기 때문이다.

객체 내부에 다양한 key 값을 출력

혼용하여도 문제 없이 출력되는 모습

 

객체 CRUD

객체를 CRUD 과정을 모든 경우를 고려하여 정리해보았다

객체 내부 데이터 추가 시 함수까지 넣어줄 수 있다.

함수 형태 호출 시 console창 출력값

 

' in ' 연산자

• 속성이 객체에 존재하는지 여부를 확인 가능 

없는 속성 호출 시에는 오류가 아니라 undefined를 반환한다

 

객체에서의 typeof 연산자

• 객체 내부의 데이터 타입을 확인

함수의 경우 실행 시 반환되는 값에 대한 데이터 타입을 확인

---

Method

 

: 객체 속성에 정의된 함수 

• object.method() 방식으로 호출
• method는 객체를 '행동=작업 수행' 할 수 있게 한다
• 'this' 키워드를 사용해 객체에 대한 특정 작업을 수행 할 수 있음

작업 수행한 것을 할당할 수 있고, 바로 출력도 가능하다

'this' keyword 

 

: 함수나 메서드를 호출한 객체를 가리키는 키워드

: 함수를 호출하는방법에 따라 가리키는 대상이 다르다 

 - > 함수 내에서 객체의 속성 및 메서드에 접근하기 위해 사용할 수 있다

this를 통해 userInfo 객체 내부로 접근

this는 바로 앞 객체를 의미하는 것을 확인

이런 것도 가능하다 ㅎㅎ

 

 

중첩된 함수에서의 this 문제점과 해결책

myFunc 함수 내부에서 forEach 함수 실행 시 결과

위에서 쓰인 this는 함수가 충첩되면서 다른 곳을 바라보고 있다

 

즉, 함수를 사용하면서 중첩된 함수 내부의 this가 재정의 된 것으로 확인할 수 있다. 이때, 해결할 수 있는 방법이 바로 앞서 배웠던 '화살표 함수'다. 화살표 함수는 자신만의 this를 가지지 않기 때문에 외부 함수 (myFunc)의 this 값을 가져와서 사용하기 때문이다.

화살표 함수를 사용하면 중첩된 함수 내부에 this가 재정의 되지 않는다

 

• 함수가 호출될 때 this를 암묵적으로 전달 받는다
• this는 함수가 '호출되는 방식'에 따라 결정되는 현재 객체를 나타낸다
• Python의 self 혹은 Java의 this가 선언 되는 즉시 값이 정해지는 것에 비해 JavaScript의this는 함수가 호출되기 전까지 값이 할당되지 않고 호출 시에 결정된다(동적으로 값이 할당) 

호출 방법	대상
단순 호출	전역 객체(window)
메서드 호출	메서드를 호출한 객체
장점 : function(method)를 하나만 만들어 여러 객체에서 재사용이 가능하다 단점 : 유연함(자유도)가 높아 실수를 범하기 쉽다  = > this의 동작방식을 충분히 이해하고 사용해야 한다

 

---

객체 문법

 

단축 속성

: key 이름과 value로 사용되는 변수의 이름이 같은경우 단축 구문을 사용하여 생략을 할 수 있다

---

단축 메서드

: 메서드 선언시 function 키워드 생략 가능

키워드와 : 표시까지 모두 지워야 한다

---

계산된 속성 (computed property name)

• key가 대괄호 ([ ])로 둘러싸여 있는 속성으로 고정된 값이 아닌 변수 값을 사용해 넣어줄 수 있음

promt()는 실행 시 웹 브라우저에서 사용자로부터 입력을 받는 함수

---

구조 분해 할당 (destructing assignment)

• 배열 또는 객체를 분해하여 객체 속성을 변수에 쉽게 할당할 수 있는 문법

변수를 할당할 때, 중괄호 { } 를 사용하여 객체를 분해 할당할 수 있다

구조 분해를 이용하여 함수의 매개변수로 활용할 수도 있다

---

전개 구문 (Object with)

• '객체 복사' : 객체 내부에서 객체를 전개
• 얕은 복사에 활용 가능

obj의 객체가 newObj에 전개 하여 복사된 모습을 확인

---

유용한 객체 메서드

• Object.keys() : 객체의 모든 key를 반환
• Object.values() : 객체의 모든 value를 반환

---

Optional chaining ( '?.' )

• 속성이 없는 중첩 객체를 에러 없이 접근할 수 있는 방법
• 만약 참조 대상이 null 또는 undefined라면 에러가 발생하는 것 대신 평가를 멈추고 undefined를 반환하고 다음 작업을 진행한다

주황 네모 표시는 평가받는 분기점을 표시한 것이다

 

헷갈리면 안되는 부분은 존재한다라는 조건을 통과해야 다음 접근을 실행한다는 것이다. 따라서 앞에서 이미 분기점이 갈렸다면 이후 오류가 발생할 수 있는 부분은 평가할 수 없다. 그러면 마구잡이로 쓰면 안되겠지?

 

Optional chaining을 사용하지 않는다면 단축평가를 이용한 && 연산자를 사용하는 방법이다

• 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 짧고 간단한 표현식으로 작성 가능
• 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 편리하게 탐색

 

?.을 남용하면

• 왼쪽 평가 대상이 없어도 괜찮은 경우에만 선택적으로 사용
• 중첩 객체를 에러없이 접근하는 것이 목적
• 선언되어있는 변수 뒤에 사용 가능

함수의 경우 Optional chaining 위치를 유의하며 적용해야한다.

 

 

---편집예정

obj?.prop	obj가 존재하면 obj.prop을 반환하고, 존재하지 않는다면 undefined를 반환
obj?.[prop]	obj가 존재하면 obj[prop]을 반환하고, 존재하지 않는다면 undefined를 반환
obj?.method()	obj가 존재하면 obj.method()를 호출하고, 존재하지 않는다면 오류: Uncaught TypeError

---편집예정

---

+ 부록

함수와 메서드의 차이?

메서드(Method)	함수(Function)
- 객체에 속한 함수를 가리키며 객체의 속성으로 정의된 함수 - 객체 내부에 정의되어있으며 객체 상태를 조작하거나 객체에 관련된 동작을 수행 - 일반적으로 객체의 상태를 변경하거나 객체의 속성에 접근하기 위해 'this' 키워드를 사용 - 예를들어 객체에 데이터를 추가하기위해 push()를 사용한다면 array에 해당하는 기능을 사용했기 때문에 push는 메서드	- 독립적으로 정의되어 있는 코드 블록으로 코드의 재사용성을 높이는데 사용 - 객체에 속하지 않으며, 전역 범위(global scope) 또는 다른 함수 내부에 정의 될 수 있음 - 객체의 상태를 변경하지 않고 입력값을 받아들여 결과값을 반환하는 등의 기능을 수행 - 함수 호출 시 일반적으로 함수 이름을 사용하여 호출

---

파이썬보다 정리해야하는 정의들이 너무 많아서 버겁지만 오히려 파이썬에서 더 재미있는 언어를 배우는 느낌이라 질리지는 않는 것 같다. Java도 이렇게 재밌었으면 좋겠다.. 근데 백준에서 코드예시보면 걱정이 태산이다...