혼공 JS 5주차

나야나·2022년 2월 20일

혼공JS

목록 보기

5/5

기본미션

객체, 속성, 메소드가 무엇인지 설명하기

객체란?
"실제로 존해하는 사물"을 의미하고 "이름과 값으로 구성"된 속성을 가진 자바스크립트의 기본 데이터 타입을 객체(Object)라고 한다.

객체를 선언

  <script>
    const array = { 
    제품명: "7D 건조망고", 
    유형: "당절임", 
    성분: "망고, 설탕, 메타중아황산나트륨, 치자황색소",
    원산지: "필라핀" 
   	};
  </script>

객체는 위처럼 중괄호{...}로 생성하며, 형태의 자료를 쉼표(,)로 연결해서 사용하며, 키(Key)를 사용한다.

객체의 요소에 접근

객체는 대괄호[...] 또는 온점(.)을 이용하여 객체의 요소에 접근할 수 있다.

    console.log("product 제품명", product.제품명);
    console.log("product 유형", product.유형);
    console.log("product 성분", product.성분);
    console.log("product 원산지", product.원산지);

객체 추가 또는 제거

객체를 생성 이후 동적 속성 추가(동적으로 객체를 추가), 동적 속성 제거(delete 키워드를 사용하여 객체의 속성을 제거)가 가능 하다.

속성이란?
객체 내부에 있는 값을 속성(property)이라고 한다.

<script>
    const object = {
      number: 273,
      string: "구름",
      boolean: true,
      array: [52, 273, 103, 32],
    };
</script>

위의 코드처럼 객체의 속성도 모든 형태의 자료형을 가질 수 있다.

메소드란?
객체의 속성 중 함수 자료형인 속성을 메소드(method)라고 한다.

<script>
    const pet = {
      name: "구름",
      eat (food) { 
        alert(this.name + "은/는" + food + "을/를 먹습니다.");
      },
    };
    
// 메서드 호출
    pet.eat("밥");
</script>

내가 생각하는 코드의 작동 순서..

"name" 의 키 값을 갖고 있는 pet이라는 변수를 생성한다.
eat이라는 메소드를 생성한다.
밑에서 pet.eat이라는 메소드를 호출하여 eat에 값을 받아 alert가 작동해 결과값을 보여준다.

객체는
속성과 메소드를 가질 수 있는 모든 것은 객체이며 배열 ,함수 등도 객체에 포함된다. 기본 자료형은 포함되지 않는다.

기본 자료형의 승급

<script>

	// 기본 자료형은 속성을 포함하지 않기 때문에 변수를 생성하고 그 변수에 10이라는 값을 추가해도 추가되지 않는다.
    const f = 237;

    f.sample = 10;

    console.log("f", f.sample);
    
    ----------------------------------------
    // const 객체 = new 객체 자료형 이름() 
    // 이렇게 사용하면 일시적으로 객체로 승급되어 속성 추가가 가능해진다.

    const a = new Number(273);

    a.sample = 10;

    console.log("a :", a.sample);
</script>

결과!

프로토타입으로 메소드 추가하기

위처럼 일시적으로 객체로 승급시키는 것이 아닌 prototype를 이용하여 속성과 메소드를 추가할 수 있도록 한다.

<script>

	// indexOf(data) >= 0; 코드를 사용하면 문자열이 포함되어 있으면 true , 포함되어 있지 않으면 false로 결과값이 return 된다.
    
    String.prototype.contain = function (data) {
      return this.indexOf(data) >= 0;
    };
    Array.prototype.contain = function (data) {
      return this.indexOf(data) >= 0;
    };

    const a = "안녕하세요";
    console.log("안녕 in 안녕하세요", a.contain("안녕"));
    console.log("없는데 in 안녕하세요", a.contain("없는데"));

    const b = [273, 32, 103, 57, 52];
    console.log("203 in [273,32,103,57,52]: ", b.contain(273));
    console.log("0 in [273,32,103,57,52]: ", b.contain(0));
</script>

결과!

내가 생각하는 코드결과

contain 메소드를 추가한다.
"안녕하세요" 라는 문자열을 가진 a 변수를 선언한다.
1번째에는 "안녕"이라는 값이 존재하기 때문에 true,
2번째에는 "없는데"라는 값이 존재하지 않기 때문에 false가 나온다. 배열도 마찬가지의 결과임을 확인할 수 있다.

선택미션

p.288 확인문제 3번 풀고, 풀이과정 설명하기

모질라 문서에서 Math 객체와 관련된 내용을 읽고 사인 90도의 값을 구해보세요. 참고로 사인 90도는 1입니다. 아주 단순하게 생각해서 구현하면 0.8939966636005579라는 결과가 나옵니다. 0.8939966636005579라는 결과가 나왔다면 왜 그런지, 그리고 어떻게 해야 제대로 사용할 수 있는지 구글 검색등을 활용해서 알아보고 코드를 수정하세요

<script>
    const degree = 90;

    const sin = Math.sin(degree);

    console.log("degree", sin);
</script>

결과!

정말 단순하게 구현하면 0.8939966636005579라는 결과값이 나온다.

그래서 변경한 코드를 변경했다.

<script>
    const degree = 90;

    const radian = Math.sin((degree * Math.PI) / 180);

    const sin = Math.sin(Math.PI / 2);

    console.log("radian", radian);
    console.log("sin 값", sin);
</script>