[공부 필기] JavaScript 문법 공부 18일차

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/object

객체

 

✅ 객체

- (복습) 자바스크립트에겐 8가지의 자료형이 있다.

   »숫자형, 문자형, 불린형 등 하나의 데이터만 담을 수 있는 자료형을 "원시형"이라고 부른다.

- 키로 구분된 데이터 집합, 복잡한 개체(entity)와 같이 다양한 데이터를 담을 수 있는 자료형이 "객체형"이다.

   » 자바스크립트를 잘 다루려면 객체를 잘 이해해야한다.

 

- 객체는 중괄호 {} 를 이용해서 만들 수 있으며 중괄호 안에는 "키(key): 값(value)"이 쌍으로 들어간다.

   » 이렇게 키와 값의 쌍으로 구성된 것을 "프로퍼티"라고 한다.

   » 프로퍼티는 중괄호 안에 여러 개 넣을 수 있다.

   » 키(key)에는 문자형, 값(value)에는 모든 자료형이 허용될 수 있다.

   » 프로퍼티 키(key)는 프로퍼티 이름이라고 부르기도 한다.

 

- 객체 생성 방법 예시

   » 방법1. 객체 생성자를 호출하기

   » 방법2. 중괄호를 이용해서 객체를 선언하기

      중괄호를 이용해서 객체를 선언하는 것을 "객체 리터럴"이라고 한다.

let user = new Object(); // 객체 생성자 문법
let user = {}; // 객체 리터럴 문법

// 출처 : 모던 자바스크립트(https://ko.javascript.info/object)

 

✅ 리터럴과 프로퍼티

- 중괄호 안에는 아래와 같이 프로퍼티가 들어간다.

   » 왼쪽은 "키(key)", 오른쪽은 "값(value)"이다.

   » 프로퍼티 키 = 프로퍼티 이름 = 프로퍼티 식별자

let owner = {
	name: "soySauce",
	age: 1,
	city: "Seoul"
};

 

✅ 프로퍼티 읽기, 추가, 삭제

- 프로퍼티 읽기 : 점 표기법(dot notation)을 이용한다.

"use strict";

let owner = {
	name: "soySauce",
	age: 1,
	city: "Seoul"
};

console.log(owner.name);
console.log(owner.age);
console.log(owner.city);

- 프로퍼티 추가 : 점 표기법(dot notation)을 이용한다.

owner.phone = "010-xxxx-xxx";

- 프로퍼티 삭제 : delete를 이용한다.

delete owner.phone;

 

✅ 프로퍼티 이름(프로퍼티 키)

- 프로퍼티 키(프로퍼티 이름)을 여러 단어로 조합해서 만들 경우, 따옴표로 묶어줘야한다.

- 예시

"use strict";

let owner = {
	"name(nickname)": "soySauce",
	age: 1,
	city: "Seoul"
};

console.log(owner);

 

✅ 프로퍼티 끝

- 프로퍼티 끝은 쉼표로 끝나도 되고, 쉼표를 생략해도 된다.

- 만약 프로퍼티 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태로 보이기 때문에 추가, 삭제, 이동이 쉬워진다고 한다.

   » 이렇게 프로퍼티 끝에 붙이는 쉼표를 "trailling(길게 늘어지는) 쉼표" 혹은 "hangin(매달리는) 쉼표"라고 부른다.

"use strict";

let owner = {
	"name(nickname)": "soySauce",
	age: 1,
	city: "Seoul", // 쉼표
};

 

✅ const로 선언된 객체

- 보통 const는 변수를 상수화하기 때문에 중간에 수정하면 "Assignment to constant variable"과 같은 에러가 발생한다.

"use strict";

const num = 10;
console.log(num); // 10

num = 20;
console.log(num); // Assignment to constant variable 에러 출력

- 하지만 객체(Object)는 const로 선언되어도 수정될 수 있다.

   » 여기에서 수정된다는 말은 프로퍼티를 추가, 삭제하는 등을 말한다. (user 안의 내용은 고정하지 않기 때문에)

   » 변수(user)를 변경할 수는 없다. (user를 상수화하기 때문에)

"use strict";

const user = {
	name: "soySauce",
};

user.age = 1; // 프로퍼티 추가 가능
console.log(user);

user = {
	city: "Seoul",
}

console.log(user); // Assignment to constant variable 출력

 

✅ 대괄호 표기법

- 앞서 프로퍼티 키(프로퍼티 이름)는 여러 단어로 조합할 수 있다고 했다.

   » 다만, 여러 단어를 조합하는 경우 따옴표로 묶어야 한다.

- 하지만 "여러 단어로 구성된 프로퍼티 키"는 점(dot) 표기법으로 접근할 수 없다.

"use strict";

let owner = {
	"name(nickname)": "soySauce",
	age: 1,
	city: "Seoul",
};

owner.name(nickname) = "kim"; // 불가능

 

- 점(dot) 표기법을 사용하고 싶다면 프로퍼티 키에는 공백이나 소괄호 등 유효하지 않은 특수 문자를 제거하고

   숫자로 시작하지 않아야 하며, $ 혹은 _를 포함하여야 한다.

"use strict";

let owner = {
	name_$nickname: "soySauce",
	age: 1,
	city: "Seoul",
};

console.log(owner.name_$nickname); // 가능

 

- 혹은 대괄호 표기법(square bracket notation)을 사용하면 된다.

   » 대괄호 표기법은 키에 어떤 문자열이 있어도 상관없이 작동한다.

   » 대괄호 안에서 따옴표로 묶어줘야 한다는 것을 유의해야한다.

"use strict";

let owner = {
	"name(nickname)": "soySauce",
	age: 1,
	city: "Seoul",
};

console.log(owner["name(nickname)"]); // 대괄호 표기법

 

- 대괄호 표기법의 또 다른 장점

   » 반드시 프로퍼티 키가 그대로 들어갈 필요는 없다.

   » 이때 key는 런타임에 평가되므로 사용자에게 값을 입력 받아서 프로퍼티 키로 쓸 수도 있다.

   » 점 표기법은 이렇게 사용할 수 없다.

"use strict";

const key = "name(nickname)";

let owner = {
	"name(nickname)": "soySauce",
	age: 1,
	city: "Seoul",
};

console.log(owner[key]); // 변수 key가 들어갈 수 있음

 

✅ 계산된 프로퍼티

- 중괄호 {...}를 이용해서 객체를 선언하는 것을 "객체 리터럴"이라고 한다. (위에서 언급함)

- 이 객체 리터럴 안에 프로퍼티 키가 대괄호로 둘러싸여 있는 경우가 있다고 한다.

   » 아마도 아래와 같은 경우..?

"use strict";

let teamName = prompt("부서명을 입력하세요", "확인불가");
let teamCount = +prompt("부서 인원이 몇 명입니까?", "1");

let group = {
	[teamName]: teamCount,
};

- 이렇게 객체 리터럴 안에 프로퍼티 키가 대괄호로 둘러싸여 있는 경우를 "계산된 프로퍼티"라고 부른다.

   » [teamName]: teamCount 를 계산된 프로퍼티라고 한다.

- 위의 코드는 프로퍼티 키(프로퍼티 이름)을 변수 teamName에서 가져오겠다는 의미이다.

 

- 대괄호 안에는 더 복잡한 표현식이 올 수도 있다고 한다.

- 예시

"use strict";

let teamName = prompt("부서명을 입력하세요", "확인불가");
let teamCount = +prompt("부서 인원이 몇 명입니까?", "1");

let group = {
	[teamName + "팀"]: teamCount,
};

 

✅ 단축 프로퍼티

- 실무에선 프로퍼티 값을 기존 변수에 받아와 사용하는 경우가 있다고 한다.

   » 그리고 아래와 같이 사용하는 경우가 흔하다고 한다.

   » 코드를 보면 알 수 있듯이 프로퍼티 키와 프로퍼티 값이 같다.

"use strict";

function makeUser(name, age) {
  return {
    name: name,
    age: age,
  };
}

let user = makeUser("John", 30);
alert(user.name); 

// 출처 : 모던 자바스크립트(https://ko.javascript.info/object)

- 이때, 프로퍼티 값 단축 구문(property value shorthand)을 사용하면 코드를 짧게 줄일 수 있다고 한다.

   » name:name 대신에 name만 적어주면 된다고 한다.

"use strict";

function makeUser(name, age) {
  return {
    name,
    age: age,
  };
}

let user = makeUser("John", 30);
alert(user.name); 

// 출처 : 모던 자바스크립트(https://ko.javascript.info/object)

 

너무 새로운 개념을 한번에 배워서 정리가 필요할 것 같다.

여기서 한번 끊고 복습 후 다음 진도를 나가기로 했다.