[코딩앙마] 자바스크립트 기초 강좌 (객체, 메소드, 배열)

<객체>

 

 

* 접근, 추가, 삭제

 

* 단축 프로퍼티 

보다 간단하게 객체 작성할 수 O

name : name = name 

age : age = age

 

 

* 프로퍼티 존재 여부 확인

어떤 값이 나올지 확신할 수 없을 때 사용

 

* for ... in 반복문

객체를 순회하며 값을 얻을 수 있다 

 

 

예제1.

 

 

Jane에게 'age'가 없음에도 true로 출력되는 현상 발생 

 

// user에 age가 없거나, 20 미만이면

false로 올바르게 출력

 

 

예제2. for...in 

'key'는 다른 값들이 와도 상관없음. ex) x 

x는 Mike에 속한 프로퍼티.

 

<메소드(method)>

 

 

-> 단축해서 작성 가능 

 

function 키워드 생략

 

* 객체와 메소드의 관계, this 

 

${user.name} => ${this.name}

 

 

 

this는 실행하는 시점, 즉 런타임에 결정된다. 

sayHello의 this는 각각 boy, girl 객체이다. 

 

boy의 sayHello 메소드의 this.name은 Mike이고,

girl의 sayHello 메소드의 this.name은 Jane이 된다.

 

 

※ 주의할 점 ※

 화살표 함수로 선언했다면, 동작이 달라지게 된다.

 

화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않는다.

화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져온다. 

 

 

this를 사용하게 되면, 전역객체를 가르키게 됨.

브라우저 환경에서 전역객체: window , Node js 환경에서 전역객체: global

 

따라서, 객체의 메소드를 작성할 땐 화살표함수로 작성하지 않는것이 좋다. 

 

 

<배열(Array)>

: 순서가 있는 리스트

 

 

 

* 배열의 특징

 

1. 배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있음

 

2. length

배열의 길이를 구할 수 있다. 배열이 가지고 있는 요소의 개수를 반환.

 

 

3. push, pop, shift, unshift 메소드 

shift, unshift는 여러 요소 한번에 추가도 가능

 

4. 반복문 for 

배열을 쓰는 가장 큰 이유 중 하나는 '반복'을 위해서이다.

 

 

5.반복문 for...of 

 

배열 days를 돌면서, 요소를 day라는 이름으로 접근할 수 있다. 

for문보다 간단하지만, 인덱스를 얻지 못한다는 단점이 있다. 

 

 

 

 

출처

https://www.youtube.com/@codingangma

코딩앙마

유튜브 코딩앙마님의 '자바스크립트 기초 강좌'를 수강하고 공부한 내용을 정리한 포스팅입니다.