배열과 객체

수툴리 양·2021년 5월 23일

자바스크립트(기초)

목록 보기

4/9

1. 객체 Object

자바스크립트의 객체(object)는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.

✮ Pass-by-reference ; 객체는 mutable, 참조값(주소)을 가짐
*자바스크립트의 객체는 mutable, js는 런타임 시 결정되는 동적 언어
[type A]
let studentA = {name: jayYang, age: 22};
let studentB = studentA;
console.log(studentA.name, studentB.name); // jayYang, jayYang
studentB.name = sootulliYang;
console.log(studentA.name, studentB.name); // sootulliYang, sootulliYang
console.log(studentA === studentB); // true
⏏︎ 같은 참조값을 가리키고 있으므로, 한 객체의 프로퍼티값을 변경하면 A, B 두 객체의 프로퍼티 값이 모두 변경되어 있음
[type B]
let studentA = {name: jayYang, age: 22};
let studentB = {name: jayYang, age: 22}; 
console.log(studentA === studentB); // false
⏏︎ 서로 다른 참조값(주소)를 가리킴, 각 객체의 프로퍼티 키와 밸류가 같을 뿐

⁑ Pass-by-value ; premitive data type은 값이 복사되어 전달됨

var a = 1;
var b = a; // a의 값을 b에 복사
console.log(a, b); // 1, 1
b = 10;
console.log(a, b); // 1, 10 출력, b의 value는 a의 값을 복사해온 것이므로, b에 새로운 값을 덮어씌워도 a와 무관

1-1. 프로퍼티 property

property는 key: value 로 구성, 프로퍼티 키는 식별자(identifier).
객체가 소유한 프로퍼티에 새로운 값을 할당하면 프로퍼티 값은 갱신됨(js는 동적 언어로, 객체에 생성되지 않은 프로퍼티를 추가 및 삭제(delete(연산자) obj.propertykey)할 수 있음)

*이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 순서를 보장하지 않음

프로퍼티 값(value) 접근 방법은 obj.propertykey, ```obj['key'] 두 가지.

1-2. 메소드 method

js에서 함수는 일급 객체, 값으로 취급 가능
프로퍼티 값으로도 함수를 쓸 수 있고 이 경우 메소드라 부름

2. 객체 생성 방법

literals

var person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function() {
    console.log('Hi! My name is ' + this.name);
  }
};

new Object()
빈 객체를 먼저 만드는 것
템플릿인 class 틀을 가지고 생성한 object를 instance라 한다.
*객체 리터럴 방식으로 생성된 객체는 결국 빌트인(Built-in) 함수인 Object 생성자 함수로 객체를 생성하는 것을 단순화시킨 축약 표현(short-hand)

var person = new Object();
person.name = 'male';
person.sayHello = function() {
  console.log('Hi! My name is ' + this.name);
};

*위 두 방법은 프로퍼티 value만 다른 다수의 객체를 생성할 때 번거로움

Constructor(생성자) 함수
객체를 생성하기 위한 템플릿(class)처럼 사용하여 프로퍼티 key가 동일한 다수의 객체를 간편히 생성

function Person(name, gender) {
  var married = true; // ①생성자 함수 내 선언된 일반 변수는 private하여
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
  };
}
// 인스턴스의 생성
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');

console.log(person.married); // ②외부에서 참조 불가능하므로 undefined를 출력

프로퍼티 또는 메소드 앞 this는 생성자 함수가 생성할 인스턴스 instance를 가리킴
*객체 지향 프로그래밍에서 인스턴스는 해당 클래스의 구조로 컴퓨터 저장공간에서 할당된 실체를 의미(wiki)

this에 바인딩되어 있는 프로퍼티, 메소드는 public, 즉 외부에서 참조 가능
*new 연산자와 함께 함수를 호출하면 this 바인딩이 다르게 동작한다. 자세한 내용은 생성자 호출 패턴을 참조

for-in문: 객체(배열 포함) 모든 프로퍼티에 루프를 수행, 객체의 string key를 순회, 배열엔 사용 지양(배열의 요소에만 순회X, 배열객체가 소유한 다른 프로퍼티가 있으면 그것도 순회)
js for(var index in array) ...

for of문: 배열의 요소마다 루프
js for(const value of array) ...

☻ 자료구조

배열 Array

✮ 유용한 API 10
깃허브 ↩︎

.map()

.join()

.splice()

.filter()

.reverse()

.sort()

.split()

.some()

.every()

.reduce()

.find() *callback

callbackfn

메소드와 콜백함수, 그리고 arrow function(=>)

class Student { // Student 라는 틀
  constructor(name, age, enrolled, score) { // 이 클래스 틀은 4가지의 속성 틀을 가지고 있어
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [ // students라는 배열을 만드는데,
  new Student('A', 29, true, 45), // 배열 안의 각각 객체는 Student 클래스 틀을 가진 object야.
  new Student('B', 28, false, 80), // 그리고 그 클래스는 4가지 속성틀이 있어서, 오브젝트마다 그 속성값, 즉 프로퍼티의 밸류를 지녀.
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];
// Quiz. compute students' average score
  const result = students.reduce((prev,curr) => prev + curr.score, 0)
  console.log(result / students.length);