2025.03.10

(주의) 객체 내에서 메소드를 화살표 함수로 만들면 this는 윈도우 객체를 나타내게 된다.

<script>
  const student={
    name: "홍길동",
    age: 20,
    hobby: function(kind){
      return `${this.name}님의 취미는 ${kind}입니다.`
    }
  }

  console.log(JSON.stringify(student, null, 2));
  //메소드는 JSON으로 표현 못함.
 //객체는 출력 못함. 출력하기 위해서 JSON 형식으로 바꾸어 출력해야함.

  //객체의 속성과 메소드 확인
  console.log(`이름: ${student.name}`);
  console.log(`나이: ${student.age}`);
  console.log(`취미: ${student.hobby("축구")}`);
  //student["name"] == student.name 같은 의미

  //속성 추가
  student.addr="강남";
  student.score=[90,98,100];
  console.log(JSON.stringify(student, null, 2));  

  //속성 삭제
  delete student.age;
  console.log(JSON.stringify(student, null, 2));

</script>

<script>
  let fruits=["apple","grape"];
  
  //복사(참조하고 있는 주소가 복사)
  let copy_fruits=fruits;
  
  //전개 복사(내용을 복사하는 것)
  let deep_fruits=[...fruits];
  
  let data=[
  	{
      name: "홍길동",
      age: 23,
      ssn: "202303",
      grade: 3,
    },
    {
      name : "이강산",
      age : 20,
      ssn : "202301",
      grade : 4,
    }
  ];

  //자바스크립트 객체를 JSON 문자열로 변환
  let j_data=JSON.stringify(data);
  console.log(j_data);

  //JSON 문자열을 자바스크립트 객체로 변환
  console.log(JSON.parse(j_data));

</script>

배열 반복(Array Iteraion)

-forEach( )
배열명.forEach(콜백함수)
배열 내부 요소 사용해 콜백함수 호출

-map( )
배열명.map(콜백함수)
각 배열 요소에 함수를 수행하여 새로운 함수 생성

-find( )
배열명.find(콜백함수)
콜백함수 반환값이 true인 요소 반환, true인 요소가 여러개면 처음 찾은 요소 반환

-findIndex( )
배열명.findIndex(콜백함수)
찾은 요소의 인덱스 반환, 없으면 -1 반환

-filter( )
콜백함수 반환값이 true인 요소만 모아 새로운 배열 생성

-method chaining(메소드 체이닝)
어떤 메소드가 리턴하는 값을 기반으로 연속으로 사용하는 것

예시)

<script>
  const numbers = [0,1,2,3,4,5,6,7,8,9];

  numbers
  .filter((value)=> value % 2 === 0)
  .map((value)=>value * value)
  .forEach((value)=>{
    document.write(value + "<br>")
  });
</script>