본문 바로가기

JavaScript/JS 초급&개념

[JS] 3장-1. 데이터 타입(기본/참조 타입, null, undefined)과 프로퍼티

반응형

3-1. 데이터 타입과 연산자

기본 타입: Number, String, Boolean, Undefined, Null
참조 타입: Object, Array, Function, 정규식

기본 타입

기본 타입: 하나의 값만을 가짐

참조 타입

참조 타입: key-value 형태로, 여러 개의 프로퍼티를 포함할 수 있음
Ex) window 객체

console.log(window)

리터럴 방식과 new 객체 생성 방식

var obj = new Object(); // 객체 생성자 방식 - 내장에서 들고 있는 클래스
var obj = {}; // 객체 리터럴 방식 - 생성자로 굳이 만들 필요X
new는 엔진을 비교적 더 소모한다. 리터럴을 사용하자

프로퍼티

프로퍼티: 기본 타입, 객체, 배열, 함수 등 모든 타입을 값으로 가질 수 있는 객체

console.log(typeof obj); // console 또한 내장 함수
console.log(typeof obj); // object - typeof는 데이터의 타입을 반환

3-2. 객체 프로퍼티 다루기

var obj = { name: 'ecount', age: 20, office-partition: "803 class" }

 

1) 대괄호 표기법:

obj['name']
obj['office-partition']

 

2) 마침표 표기법: 

obj.name
// obj.office-partition // 에러
-는 연산자이기 때문에, partition이라는 변수가 정의되지 않았다는 오류가 발생.
가운데 특수문자가 들어간 경우는 대괄호 표기법을 써야 함

3-3. null과 undefined

undefined: 선언만 하고 할당은 안했을 경우
null: 할당은 한 것, 다만 빈 값을 준 것

null === undefined // false - 둘은 다른 것이다

3-4. for ... in

for (var i=0; i < [1,2,3]; i++) { }
for (var i in [1,2,3]) { }

for (var props in obj) {
  console.log(props, obj[props]);
}

// 어떤 게 먼저 출력될지 모름 - 순서 보장이 되진 않는다.
// 프로퍼티를 순회할 때 주로 씀

3-5. 프로퍼티 삭제

delete obj.age; // 프로퍼티 삭제됨
delete obj; // obj는 삭제 안됨

3-6. 참조 타입의 특성

JS에서 기본 타입을 제외하고는 모든 값은 객체
객체 비교는 같은 참조값을 가져야 true

var num = 100;
var objA = { value: 100 };

function changeArg(num, obj) {
	num = 200;
	obj.value = 200;

	console.log(num);  //200
	console.log(obj); // { vlaue: 200 }
}

console.log(num); //100 - 반영 안됨
console.log(obj); //{ value: 200 }; - 변경값이 반영됨
기본 타입을 arguments로 쓸 때는 복사한 값을 사용하고,
참조 타입을 arugments로 쓸 때는 참조값 그대로를 넘기기 때문에 객체의 값을 변경할 수 있습니다.

 

// 결국 리턴하는 거랑 매개변수로 참조타입 받아서 하는거랑 결과는 같을수있다
// 뭐가 좋고 나쁘고는 없음
var result = {}

function addProps(obj) {
  obj.result = true;
}

function resultProps() {
  return {
    result: true;
  }
}

addProps(result);
console.log(result); // { result: true } - 객체가 만들어짐

result = resultProps();
console.log(result); // { result: true } - 객체가 만들어짐
반응형

'JavaScript > JS 초급&개념' 카테고리의 다른 글

[JS] 5장. 자바스크립트의 메모리 관리  (0) 2023.06.13
[JS] 4장. 배열  (0) 2023.06.13
[JS] 3장-2. 프로토타입  (0) 2023.06.13
[JS] 2장. 브라우저, 자바스크립트  (0) 2023.06.13
[JS] 1장. ES6란?  (0) 2023.06.13