본문 바로가기

Computer/Front-end

[부스트코스] 자바스크립트의 시작-(8) 자바스크립트 객체(순회/프로퍼티와 메소드)


요즘 아이유-내 손을 잡아에 치여서 주구장창 듣고 있다

아이유 왜이렇게 이뻐요? 얼굴 보는 것만으로도 인생이 행복해짐 얼굴이 대유잼이야

근데 노래도 잘해 못하는 거 없는거 맞지?

아이유보는 내 얼굴


자바스크립트 객체(순회/프로퍼티와 메소드)

순회

우리가 코드를 짜다보면 객체의 모든 값을 호출해야 할 때가 있다. 이걸 순회라고 부른다.
순회를 해야 하는 경우, 배열에서는 for이나 while반복문을 사용해 배열 안의 요소들을 모두 꺼낸다.
그렇다면 객체는?
객체도 이러한 반복문이 존재한다.

for/in문- for / in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회할 수 있다
이 반복문은 반복할 때마다 객체의 열거할 수 있는 프로퍼티의 이름을 지정된 변수에 대입한다.
이렇게 대입받은 변수를 이용하면 루프 안에서 객체의 열거할 수 있는 프로퍼티에 순차적으로 접근할 수 있다.
//구조
for (변수 in 객체) {
    객체의 프로퍼티 개수만큼 호출하는 실행문
}

※ 열거할 수 있는 프로퍼티란 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티를 의미

+for/of 문도 있지만 강좌에서는 설명하지 않았기에 참조 사이트 링크를 추가한다
https://yjshin.tistory.com/entry/JavaScript-자바스크립트-for-문-for-in-문-for-of-문

 

프로퍼티와 메소드

프로퍼티: 속성이라는 의미로 자바스크립트에서는 객체 내부의 속성을 의미한다.(객체 내부의 변수라고 생각해도 된다)
메소드:
함수 정의를 포함한 프로퍼티. (쉽게 설명하면 객체에 저장된 함수라고 보면 된다)
//메소드 만들기

var person={
  name: ['Bo', 'no'],
  age: 32,
 hello: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
 //이때 객체 person 있는 함수 person()는 객체에 포함된 함수, 즉 메소드
 }
};

person.hello()//객체person에 저장된 메소드 hello호출

어 근데 그럼 저 메소드에 사용된 this는 무슨 의미?

this= 자바스크립트 코드를 “소유(owns)”하는 객체(object). 쉽게 메소드가 쓰여진 객체를 가리키는 키워드라고 보면 된다.
(*this는 변수가 아니고 키워드!!! 때문에 값을 변경할 수 없다)

변수명이 바뀌거나 기타 상황일 경우 코드를 많이 바꿔야 하는데. this를 쓸 경우 변수명이 바뀌어도 문제가 덜하기 때문에 사용한다. 자세한건 이쪽을 참조: https://nykim.work/71

 

실습을 하려고 했는데..시간이 없어서 다음으로.....

갤러리에 이미지 추가(기능도 같이)

그리고 좀 버튼을 없애고 특정 부분을 누르면 넘기는 식으로 만들고 싶은데 또 자료 한번 뒤져야지


www.boostcourse.org/cs124/lecture/194607/

 

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org