1007 TIL (객체/함수)

이해가 되지 않는 객체를 다른 강의로 들어보겠습니다.
참조: 수코딩 자바스크립트 강좌 유튜브

객체(object)

자바스크립트 자료형중에 하나인 객체에 대해서 배워보도록 하겠습니다.
객체는 배열과 함께 참조자료형에 속하는 자료형인데. 하나의 데이터 형태에 여러개의 데이터를 표현하기 위해서 사용하는 자료형입니다.

객체는 { } 열었다가 닫아줌으로써 데이터를 표현할 수 있는데요.

let obj = {};

이렇게 비어있는 중괄호를 변수에 할당하게 되면, 할당된 변수는 비어있는 객체 데이터를 가지고 있는 변수가 됩니다. 단, 지금은 객체의 데이터가 없기때문에 비어있는 객체인데요. 이 비어있는 객체 데이터를 채울려면

let arr = [10];

배열은 바로 값을 적었던 것과는 다르게,

let obj = {키:값};

객체는 키(key)와 값(value)을 사용해야합니다. 키와 값을 한데 묶어서 속성(property)이라고 부르기도 하는데, 객체를 활용하는 방법에 대한 구체적인 내용을 코드를 보면서 자세하게 배워보도록 하겠습니다.

// 국어, 영어, 수학, 과학 점수
let student1 = [90, 70, 80, 60];

console.log(student1[0]); //국어 점수
console.log(student1[1]); //영어 점수
console.log(student1[2]); //수학 점수
console.log(student1[3]); //과학 점수

지금 보시는 코드는 배열 자료형이 변수에 할당되어져 있는데요,
이 배열 데이터는 어떤 학생이 국어,영어,수학,과학 점수를 배열로 만들어서 변수에 할당한겁니다. 이렇게 각각의 배열값에 접근하기 위해서는 우리가 앞에서 배웠던 것 처럼 대괄호 연산자를 이용해서 index번호로 접근 할 수 있는데요. 해당 코드를 실행해보면 배열로 만들어져있는 국어,영어,수학,과학 점수를 하나씩 접근해서 정상적으로 출력되는 것을 확인할 수 있습니다.

자 그런데 이런 배열에 대한 문제점이 있습니다. 이 배열에 속해져있는 데이터는 직관적이지 않다라는 겁니다. 만약 코드를 작성한 사람이 아니라 다른 사람이 이 배열을 봤을 때, 이 배열에 속해져있는 각각의 값들이 국어,영어,수학,과학 점수라는 걸 한번에 파악할 수 있을까요?
배열은 이렇게 주석이 따로 존재하지 않는다면 누구라도 한번에 배열에 속해져있는 값이 국어,영어,수학,과학이라는걸 생각할 수 없을 것입니다.
하지만 객체는 다른데요. 배열에는 값만 있는 것과는 다르게 객체는 키와 값으로 이루어져있기 때문인데요.

let  student1 = {
  koreanScore:90, // 국어 점수
  englishScore:70, // 영어 점수
  mathScore:80, // 수학 점수
  scienceScore:60 // 과학 점수
};

지금보시는 코드는 우리가 앞에서 배열로 표현했던 것 처럼, 어떤 학생이 국어,영어,수학,과학 점수를 객체로 표현한건데요. 이렇게 {} 하신다음에 콜론(:)을 중심으로 키와 값으로 데이터를 표현할 수가 있습니다. 그러면 앞에서 봤던 배열과는 다르게 이 키의 식별자 명으로 인해서 좀 더 속해져있는 데이터가 어떤 값을 나타내는 건지 배열보다는 확실하게 직관적으로 파악할 수 있습니다.

참고로 객체는 유독. 중괄호의 마지막에 세미콜론(;)을 생략하는 경우가 많은데요. 생략을 해도 코드를 실행하는 데에 있어서 문법적인 에러를 발생시키지 않기 때문입니다. 하지만 문법적인 일관성을 위해서. 중괄호 마지막에 꼭 세미콜론을 찍어주세요

그러면 여기서 우리가 앞에서 배웠던 배열은 각각의 값을 접근하기 위해서 대괄호 연산자를 이용해서 인덱스 번호로 접근 할 수 있었는데요. 그럼 이 객체는 이 각각의 속성에 접근하려면 어떻게 하면 좋을까요?

두 가지 방법으로 각각의 속성에 접근 할 수 있는데요.

// 대괄호 연산자
console.log(student1["koreanScore"]);
// 점 (마침표) 연산자
console.log(student1.englishScore);

배열과 마찬가지로 변수 이름을 적어주시고 대괄호를 열었다가 닫아준 다음에 키 이름을 문자열('',"")로 작성해주면 됩니다. 객체는 index가 따로 존재하지 않기때문에 이렇게 키 이름을 대괄호 안에다가 문자열로 적어줘야합니다.

또 다른 방법은 점 연산자를 이용한 방법인데요. 변수 이름을 적어주시고 점을 찍어준 다음에 객체의 키를 바로 적어주면 됩니다.
koreanScore 와 englishScore 에 접근하고 있으므로 각 값은
90과 70의 값이 출력하게 됩니다.

여기서 주의해야할 점은 점 연산자를 이용할 때는 대괄호 연산자처럼 키를 문자열로 표현하면 안된다는 겁니다.

let  student1 = {
  koreanScore:90, // 국어 점수
  "englishScore":70, // 영어 점수
  'mathScore':80, // 수학 점수
  scienceScore:60 // 과학 점수
};

이렇게 문자열 형태로 적어도 됩니다. 문자열로 적을 때 다른 점은 띄어쓰기가 가능하다는 것입니다. 대신 키를 문자열로 띄어쓰기로 적은 것을 점 연산자로 쓰는 것은 불가능 합니다.

함수

함수 선언식

function printHello() {
  console.log("hello");
}

함수 표현식

const [변수명] = function [함수명] () {
  //code
}

함수도 자료형이기때문에 변수에 할당이 가능하다.

자바스크립트에서 함수를 실행하는 것을 "함수를 호출한다"라고 합니다. 함수를 호출하는 방법은 '함수명();' 이렇게 하면 값이 호출이 됩니다.

함수 표현식같은 경우는 변수의 이름으로만 함수를 호출할 수 있습니다. 함수의 이름은 중요하지 않습니다. 그렇기때문에 아예 적지 않아도 문제가 되지 않는데요. 이 함수를 '익명 함수' 라고 부릅니다.

const gugudan = function ddd() {
  console.log("3 * 1 = 3");
  console.log("3 * 2 = 6");
}
gugudan();

이런식으로 변수명으로 함수를 호출합니다.

const gugudan = function() {
  console.log("3 * 1 = 3");
  console.log("3 * 2 = 6");
}
gugudan();

이렇게 함수명이 비어있는 것이 '익명함수'입니다.