1. 객체와 프로퍼티

  • 객체를 생성하는 것은 변수를 정의하고 초기화하는 것으로 시작
  • 객체는 연관된 여러 값을 중괄호로{ }로 묶어서 표현 할 수 있다.
  • 객체의 속성을 Property라고 한다.
    • property는 콜론 ( : ) 으로 구분한 키(key):값(value) 쌍이다. 
      키(key) 를  property name, 값(value)을 property value  라고 한다. 
    • 여러개의 프로퍼티는  콤마 ( , )로 구분하여 준다. 
    • property value는 뭐든 (자료형, 객체, 함수) 될 수 있다.
const introduce={
   name:"이익준",
   address:"서울 ~~~ ",
   family:{
   	son:이우주     
   }
}
  1. Property Name
    1. " "로 감싼 문자열로 만들 수 있다. 
      이 경우 형식의 제한이 없다.
    2. 자바스크립트는 자동으로 형변환을 하기 때문에 " "로 감싸지 않을 수 있다.
      이 경우 지켜야할 규칙있다.
      • 첫 번째 글자는 반드시 문자, 밑줄( _ ), 달러 기호( $ ) 중 하나로 시작
      • 띄어쓰기 금지
      • 하이픈 ( - ) 금지
      • 숫자형(양수) 사용이 가능하다.
        • 숫자형 프로퍼티 네임은 대괄호 [ ] 표기법으로만 접근이 가능하다.
        • 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬된다.
        • 자동형변환이 되어 string 형이 된다.
    3.  Property Value는 모든 자료형이 들어갈 수 있다. 
    4. 객체에서 데이터 접근하기
      • 객체에서 데이터에 접근하기 위해서는 객체를 변수에 할당해야 한다.
      • 점표기법과 대괄호 표기법으로 접근 할 수 있다.
        • 점표기법:  객체명.프로퍼티 네임
        • 대괄호 표기법: 객체명['프로퍼티 네임' ] or 객체명['프로퍼티' +  '네임' ] 

See the Pen Untitled by hwa (@ubdrmgbu-the-lessful) on CodePen.

 

  2. 객체에 프로퍼티 추가/삭제

See the Pen Untitled by hwa (@ubdrmgbu-the-lessful) on CodePen.

 

  4. 객체 프로퍼티 순회

  •  for .. in 반복문은 객체안의 프로퍼티들을  키값을 사용하여 하나씩 순회하며 반복적인 동작을 수행
  • 객체안의 중첩 객체를 순회하기 위해 for..in문 내부에 for..in 문을 사용할 수 있다.
  • 정수형 프로퍼티 네임을 key 값으로 사용할 경우, 정수형 오름차순 정렬을 먼저 하여 출력 후 나머지 프로퍼티 네임을 순서대로 출력하기 때문에 오류가 있을 수 있다.
    그렇기 때문에 정확한 의도가 있는 프로퍼티 네임을 짓는 것이 좋다. 

See the Pen for .. in by hwa (@ubdrmgbu-the-lessful) on CodePen.

 

2. 객체와 메소드(Method)

  • 객체 연관성 있는 함수를 객체의 값으로 주어 하나로 묶을 수 있다.
  • 객체 안에 있는 함수를 메소드(Method) 라고 한다.
  • 메소드는 어떤 객체의 고유한 기능이나 동작을 수행하는 객체 내부에 정의된 함수 이다.
    • 메소드 사용 이유
      외부에 선언된 함수와 달리 내부의 동작 요소로 기능하기 때문에 이름의 중복을 피할 수 있고, 
      객체에 집중한 코드를 부여할 수 있다.

2-1 객체의  파라미터 활용

**점 표기법으로 key값에 접근을 하게 되면, 파라미터 key를 가리키는 것이 아니라, key라는 프로퍼티 이름을 가진 프로퍼티 값에 접근하는 것과 같은 의미가 되기 때문"

 

728x90

'공부 메모 > javaScript' 카테고리의 다른 글

배열과 메소드 1  (0) 2025.07.01
return, break, continue 의 차이  (0) 2025.06.30
자바스크립트의 자료형(데이터 타입)  (2) 2025.06.08
흐르는 글씨 효과  (0) 2022.02.02
갤러리 < 더보기 >만들기  (0) 2021.11.22

+ Recent posts