[혼자 공부하는 자바스크립트] Ch6

2022.10.24 - [⛵ 부트캠프, 항해99/JavaScript 문법 뽀개기] - JavaScript 문법 뽀개기

JavaScript 문법 뽀개기

2022.11.18 - [⛵ 부트캠프, 항해99/TIL] - Javascript_221118 TIL

Javascript_221118 TIL

 

Ch 6-1. 객체의 기본

ㅇ 객체 Object

- 객체란? 이름과 값으로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입!

- 배열의 요소에 접근할 때 index를 사용하는 것처럼, 객체는 key를 사용함.

- 객체는 중괄호 { } 로 생성하며 키: 값 이런 형태로 쉼표(,)로 연결해서 입력함. ex) product = {제품명 : '망고'}

- 객체 뒤에 대괄호 [...]를 사용하고  key를 입력하면 객체의 요소에 접근할 수 있음. 또는 온점(.)을 사용할 수도 있음.

ex) product['제품명'] or product.제품명

 

✔️ "식별자로 사용할 수 없는 단어"를 key로 사용한 경우

: 객체를 생성할 때 key는 식별자와 문자열을 모두 사용할 수 있습니다.

그러나, 식별자로 사용할 수 없는 단어를 key로 사용할 때는 "with space ~!@#$%_^&*()+" 이렇게 문자열을 사용해야 합니다!

그리고 식별자가 아닌 문자열을 key로 사용했을 때는 무조건 대괄호[...]를 사용해야 객체의 요소에 접근할 수 있습니다!! 

+ More 식별자 ~ 객체 관련

https://studyjs.tumblr.com/post/71299697139/213-%EC%8B%9D%EB%B3%84%EC%9E%90%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%A0-%EC%88%98-%EC%97%86%EB%8A%94-%EA%B2%83%EB%93%A4

2.1.3 식별자로 사용할 수 없는 것들

 

- 객체 내부에 있는 값은 속성 property 라고 합니다. *즉, metod ⊂ property 속성 중에서 '동작'인 것

- 객체의 속성 중 '함수 자료형'인 속성을 특별히 메소드 method 라고 합니다. 다른 함수들과 달리 '메소드'라는 특별한 이름을 사용하는 이유는, 메소드가 다른 함수들과는 다르게 특별히 취급되기 때문입니다.

-> this 키워드를 사용하면, 메소드 호출 시에 해당 메소드를 갖고 있는 객체에 접근할 수 있습니다.

https://helloworldjavascript.net/pages/180-object.html

객체 (Object) | JavaScript로 만나는 세상

 

ㅇ 동적으로 객체 속성 추가/제거

: 객체 생성 이후에 속성을 추가하거나 제거하는 것

1) 동적으로 객체 속성 추가

let student = {} //객체 선언함(생성됨)

student.이름 = '윤인성' //객체에 속성 추가함
studnet.취미 = '악기'

console.log(JSON.stringify(student, null, 2))
//value JSON 문자열로 변환할 값
//replacer null로 지정되거나 생략되면 value에 전달한 객체의 모든 속성이 json 문자열에 포함됨
//space 공백의 갯수가 2

-> JSON.stringify() 메소드를 사용 *JSON? 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식

JSON.stringify(value, replacer, space)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.stringify() - JavaScript | MDN

※ 객체 생성과 동시에 동적인 key값 설정

let keyname = 'Name';
let something = {
    [keyname + 'postfix'] : 'value'
};

vs 객체 생성 후 동적인 key값 설정

let keyname = 'Name';
let something = { };
 
something[keyname + 'postfix'] = 'value';

위 두가지 방식을 사용하여 동적인 key값을 넣을 수 있습니다.

https://sassun.tistory.com/148

[JavaScript] JS객체 생성 시 key값 동적으로 할당하는 방법

2) 동적으로 객체 속성 제거

delete 객체.속성

ex) delete student.취미

 

☆ 화살표 함수 arrow function

: 전통적인 함수표현(function)의 간편한 대안이나, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-%EC%A0%95%EB%A6%AC

[JS] 📚 자바스크립트 화살표 함수 💯 완벽 정리