[Java Script] Object, hoisting

yihyun·2024년 8월 22일

Front-end

목록 보기
7/22

Object(객체)

Java script 에서 여러 데이터를 담을 수 있는 것은 array 와 Object 가 있다.

  • Object 는 어떤 값이든 담을 수 있다.
  • 그리고 Object 안에 담긴 값을 우리는 속성(attribute) 라고 부른다.

자바에서 Map<String, Object> 와 비슷하다.

Object 선언

object 선언 방법 1 : 선언과 동시에 키와 값 넣어주기
var car = {type : 'Flat', model : 500, color : 'white'};

object 선언 방법 2 : 일단 생성하기
var person = {};

object 선언 방법 3
var computer = new Object();

데이터 추가

오브젝트는 이름과 값의 쌍으로 데이터를 추가할 수 있고 순서가 없다는 특징이 있다.

🔽 데이터 추가 방법 1

person.name = 'lee';
person.gender = 'male';
person.age = 22;
person.marrid = false;

🔽 데이터 추가 방법 2

computer['CPU'] = 'Octa Core';
computer['RAM'] = '128GB';
computer['HDD'] = '2TB';
computer['GAME'] = false;
computer['PRICE'] = 1400000;  

오브젝트는 인덱스가 문자인 배열로 취급하기 때문에 배열의 형태로 값을 넣거나 뺄 수 있다.

또한, 함수도 객체 안에 넣을 수 있다.
아래 코드는 computer 오브젝트에 on을 키로 익명함수를 값으로 넣어주는 예시이다.

computer.on = function(){
	console.log('Power ON'); 
};
  
conputer.on();

객체 내용 꺼내기

객체에 있는 내용을 꺼내는 방법에는 키로 꺼내기, 배열 방식으로 꺼내기 등이 있다.

🔽 특정 키로 꺼내기
1) console.log(computer.CPU);

2) console.log(computer['RAM']);

🔽 반복문으로 꺼내기
1) for문으로 꺼내기

var num = [1,2,3,4,5,6,7,8,9,10];

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

2) forEach 문으로 데이터의 수 만큼 익명 함수를 돌린다.

num.forEach(function(){ //(익명함수)
    console.log('실행');
});

→ 10개의 값이 있으므로 익명함수가 10번 실행된다.

num.forEach(function(item, idx){ 
	console.log(idx, item);
});                         

→ num에 있는 키와 값이 출력된다.

for(var item of num){
    console.log(item);
}

→ 0~9번 인덱스의 값만 출력된다.

🔽 Object.keysObject.values()
Object.keys() 를 해주면 오브젝트의 키만 뽑아올 수 있고, Object.values()를 하면 오브젝트의 값만 뽑아올 수 있다.

var keySet = Object.key(num);
for(var key of keySet){
	console.log(key, num[key]); // 또는 Object.values(num)
}

위 코드를 사용해주면 키와 값을 한번에 뽑아올 수 있다.

hoisting

hoisting
함수로 선언한 경우 선언하기 전에 호출해도 상관없다.

함수는 등록하는 것이기 때문에 함수를 실행하게 되면 등록된 함수가 있는지 찾아보고 실행되기 때문에 선언 이전에 호출하는 코드를 작성해도 된다.

test();
  
function test(){
	console.log('test');
}

하지만 변수안에 넣었을 경우에는 함수를 먼저 호출하고 선언해줘야 한다.

var test = function(){
	console.log('test');
};

test();
profile
개발자가 되어보자

0개의 댓글