[Javascript 기초] 객체(Object) - 가온 코딩

객체(Object)

 

목차

1. 객체 나타내는 방법
2. 접근, 추가, 삭제

3. 단축 프로퍼티

4. 프로퍼티 존재 여부 확인
5. for... in 반복문

6. 예제

 

1.객체 나타내는 방법

 

Superman인 이름이 clark이고 나이가 33인 인물을 객체로 표현해보자

const superman = {
	name: 'clark',
    age: 33,
}

코딩앙마 - 자바스크립트 기초 강좌 : 100분 완성( https://youtu.be/KF6t61yuPCY) 1:17:50

객체는 {}로 나타내고,

name은 키(key)

'clark'은 값(value)이라고 부른다.

 

새로 더 추가하고 싶을 때는 ,(쉼표)를 사용해서 구분한다.

마지막 줄에 쉼표는 없어도 되지만, 있는게 나중에 혹시 수정할 때 편하다.

 

여기에서는 일단 키와 값을 합쳐 프로퍼티라고 부르겠다.

 

2. 접근, 추가, 삭제

코딩앙마 - 자바스크립트 기초 강좌 : 100분 완성( https://youtu.be/KF6t61yuPCY) 1:18:19

 

 

3. 단축 프로퍼티

 

단축 프로퍼티를 활용하면 더 간단하게 나타낼 수 있다.

 

변수가 이미 선언되었을 때 객체를 나타낸다고 생각해보자

const name='clark';
const age=33;

const superman={
 name: name,
 age: age,
 gender: 'male',
}

name: name, age: age 이렇게 중복되어있는 게 보인다.

 

이렇게 중복되는 값은 생략할 수 있다.

const name='clark';
const age=33;

const superman={
 name,	// name: name
 age,	// age: age
 gender: 'male',
}

 

 

4. 프로퍼티 존재 여부 확인

 

만약 존재하지 않는 프로퍼티에 접근하면 어떻게 될까? undefined라고 나온다.

그전에 존재하는지 안 하는지 확인할 수 있는 방법이 

 

'키(key)' in 객체이름;

 

이다.

true, false로 값이 나온다.

const superman = {
 name: 'clark',
 age: 33,
}

superman.birthDay;	// undefined 존재하지 않는 값 출력

'birthDay' in superman; // false

'age' in superman; // true

 

5. for... in 반복문

for(let key in superman){
 console.log(key)
 console.log(superman[key])
}

 

 

6. 예제

 

예 1)

객체 출력하는 법

const superman = {
 name: 'clark',
 age: 30,
}

console.log(superman.name);		// "clark"
console.log(superman['age']);	// 30

// 객체 자체를 찍었을 경우
console.log(superman);	// Object { age: 30, name: "clark" }

 

예 2)

추가하는 방법

const superman = {
 name: 'clark',
 age: 30,
}

// 프로퍼티 추가
superman.hairColor = 'black';
superman['hobby'] = 'football';

console.log(superman);	// Object { age: 30, hairColor: "black", hobby: "football", name: "clark" }

 

예 3)

지우는 방법

const superman = {
 name: 'clark',
 age: 30,
}

// 프로퍼티 삭제
delete superman.age;

console.log(superman);	// Object { name: "clark" }

 

예 4)

이름과 나이를 받아서 객체를 반환하는 함수 만들기

function makeObject(name, age){
 return {
  name, // name: name
  age, // age: age
  hobby: 'football'
  }
}

const Mike = makeObject('Mike', 30);
console.log(Mike);	// Object { age: 30, hobby: "football", name: "Mike" }


// 값이 있는지 확인하기(근데 아래 방법은 적절하지 않다, 예제 5를 보자)
console.log('age' in Mike);	// true
console.log('birthday' in Mike);	// false

 

 

예 5)

user가 성인인지 아닌지 판별하는 함수를 만든다고 생각해보자.

function isAdult(user){
 if(user.age < 20){
  return false;
 } // else 적어도 되고 안적어도 됨, 어차피 if가 실행되지 않으면 {}로 입장이 안돼서 return true로 간다.
  return true;
}

const Mike = {
 name: 'Mike';,
 age: 30
};

// age가 없는 객체 생성
const Jane = {
 name: "Jane"
};

// 성인인지 아닌지 확인
console.log(isAdult(Mike))	// true
console.log(isAdult(Jane))	// true	이러면 원하는 값이 아니다..

이런 경우, Jane의 나이를 입력하지 않았는데도 불구하고 성인인지 묻는 if문에 true를 반환했다. 

그러면 if문에 age가 있는지 없는지도 같이 걸러내 줘야 될 것이다.

 

function isAdult(user){
 if(!('age' in user) || //user의 age가 없거나
  user.age < 20){ // 20살 미만이거나
  return false;	// false 반환
 } // else 적어도 되고 안적어도 됨, 어차피 if가 실행되지 않으면 {}로 입장이 안돼서 return true로 간다.
  return true;
}

const Mike = {
 name: 'Mike';,
 age: 30
};

// age가 없는 객체 생성
const Jane = {
 name: "Jane"
};

// 성인인지 아닌지 확인
console.log(isAdult(Mike))	// true
console.log(isAdult(Jane))	// true	이러면 원하는 값이 아니다..

 

 

예 6)

for...in

Mike 객체 안에 key가 뭐가 있는지, value가 뭐가 있는지 확인할 수 있다.

const Mike = {
 name: "Mike",
 age: 30
};

// Mike 객체 안에 Key가 뭐가 있냐
for(x in Mike){

 console.log(x) // "name" "age"
}

// Mike 객체 안에 Value가 뭐가 있냐
for(x in Mike){

// Mike['name'] -> Mike['age']
 console.log(Mike[x]) // "Mike" 30
}

 

참고자료

코딩 앙마 - 자바스크립트 기초 강좌 : 100분 완성(https://youtu.be/KF6t61yuPCY)