목차
객체(Object)
객체(Object)는 JavaScript에서 매우 중요한 데이터 타입이다. 변수에 기억할 수 있는 데이터 타입은 기본(원시) 타입과 객체 타입 두 가지 뿐인데, 그 중 하나인 것이다.
객체는 키(key)-값(value) 쌍을 포함하는 데이터다. 중괄호 안에 키-값 쌍을 작성해서 객체를 생성한다. 여러 키-값 쌍은 쉼표로 구분하여 생성한다. 객체의 키와 값은 국어사전의 단어와 정의라고 볼 수 있다.
const 객체 = {
'키1': 값1,
'키2': 값2,
}
HTML의 설명 목록(dl > dt + dd)이나 CSS의 스타일 블록이 객체와 유사하다고 볼 수 있다.
객체에 포함할 수 있는 값
객체는 JavaScript에서 유효한 모든 값을 포함할 수 있다. 즉, 문자열이나 숫자와 같은 기본 타입과 함수나 배열 같은 객체 타입을 모두 저장할 수 있다.
const 객체 = {
숫자: 101,
문자: '안녕!',
불리언: false,
널: null,
언디파인드: undefined,
심볼: Symbol('객체'),
빅인트: 910n,
배열: [],
객체: {},
함수: () => {},
}
함수를 객체의 값으로 포함하는 속성을 특별히 메서드(Method)라고 부른다. 메서드는 함수처럼 호출(사용)할 수 있고, 점 표기법이나 대괄호 표기법을 사용할 수 있다.
h1.getFontSize = function() {
return h1['font-size']
}
// 점 표기법
h1.getFontSize()
// 대괄호 표기법
h1['getFontSize']()
객체 속성 값 읽기
객체의 키는 속성(Property)이라고 부른다. 속성 값을 읽기(가져오기) 위해서는 두 가지 방식을 사용한다.
- 점 표기법
- 대괄호 표기법
// 점 표기법
const 속성_값 = 객체.속성_이름
// 대괄호 표기법
const 속성_값 = 객체[속성_이름]
일반적으로 점 표기법을 많이 사용하지만, 다음과 같은 경우에는 대괄호 표기법을 사용한다.
- 속성 이름이 따옴표로 묶인 경우
- 변수로 속성을 읽어야 할 경우
속성 이름으로 유효하지 않은 방법을 사용하려면 속성 이름을 따옴표로 묶는다. 이럴 때는 점 표기법(오류)이 아닌 대괄호 표기법을 사용한다.
const h1 = {
'font-weight': 200,
"font-size": '2.65rem',
}
console.log(h1['font-weight'])
속성 이름으로 변수를 불러오려면 대괄호 표기법을 사용해야 한다. 변수를 통해 속성을 가져와야 할 때 사용한다.
const h1 = {
'font-weight': 200,
"font-size": '2.65rem',
}
let property = 'font-weight'
console.log(h1[property])
객체 속성 값 쓰기 및 삭제
객체의 속성 값은 점 표기법이나 대괄호 표기법을 사용하여 설정한다. 일반적으로 점 표기법을 사용한다.
// 점 표기법
객체.숫자 = 301
// 대괄호 표기법
h1['font-weight'] = 400
delete 키워드를 사용해 객체의 키-값 쌍을 삭제한다. 삭제도 점이나 대괄호 표기법을 사용한다.
// 점 표기법
delete 객체.숫자 = 301
// 대괄호 표기법
delete h1['font-weight'] = 400
함수는 값으로 취급
함수는 값으로 취급한다. 일급 객체(First class object), 또는 고차 함수(Higher-order Function)라고 표현하기도 하는데 둘 다 함수는 값으로 취급한다는 뜻이다.
- 일급 객체 = 함수에 인수로 넘기거나, 변수에 대입 가능한 연산 지원
- 일급 함수 = 함수를 객체와 동일하게 사용 가능 (함수 = 객체 = 값)
함수는 값으로 취급하기 때문에 다음과 같은 일을 할 수 있다.
- 인수로 함수를 전달할 수 있다.
- 함수에서 함수를 반환할 수 있다.
조건문
조건문은 if ... else 문을 사용하여 특정 상황에서 프로그램의 작동을 조건부로 제어한다. 프로그램의 실행 방식을 제어하기 때문에 제어 흐름(Control Flow)문으로 부르기도 한다.
조건이 여럿인 경우에는 if와 else 외에도 else if 문을 사용하여 비교한다. 여러 조건을 순차적으로 검사할 때 사용한다. 일반적으로 else의 순서는 맨 마지막이다.
// 조건 하나만 있을 때
if (조건) {
console.log('참 같은 값이군요!')
} else {
console.log('거짓 같은 값이군요!')
}
// 조건이 여럿일 때
if (조건1) {
console.log('조건1이 맞군요!')
} else if (조건2) {
console.log('조건2가 맞군요!')
} else {
console.log('조건1도 조건2도 아니군요!')
}
모든 조건은 표현식이므로 참 같은 값(truthy), 또는 거짓 같은 값(falsey)인지 평가한다. JavaScript에서 값을 거짓(falsey)으로 평가하는 경우는 다음의 6가지다.
- false(boolean)
- undefined
- null
- 0(number)
- ""(string, 빈 문자열)
- NaN(Not a Number, 숫자 + undefined)
조건문 내부에서 평가되는 표현식은 자동으로 불리언(Boolean) 타입으로 변경된다.
if (10 - 8 - 4 + 2) {
console.log('조건이 참입니다.')
} else {
console.log('조건 계산 값이 0이므로 거짓(falsey)으로 평가됩니다.')
}
비교 연산자
비교 연산자는 4가지 주요 유형이 있다.
- 보다 크다(>) / 크거나 같다(>=)
- 보다 작다(<) / 작거나 같다(<=)
- 동일(==) / 완전히 동일(===)
- 다름(!=) / 완전히 다름(!==)
동일/다름과 완전히 동일/완전히 다름은 JavaScript의 타입 자동 변환에 의해 결과가 다르게 평가된다. 동일/다름은 타입을 숫자로 자동 변환하여 값을 비교(느슨한 비교 loosely-typed)하고, 완전히 동일/완전히 다름은 타입을 변환하지 않고 타입과 값을 모두 비교(엄격한 비교)한다.
'24' == 24 // true
'24' === 24 // false
'24' != 24 // false
'24' !== 24 // true
객체 비교
객체(Object) 타입은 기본(Primitive) 타입과 다르게 처리되기 때문에 객체를 엄격한 동치(===)나 느슨한 동치(==, 동등)로 비교할 수 없다.
아래 코드의 야무와 꼬리는 코드 상 동일한 객체로 보이더라도 실제로는 다르다. 엄격한 동치와 느슨한 동치 연산자 모두 사용해 비교해도 모두 falsey로 평가한다.
const 야무 = { isHavingFun: true }
const 꼬리 = { isHavingFun: true }
console.log(야무 == 꼬리) // false
console.log(야무 === 꼬리) // false
객체(Object)는 참조(Reference)로 비교
동치 연산자를 사용하여 객체를 비교하는 것은 두 객체가 같은 참조(쌍둥이로 비유하자면 각각의 신분증)를 가지고 있는지 확인하는 것이다. 그래서 객체를 비교하면 항상 false로 평가된다.
만약 꼬리에 야무를 할당하면 꼬리가 야무를 참조하기 때문에 야무와 꼬리를 비교하면 true로 평가된다.
const 야무 = { isHavingFun: true }
const 꼬리 = 야무
console.log(야무 == 꼬리) // true
console.log(야무 === 꼬리) // true
기본 타입 값은 다른 변수에 할당하면 값이 복사된다. 그래서 복사된 변수를 변경해도 변수의 값은 바뀌지 않는다. 하지만 객체 타입은 변수에 참조되기 때문에 참조된 변수를 변경하면 원본 변수의 값도 함께 바뀐다.
객체의 참조는 같은 집에 사는 두 사람으로 볼 수 있겠다. 집의 인테리어를 바꾸면 두 사람의 집 인테리어가 모두 바뀌는 것처럼 말이다. 혹은 본명과 별명처럼 볼 수도 있겠다.
두 객체가 같은 속성과 값을 가지고 있는지 확인하려면 객체의 각 속성과 값 쌍을 비교해야 하는데, 이때는 루프(Loop, 동일한 일을 수차례 반복하는 것)를 사용해야 한다.
오늘 하루를 돌아보며
객체의 참조를 배우면서 메모리에서는 어떤 일이 일어나는지 배웠다. 대학에서 처음 메모리에 대해 배울 때는 너무 어려워서 하나도 이해하지 못했다고 생각했다. 그런데 오늘 수업에서 객체 비교와 메모리에 대한 설명을 듣는데 전부 이해됐다. 너무 쉽게 이해돼서 처음 메모리에 대해 배울 당시 뭐가 어려웠는지 이해가 안 될 정도였다. 물론, 오늘 수업 때는 깊게 들어가지 않고 가볍게 짚고 넘어가는 식이었지만, 대학 때 들었던 강의 내용이 떠오르면서 깊이 있게 이해된 것 같다. 정말 신기한 경험이었다.
지금은 이해하지 못했더라도 이런 퍼즐 조각을 많이 수집할수록 JavaScript라는 언어, 더 나아가 프로그래밍에 대한 이해의 폭이 넓어질 것이다. 당장 모르겠고 어렵다고 내려놓는 것이 아니라, 한 번이라도 더 들어보고 살펴보면 나중에 한 번에 이해될 때가 올 거다. 조급해하지 말고 천천히 지금 할 수 있는 일부터 해나가자!
