[Let's get it 자바스크립트 프로그래밍] - 2.6 객체

객체(object)

객체는 자료형의 일종으로, 다양한 값을 모아 둔 또 다른 값을 의미한다.

• 배열 (array)
• 함수 (function)
• 배열이나 함수가 아닌 객체

1️⃣ 배열(array)

const arrayOfArray = [[1, 2, 3], [4, 5]];
console.log(arrayOfArray[0]) // [1, 2, 3]

• 배열 내부에 배열이 들어있는 형태를 이차원 배열이라고 한다.
• 배열 내부의 값을 요소(element)라고 한다.

const everything = ['사과', 1, undefined, true, null, '배열']
console.log(everything.length) // 6
console.log(everything[everything.length - 1]) // '배열'

• 배열 이름 뒤에 .length를 붙이면 배열 요소의 개수를 구할 수 있다.
• 배열의 요소 개수에서 1을 빼면 마지막 요소의 인덱스가 된다. (인덱스는 0부터 시작하기 때문)

📥 배열 요소 추가

인덱스에 직접 할당

const target = [1, 2, 3]
target[3] = 4
console.log(target) // [1, 2, 3, 4]

• 배열의 인덱스에 값을 직접 할당해서 추가할 수 있다.

unshift()

const target = [1, 2, 3]
target.unshift(0)
console.log(target) // [0, 1, 2, 3]

• unshift 메소드를 통해 배열의 맨 앞에 요소를 추가할 수 있다.

push()

const target = [1, 2, 3]
target.push(4)
console.log(target) // [1, 2, 3, 4]

• push 메소드를 통해 배열의 맨 뒤에 요소를 추가할 수 있다.

📤 배열 요소 삭제

pop()

const target = [1, 2, 3]
target.pop()
console.log(target) // [1, 2]

• pop 메소드를 통해 배열의 맨 뒤 요소를 삭제할 수 있다.

shift()

const target = [1, 2, 3]
target.shift()
console.log(target) // [2, 3]

• shift 메소드를 통해 배열의 맨 앞 요소를 삭제 할 수 있다.

splice() ⭐️

const target = [1, 2, 3]
target.splice(1, 1)
console.log(target) // [1, 3]

• splice 메소드를 통해 배열의 중간 요소를 삭제할 수 있다.
• splice 메소드는 인자를 두개 받는다.
• 첫번째는 시작 인덱스, 두번째는 제거할 요소 개수를 의미한다.
• ex. splice(1, 1) = 1번째 인덱스부터 시작해서 1개 요소를 제거한다.

const target = [1, 2, 3]
target.splice(1)
console.log(target) // [1]

• splice 메소드에 인자를 한개만 받으면, 해당 인덱스부터 끝까지 삭제하겠다를 의미한다.
• ex. splice(1) = 1번째 인덱스부터 끝까지 제거한다.

const target = [1, 2, 3, 4, 5]
target.splice(1, 3, '가', '나')
console.log(target) // [1, '가', '나', 5]

• splice 메소드를 통해 제거 뿐만 아니라, 제거한 자리에 다른 요소를 추가할 수 있다.
• ex. splice(1, 3, '가', '나') = 1번째 인덱스 부터 3개의 요소를 삭제하고, 그 자리에 '가' 와 '나' 를 채워 넣는다.

🔎 배열 요소 찾기

includes()

const target = [1, 2, 3]
const result = target.includes(3)
console.log(result) // true

• includes 메소드를 통해 인자로 받은 값이 해당 배열에 포함되어 있는지 여부를 알 수 있다.

indexOf() / lastIndexOf()

const target = [1, 2, 3]
const result = target.indexOf(3)
console.log(target) // 2

const result2 = target.lastIndexOf(3)
console.log(target2) // 2

const result3 = target.indexOf(-5)
console.log(target3) // -1

• indexOf 메소드를 통해 해당 인자가 위치한 인덱스를 알 수 있다.
• lastIndexOf 메소드는 맨 뒤 요소부터 찾는다.
• indexOf 메소드로 배열에 존재하지 않는 값의 인덱스를 찾으면 -1 값을 반환한다. ⭐️

2️⃣ 함수(function)

프로그래밍에서 함수란, 특정한 작업을 수행하는 코드를 의미한다.
변수와 마찬가지로 함수를 만드는 행위도 선언한다(declare)라고 표현한다.

화살표 함수(arrow function)

function a() {};
const c = () => {};

• 보통 함수는 function 이라는 예약어를 통해 생성한다.
• 화살표 기호를 사용한 함수를 화살표 함수(arrow function)라고 한다.

함수선언문과 함수표현식

function a() {};
const b = function() {}'

• function 이라는 키워드 뒤에 함수 이름을 넣는 방식을 함수 선언문(function declaration statement) 라고 한다.
• 함수 b와 같이 상수나 변수에 대입하는 방식을 함수 표현식(function expression)라고 한다.

함수 호출

> function a() {}
a();

• 선언한 함수를 사용하는 행위를 호출(call)한다고 표현한다.
• 함수를 선언한 뒤, 해당 함수 뒤에 ()를 붙이면 함수가 호출되어 실행된다.

return

function a() {
  return 10
}
a() // 10

• return문을 통해 함수가 반환할 값을 직접 정할 수 있다.

function a() {
  console.log("hello");
  return;
  console.log("bye");
}
a(); // hello

• console.log("bye") 보다 retrun문이 더 먼저 있기 때문에 뒤에 있는 코드는 실행되지 않는다.
• 이런 return문의 특성을 이용해서 함수의 실행을 조작할 수 있다.

인수(argument) & 매개변수(parameter) ⭐️

function a(parameter) {
  console.log(parameter);
}
a('argument'); // argument

• 함수는 인수(argument)를 받아 함수 내 매개변수(parameter)로 사용되어 적용된다.
• 함수는 인수를 여러개 받을 수 있으며, 매개변수와 인수의 개수가 일치하지 않아도 된다. 할당되지 않은 매개변수 값은 undefined가 된다.
• 화살표 함수로는 인수를 받을 수 없다. 인수는 function으로 선언한 함수에서만 사용할 수 있다.

const a = 100
function example1(x, y) {
  return (x - y) * a;
}
console.log(example1(5, 3)) // 200

function example2(x, y) {
  const a = 100
  return (x - y) * a;
}
console.log(example2(5, 3)) // 200

• example1과 example2 는 같은 동작을 한다.
• 그러나 example2와 같이 함수 자신의 매개변수나 내부 변수(또는 상수)만 사용하는 함수를 순수 함수라고 한다.
• example1은 변수가 함수 외부에 있기 때문에 순수함수가 아니다.

3️⃣ 배열이나 함수가 아닌 객체 = 객체 리터럴 ⭐️

객체는 여러개의 변수를 하나의 변수로 묶을 때 사용한다.

const name = '조현영';
const year = 1994;
const month = 8;
const date = 12;
const gender = 'M';

• 다른 사람의 정보를 추가하고 싶을 때 이미 name, year, month, date, gender 변수가 선언됐기 때문에 중복 선언할 수 없다는 불편함이 있다.

const zerocho = {
  name = '조현영';
  year = 1994;
  month = 8;
  date = 12;
  gender = 'M';
}

• 그런 불편함을 해결하기 위해 위 방식과 같이 객체를 사용해서 여러개의 변수를 하나로 묶을 수 있다.
• zerocho라는 변수를 선언해서 그 안에 정보를 모아두었다.
• 정보들은 {} 안에 묶여 있다.
• name, year, month, date, gender 같은 정보들을 속성(property)이라고 한다.
• 속성 이름은 문자열이여야 한다.
• 속성 값은 자바스크립트의 모든 값이 들어갈 수 있다.
• 변수를 통해 객체의 속성에 접근할 수 있다.
  (ex. console.log(zerocho.name) = 조현영)
  (ex. console.log(zerocho['name']) = 조현영)
• 이처럼 {}를 사용해 객체를 표현하는 것을 객체 리터럴 이라고 표현한다.

📥 객체 속성 수정하기

zerocho.gender = 'F';
console.log(zerocho.gender) =; // 'F'

• 변수.속성 = 값을 통해 주어진 값으로 속성을 수정할 수 있다.

📤 객체 속성 삭제하기

delete zerocho.gender;
console.log(zerocho.gender); // undefined

• delete 변수.속성 을 통해 특정 속성을 삭제할 수 있다.

객체 간 비교하기 ⭐️

{} === {}; // false

• 객체를 다룰 때 가장 많이 하는 실수 중 하나로, 객체 사이에 비교 연산을 하면 false를 반환한다.

const a = { name: 'zerocho' }; // 객체를 변수 a에 저장
const array = [1, 2, 'a'];
console.log(a === array[2]); // true

• 객체는 모양이 같아도 생성할 때마다 새로운 객체가 생성된다.
• 따라서 같은 객체인지 비교하려면 기존 객체를 변수에 저장해두어야 한다.

참조(reference)와 복사(copy) ⭐️

const a = { name: 'zerocho' }; 
const b = a;
a.name = 'hero'; 
// 참고로 const는 상수지만 객체 값은 변경할 수 있기 때문에 변수의 일종이라는 점을 기억하자.
console.log(b.name); // 'hero'

• 변수 a 에 객체를 할당한 뒤, 변수 b에 대입한 상황
• 변수 a의 속성값을 변경했는데, 변수 b의 속성값에도 영향을 미친다.
• 이러한 상황을 a와 b가 같은 객체를 참조한다고 표현한다.

let a = 'zerocho';
let b = a;
a = 'hero';
console.log(b) // 'zerocho'

• 위와 동일하게 변수 b에 변수 a의 값을 대입한 상황
• 객체가 아닌 값을 변수에 저장한 경우에는 참조 관계가 생기지 않는다.
• 따라서 a 값을 수정해도 b 값은 수정되지 않는다.
• 이런 상황을 복사 라고 한다.