자바스크립트 객체

javascript-basic-grammer-05.md

개요

• javascript 재학습하면서 잊고 있던것, 긴가민가 했던것 재학습하면서 기록

자바스크립트의 기본 자료형

• 숫자, 문자열, 불, 객체, 함수, undeifined

자바스크립트의 배열

• 객체를 기반으로 만들어졌음
• typeof([]): object

자바스크립트 객체의 메서드에서 자기 자신이 가진 속성을 사용할 때 this를 사용해야함

• 자기 자신이 가진 속성이라는 것을 표시할 때는 this키워드를 사용
• C++, java, C# 과 같은 프로그래밍 언어는 같은 객체 내부에서 this 키워드를 생략할 수 있음
• 하지만, 자바스크립트는 this키워드를 생략할 수 없음

var person = {
  name: 'ㅇㅇㅇ',
  eat : function (food) {
    alert(this.name + '이 ' + food + '을/를 먹습니다.');
  }
};
person.eat('밥');

자바스크립트에서 객체와 반복문

• 객체는 단순 for문으로 객체의 속성을 살펴보는 것이 불가능
• for in문을 사용해야함

var person = {
  name: 'ㅇㅇㅇ',
  price: '111원',
  language:'한국어',
  supportOS:'wind 32/64',
  subscription:true
};
var output = "";
for (var key in person) {
  output += '* ' + key + ': ' + person[key] + '\n';
}
alert(output);

in 키워드

• in 키워드를 for 키워드와 별도로 사용하면 해당 키가 객체안에 있는지 확인할 수 있음

var output = "";
var student = {
  이름: '응',
  국어: 92, 수학: 98,
  영어: 96, 과학: 98
};
// true 출력
output += "'이름' in student: " + ('이름' in student) + '\n';
// false 출력
output += "'성별' in student: " + ('성별' in student);
alert(output);

with 키워드

• with 키워드는 복잡하게 사용해야 하는 코드를 짧게 줄여주는 키워드임

var student = {
  이름: '응',
  국어: 92, 수학: 98,
  영어: 96, 과학: 98
};
var output = "";
with (student) {
  output += '이름: ' + 이름 + '\n';
  output += '국어: ' + 국어 + '\n';
  output += '수학: ' + 수학 + '\n';
  output += '영어: ' + 영어 + '\n';
  output += '과학: ' + 과학 + '\n';
  output += '총점: ' + (국어 + 수학 + 영어 + 과학);
}
alert(output);

window 객체

• 웹브라우저에서 동작하는 자바스크립트의 최상위 객체
• 웹브라우저에서 동작하는 자바스크립트의 모든 변수와 함수는 window 객체의 속성과 메서드임

자바스크립트 객체의 동적으로 속성 제거

• delete 키워드 사용
• delete 키워드 뒤에 삭제하고자 하는 객체의 속성을 입력
• 객체의 속성을 입력할 때는 typeof 키워드처럼 괄호를 사용해도 되고 사용하지 않아도 됨
• 존재 하지 않은 속성을 delete 하면 스크립트 오류도 발생하지 않고 아무일도 발생하지 않음

옵션 객체

• 함수의 매개변수로 전달하는 객체를 일반적으로 옵션 객체라고 함
• 매개변수로 전달하는 객체를 옵션 객체라고 부르는 경우가 너무 일반화 되서 필수로 입력해야 하는 요소가 있는 객체도 옵션 객체라고 부르는 경우가 많음

참조 복사와 값 복사

기본 자료형의 값 복사

• 자바스크립트는 기본자료형(숫자, 문자열, 불)을 복사할 때 값 복사를 함

객체의 깊은 복사

• 새로운 객체를 만들고 for in 반복으로 키와 값을 하나하나 옮기는 방법
• close()를 이용해 복사하는 방법

전개 연산자를 사용한 배열 - ECMAScript 6

배열 복제

• ECMAScript 5까지는 자바스크립트에서 배열을 복제할때 for문을 돌아 index별로 복사를 해야했음

var originalArray = [1, 2, 3, 4];
var newArray = [];
for (var i = 0; i < originalArray.length; ++i) {
  newArray[i] = originalArray[i];
}
console.log(newArray);

• ECMAScript 6에서 추가된 전개 연산자를 사용하면 다음과 같은 형태로 배열의 내용을 복제할 수 있음

var originalArray = [1, 2, 3, 4];
var newArray = [...originalArray];
console.log(newArray);

배열 병합

• 전개 연산자를 두 번 사용하면 배열을 병합할 수도 있음

var originalArray = [1, 2, 3, 4]; 
var otherArray = [100, 200, 300, 400];
var newArray = [...originalArray, ...otherArray];
originalArray[0] = 9;
console.log(newArray);