자바스크립트 기초 (5) - 객체, 객체 method, this, 배열

이번 포스트는 코딩앙마님의 강의를 보고 작성되었습니다.

[자바스크립트 기초 강좌 : 100분 완성 - YouTube](https://www.youtube.com/watch?v=KF6t61yuPCY)

---

1. 객체

const superman = {
    name : "Clark",
    age : 33,
}

객체는 중괄호 { }로 여닫고, key: value의 프로퍼티가 들어가고, 각 프로퍼티는 , 로 구분한다.

객체에 접근하는 방법

• superman.name // clark
• superman['age'] // 33

객체에 값 추가하는 방법

• superman.gender = 'male'
• superman['hairColor'] = 'black'

객체 프로퍼티 삭제

• delete superman.hairColor;

객체 프로퍼티 존재 여부 확인

• 'birthDay' in superman // false
• 'age' in superman // true

   

// 객체 단축 프로퍼티
const superman = {
    name, // name : name
    age, // age : age
    gender : 'male'
}

key와 value가 같을 경우에는 name : name을 name으로 축약 가능하다.

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

for (key in Mike){
    console.log(Mike[key]);
}; // "Mike", 30

객체 for ... in 문에서 객체를 돌면서 객체의 key 값을 가지고 연산할 수 있다.

---

2. 객체 method, this

method

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

const man = {
    name : "Mike",
    age : 30,
    fly : function(){
    console.log("hi");
    }, // fly(){console.log("hi")}로 표현 가
};

this

: 해당 객체 내에서 다른 프로퍼티의 값을 가져올 때 사용

const a = {
    age : 30,
    isAdult : if(this.age > 19){
    return true;
    } else {
        return false;
    }
};

 

this.age는 곧 a.age를 의미한다.

 

 

예제)

let boy = {
    name : "Mike",
    sayHello (){
    console.log(`Hello. I'm ${this.name}`);
    },
};


let girl = {
    name : "Jane",
    sayHello (){
    console.log(`Hello. I'm ${this.name}`);
    },
};


boy.sayHello(); // Hello. I'm Mike
girl.sayHello(); // Hello. I'm Jane

✔️ 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않는다.

✔️ 화살표 내부에서 this를 사용하면, 그 this는 외부로부터 값을 가져온다.

• browser : window
• Node.js : global 

---

3. 배열

: 순서(index)가 있는 리스트

let students = ['철수', '영희', '영수', '준호', '선주', '유영'];
console.log(students[0]); // 철수
students[0] = '민정' // 배열 값 수정 가능
console.log(students[0]); // 민정


let days = ['월', '화', '수'];
days.push('목');
console.log(days); // ['월', '화', '수', '목']
days.pop();
console.log(days); // ['월', '화', '수']
days.unshift('일');
console.log(days); // ['일', '월', '화', '수']
days.shift();
console.log(days); // [월', '화', '수']


for(let day of days){
    console.log(day);
}; // "월", "화", "수"

• 배열은 문자 뿐만 아니라 숫자, 객체, 함수 등도 포함할 수 있다.
• arr.length : 배열의 길이
• arr.push(val) : 배열 끝에 값 추가
• arr.pop() : 배열 끝 값 제거
• arr.unshift(val) : 배열 처음에 값 추가, 여러 값 한 번에 추가 가능
• arr.shift() : 배열 처음 값 제거
• for... of 문을 사용해서 배열의 값 처음부터 끝까지 꺼내서 사용 가능