객체
- 자바스크립트의 8가지 자료형
- 원시형(7가지)과 객체형으로 구분
- 객체형은 다양한 데이터를 담을 수 있다. (키로 구분된 데이터 집합 등)
- {...}를 이용해 객체를 생성, '키(key):값(value)' 쌍으로 구성된 프로퍼티
- 복잡한 서랍장과 비슷하다. 키: 이름표, 값: 서랍장 안 내용
리터럴과 프로퍼티
- 중괄호 {} 안에는 키:값 쌍으로 구성된 프로퍼티가 들어간다.
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30, // 키: "age", 값:30
}- 객체 user에는 프로퍼티가 2개이다.
- 프로퍼티를 추가, 삭제할 수 있다.
- 프로퍼티 값을 읽을 수 있다.
// 프로퍼티 값 얻기
alert(user.name); // John
alert(user.age); // 30let num = 100;
const user = {
name : 'john', // 프로퍼티 property
age : 30,
bark : function(bark) {
return `개가 ${bark} 짖는다.`
}
}
user.name = "david";
alert(user.bark("멍쓰"))
// {key:value}
let dic = {}; // 빈 객체
dic.boy = "소년";
dic.girl = "소녀";
dic.friend = "친구";
delete dic.girl;
// 객체 리터럴
let dic = {
boy : "소년",
girl : "소녀",
friend : "친구"
}const는 주소값만 고정하는 것이지 내용까지 전부 고정시키는 것이 아니다.
대괄호 표기법
- 여러 단어를 조합해 프로퍼티 이름을 만든 경우 프로퍼티 이름을 따옴표로 묶어줌
let user = {
name : "John",
age : 30,
"likes birds" : true // 복수의 단어는 따옴표로 묶어야 합니다.
};키에 어떤 문자열이 있던지 상관없이 동작한다.
자바스크립트는 likes birds를 읽으려면 user.으로 대신 읽을 수 없다.
키가 유효한 식별자가 아닌 경우 점 표기법 대신 대괄호 표기법을 사용한다.
alert(user['likes birds'])- 변수를 키로 활용
let key = "likes birds";
// user["likes birds"] = true; 와 같습니다.
user[key] = true;계산된 프로퍼티
- 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우 이를 계산된 프로퍼티(computed property)라고 부른다.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = { [fruit]:5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아옵니다.
};
alert(bag.apple); // fruit에 "apple"이 할당되었다면 5가 출력됩니다.[fruit]은 프로퍼티 이름을 변수 fruit에서 가져오겠다는 의미
사용자 프롬프트에 apple을 입력했다면 bag엔 {apple:5} 가 할당
단축 프로퍼티
- 실무에서 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 있음.
function makeUser(name, age) {
return {
name: name,
age: age,
// 등등
}
}프로퍼티들은 일므과 값이 변수의 이름과 동일.
프로퍼티 값 단축 구문을 사용하면 코드를 짧게 줄일 수 있다.
'in' 연산자로 프로퍼티 존재 여부 확인
- 자바스크립트 객체는 다른 언어와 달리 존재하지 않는 프로퍼티에 접근해도 에러 발생이 안되고 undefined를 반환한다.
let user = {};
alert(user.noSuchProperty === undefined); // true는 '프로퍼티가 존재하지 않음'을 의미합니다.- undefined와 비교하는 것 이욍도 연산자 in을 사용하면 프로퍼티 존재 여부를 확인할 수 있습니다.
"key" in objectlet user = { name: "John", age: 30 };
alert("age" in user); // user.age가 존재하므로 true가 출력됩니다.
alert("blabla" in user); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.for in 반복문
- 반복문 (for ... in)을 사용하면 객체의 모든 키를 순회할 수 있다.
let user = {
name : "john",
age : 30,
isadmin : true
}
for (let key in user) {
alert(key);
alert(user[key]);
}참조에 의한 객체 복사
객체 기본
- 객체의 동작 방식
변수에는 객체가 저장되어 있는 메모리 주소인 객체에 대한 참조값이 저장된다.
객체는 메모리 내 어딘가에 저장되고 변수 user엔 객체를 참조할 수 있는 값이 저장.
let user = {
name: "John"
}
화살표 함수
자바스크립트 기본
-
화살표 함수: 함수 표현식보다 단순하고 간결한 문법으로 함수를 제작
-
func는 화살표 우측의 표현식(expression)을 평가하고 평가 결과를 반환.
// 화살표 함수
// 1. function 키워드 제거
// 2. 함수의 이름을 변수로 사용
const plus = (a, b) => {
return a + b;
}
// 화살표 함수 간소화(구현이 한 줄이면서 바로 return 일 때)
// 바로 값을 리턴할 때 리턴을 생략하고 축약해서 작성 가능
const plus = (a, b) => a + b;
// 인수가 하나일 경우 괄호 생략 가능
const plus = num => num * 2;
// 인수가 한 개도 없을 경우
const plus4 = () => alert("더할 데이터가 없습니다.");- (a, b) => a+b; 는 실행되는 순간 표현식 a+b를 평가하고 그 결과를 반환
메소드와 this
객체는 속성과 메소드로 구성
let user = {
name : "john",
age : 30,
say() {
alert(this.name) // this == user
}
};
user.say();this : 자기 자신 객체(user)
user.name으로 써도 되지만 this.name을 쓰는 이유?
let user = {
name : "john",
age : 30,
say() {
alert(user.name)
}
};
let admin = user; // 주소값을 복사
user = null;
admin.say();user의 주소값을 admin에 복사하고 user를 null로 변경했을때 admin의 say()를 호출하면 user의 값을 불러오기 때문에 이 경우 this를 사용해야 한다.
주소값을 복사할때 객체의 내용까지는 복사가 되지 않기 때문이다.
자유로운 this
let user = {name : "john"};
let admin = {name : "admin"};
function say() {
alert(this.name)
}
user.age = 25;
user.func = say; // 내가 추가한 key = func
admin.func = say;
user.func(); // this == user
admin.func(); // this == admin
user['func']();
admin['func']();화살표 함수 안에서의 this
// 화살표 함수 안에서의 this
let user = {
name : "john",
say() {
let arrow = () => {
alert(this.name)
}
arrow()
}
}
user.say();화살표 함수는 일반 함수와 다르게 고유한 this를 갖지 않고, 자기 상위의 this를 갖고온다 : 자신의 함수 상위의 this(객체)
화살표 함수와 일반 함수의 유일한 차이점!
알고 쓰자!