자바스크립트 - 기초 정리 (3) #객체(object) #method #this #배열(array)

자바스크립트 기초 문법 정리.

 

참고 강좌 영상 : https://youtu.be/DuXA1t6hl3U

 

위 강좌 #12 ~ #14 를 참고하였다.

 

 

---

객체(Object)

아래와 같은 자료형을 객체라고 한다.

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

name을 key,

'clark'를 value(값)라고 한다.

* 마지막 쉼표는 선택이지만, 수정 시 용이하므로 넣는 걸로.

(근데 이제 JSON에서는 저러면 오류난다. 개빡쳐)

 

객체의 값을 CRUD하는 법

// Create
superman.gender = 'male';
superman['hairColor'] // 'black';

// Read
superman.name // 'clark';
superman['age'] // 33;

// Update
superman.name = 'tom';
superman['age'] = 17;

// Delete
delete superman.hairColor;

 

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

superman.birthday; // undefined
'birthday' in superman; // false
'age' in superman; // true

프로퍼티 존재 여부 확인은 'in'을 이용하는데, key에만 사용할 수 있다.

 

 

for ... in 반복문

객체의 프로퍼티를 순회하면서 반복문을 사용할 수 있다.

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

// name
// clark
// age
// 33

key가 'name'꼴의 string 자료형이라,

superman.key 는 사용할 수 없다.(superman.'name' 이 되니까.)

 

makeObject = (name, age) => {
    return {
        name: name,
        age: age,
    }
}

const Mike = makeObject('Mike', 30);
console.log(Mike);

name, age 인자를 받아 객체를 생성하는 함수이다.

 

method : 객체 프로퍼티로 할당된 함수

객체 안에는 값 뿐만 아니라 함수도 저장할 수 있다.

const superman = {
    name: 'clark',
    age: 33,
    fly: function() {
        console.log('fly');
    }
};

superman.fly();

// 축약형
const superman = {
    name: 'clark',
    age: 33,
    fly() {
        console.log('fly');
    }
};

 

메서드와 this

let boy = {
    name: 'Mike',
    showName: function() {
        console.log(boy.name);
    }
};

boy.showName();

위 코드는 문제가 있다.

let man = boy;

이렇게 선언하면 man 객체는 boy와 같은 정보를 가진다. 그런데,

boy = null;
man.showName();

boy에 null을 넣고 man에서 showName() 메서드를 실행하면 오류가 발생한다.

메서드 정의에서 boy.name을 불러올 수 없기 때문이다.

이때 boy.name 대신 this.name을 사용할 수 있다.

 

let boy = {
    name: 'Mike',
    showName: function() {
        console.log(this.name);
    }
};

객체 안에서 this는 객체를 담고 있다.

하지만 화살표 함수는 this를 가지고 있지 않다.

화살표 함수 내부에서 this를 사용하면 global, widnow와 같은 전역 변수를 불러온다.

따라서 객체의 메서드는 화살표 함수를 사용하지 않는 것이 좋다.

 

 

 

 

배열(Array)

numbers = [1, 2, 3, 4, 5];

numbers.length // 5 (요소 개수)

numbers.push(6); // 끝에 요소 추가
console.log(numbers); // [1, 2, 3, 4, 5, 6]

numbers.pop(); // 끝 요소 삭제
console.log(numbers); // [1, 2, 3, 4, 5]

numbers.unshift(-1, 0); // 앞에 요소 추가 (복수 가능)
console.log(numbers); // [-1, 0, 1, 2, 3, 4, 5]

numbers.shift(); // 앞 요소 삭제
console.log(numbers); // [0, 1, 2, 3, 4, 5]

 

배열을 쓰는 대표적 이유 중 하나는 반복문인데, 용례는 아래와 같다.

let days = ['mon', 'tue', 'wed'];

// 반복문 : for
for(let index = 0; index < days.length; index++){
	...
};

// 반복문 : for ... of
for(let day of days){
	...
};