자바스크립트 배열과 객체

웅평·2023년 7월 4일
0

자바스크립트의 배열은 파이썬의 리스트와 비슷하다

배열

let dataTypes = ['number', 'string', 'boolean', 'null', 'undefined', 'array'];

파이썬 리스트와 비슷하게 0번 인덱스부터 시작이다

for (let i = 0; i < dataTypes.length; i++) {
  console.log(dataTypes[i]);
}

배열의 길이는 .length로 가져올 수 있다.

배열의 길이를 넘어가는 인덱스로 조회하면 undefined가 출력된다

slice
배열을 잘라낼 때는 slice()

console.log(dataTypes.slice(0, 5));

결과 [ 'number', 'string', 'boolean', 'null', 'undefined' ]

자바스크립트의 배열은 파이썬처럼 dataTypes[1:4] 이런식으로 가져올 수 없다.

배열 추가

dataTypes.push('1')

push함수는 새로운 배열의 길이를 리턴

배열 삭제
맨 뒤에 꺼를 삭제

dataTypes.pop()

pop함수는 제거한 마지막 요소를 리턴

배열 중간에 추가 및 삭제
splice 함수 사용

dataTypes.splice(start, deleteCount, item1, item2....)

start 인덱스에서 시작해서 deleteCOunt만큰 지우고 start 인덱스 위치에서 item를 삽입

예시
1번 인덱스 부터 2번 인덱스 삭제

dataTypes.splice(1, 2)

[ 'number', 'null', 'undefined' ]

1번 인덱스 다음에 array, hi 추가

dataTypes.splice(2, 0, 'array', 'hi')

[ 'number', 'null', 'undefined', 'array', 'hi']

객체

객체(object)는 키와 값의 쌍을 저장합니다. (파이썬의 딕셔너리와 비슷하다.)

let myVocab = {
  function: '함수',
  variable: '변수',
  constant: '상수',
  global: '전체적인',
  local: '지역의',
  name : ['유재석', '박명수'],
  movie : {
  	title : '아이언맨',
    actor : '정준하'
    }
};

프로퍼티
자바스크립트에서는 키와 값의 쌍 하나를 프로퍼티라고 하는데 키를 프로퍼티 네임(property name) 또는 프로퍼티 이름, 값을 프로퍼티 밸류(property value) 또는 프로퍼티 값이라고 부르기도 한다.

프로퍼티 이름은 항상 문자열인데 일반적으로 따옴표 없이도 사용할 수 있지만 아래의 경우 꼭 따옴표를 사용해야 한다.

프로퍼티 이름이 알파벳 문자, 언더바 기호(_), 또는 달러 기호($)로 시작하지 않음 (예: @name)
중간에 띄어쓰기나 하이픈 기호가 들어감 (예: worst course)

반면 프로퍼티 값은 아무 자료형일 수 있어요. 문자열, 숫자형, 배열, null, 심지어 객체 자체도 값이 될 수 있다.

프로퍼티 접근

console.log(myVocab.name)
console.log(myVocab['name'])

프로퍼티가 없을 경우 undefined

프로퍼티 존재 여부 확인

console.log('name' in myVocab); // true;
console.log('members'in myVocab); // false

프로퍼티 추가, 수정, 삭제

myVocab.function = "솜솜" // 프로퍼티 수정
myVocab.color = "빨강" // 프로퍼티 추가
delete myVocab.function = "솜솜" // 프로퍼티 삭제

메소드
프로퍼티 값이 함수일 수도 있는데 함수 프로퍼티는 메소드라고 부른다.

let myVocab = {
  function: '함수',
  variable: '변수',
  local: '지역의',
  name : ['유재석', '박명수'],
  movie : {
  	title : '아이언맨',
    actor : '정준하'
    },
  hello : function (name) {
    console.log(`환영합니다 ${name}님!`);
    },
};

참고
코드잇

0개의 댓글