TWD 13. JS 객체 리터럴(object literal)과 for문

JS 객체 리터럴과 for문

본 내용은 'The Web Developer 부트캠프 2023', 'Mozilla Developer Network'를 참고하여 작성했습니다.

객체(object)

• 자바스크립트는 객체 기반 프로그래밍 언어이며, 원시 값을 제외한 나머지 값은 모두 객체이다.
• 객체는 0개 이상의 프로퍼티로 구성된 집합으로, 프로퍼티는 key와 value로 구성된다.
• 객체의 모든 키는 특수문자를 제외하고 문자열로 바뀐다.
• 접근 방법은 3가지 정도가 있다.
  • 1) 객체 리터럴
    • 수처럼 객체를 생성하는 방식으로, 중괄호 { } 안에 key:value를 쉼표(,)로 구분하여 만든다.
  • 2) 생성자 함수
    • new Constructor() 방식으로 객체를 생성하는 방식이다.
  • 3) Object.create()
    • 객체.key, 객체[‘key’] 방식으로 접근한다. 메서드(함수)는 마지막에 괄호()를 붙여 호출해야 한다.

프로퍼티 프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다. 즉, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)다. 프로퍼티 키의 명명 규칙과 프로퍼티 값으로 사용할 수 있는 값은 아래와 같다.

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
• 프로퍼티 값 : 모든 값

프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.

1) 객체 리터럴

const years = {1999: 'good', 2020: 'bad'}

years['1999']
> 'good'

years[1999]
> 'good'

years['yea'+'rs']
> "good"

// 객체에 추가 방법
years['2030'] = 'cool'
> 'cool'

years.2040 = 'fantastic' // 키값은 문자만 가능
> //  Uncaught SyntaxError: Unexpected number

years.이공사공 = 'fantastic'
> 'fantastic'

years
> {1999: 'good', 2020: 'bad', 2030: 'cool', 이공사공: 'fantastic'}

2) 생성자 함수

const years = new Object();

years['1999'] = 'good';
years['2020'] = 'bad';
years
> {1999: 'good', 2020: 'bad'}

3) Object.create()

const parent = {1999: 'good', 2020: 'bad'};

// 자식 객체 생성(부모의 프로퍼티를 상속 받음)
const child = Object.create(parent);
console.log(child1[1999]);
> good

for

• 괄호로 감싸고 세미콜론으로 구분한 세 개의 선택식과 반복을 수행할 문(주로 블럭문)으로 이루어져 있습니다.
• for (초기식; 조건식; 증감식){}

for (var i = 0; i < 9; i++) {
   console.log(i);
}
> 0
> 1
> ...
> 8

for…of

• ES6에 추가된 새로운 반복문
• for...of 는 배열의 반복에서 사용 ([Symbol.iterator] 속성을 가지는 컬렉션에 사용)
• Array, Map, Set, String, TypedArray, arguments 등이 있다. (Object는 해당 X)
• for (변수 in 객체) {}

for (const val of ['a', 'b', 'c']) {
	console.log(val); 
} 
> a
> b
> c

for (const val of 'abc') { 
	console.log(val); 
} 
> a
> b
> c

for ( let val of {a: 1, b: 2, c: 3 }) {
	console.log(val);
}
> // TypeError: object is not iterable 

test = {a: 1, b: 2, c: 3 }
for (let val of Object.values(test)){
  console.log(val);
}
> 1
> 2
> 3

test = {a: 1, b: 2, c: 3 }
for (let val of Object.keys(test)){
  console.log(val);
}
> a
> b
> c

for…in

• for...in은 객체의 반복에서 사용
• 배열에 사용할 경우 해당 배열의 index가 출력된다.
• 객체의 key값에 접근 가능, value값에는 직접 접근 불가(key를 이용한 접근 가능)
• 이제는 잘 사용하지 않는 문법이며, for...in의 기능은 for...of로 충분히 접근이 가능하다.
  • 객체에 접근해야 하는 만큼 for 반복문 중 성능 측면에서 제일 속도가 느리고 좋지 못하다. 그래서 특정한 상황이 아니면 피한다고 한다.
• for (변수 in 객체) {}

for (var i in ['a', 'b', 'c']) {
	console.log(i); 
}
> 0
> 1
> 2

for (var i in 'abc') {
	console.log(i); 
}
> 0
> 1
> 2

for (var prop in {a: 1, b: 2, c: 3 }) { 
	console.log(prop, obj[prop]); 
} 
> a 1
> b 2
> c 3