2023.12.11 기록 (javascript 객체 기초)

 

자바스크립트 객체에 대한 기본적인 학습을 시작했다.

let garden = {

name: "flower" ,

time : 20

};

객체 할당은 키 : 값으로 한쌍으로 이루어진다.

 

문자열에는 쌍따옴표(")나 홑따옴표(') 를 사용하는데, 보통 프로젝트 내에서 하나로 통일하게 된다고 한다.

 

각 값은 쉼표(,) 를 통해 구분하며 구분된 값은 '프로퍼티(property)' 라고 부른다.

 

즉 "name"이란 키가 "flower" 값인 프로퍼티와

"time"이란 키가 20 값인 프로퍼티가 된다.

let garden = {

name: "flower" ,

time : 20

};

alert(garden.name);

 

 

garden 객체의 이름값을 알려줘 = flower 이런식이다.

 

단어 하나로 키 값이 표현되면 상관없지만, 복합단어(단어 2개 이상)로 표현되는 경우에는 따옴표(쌍따옴표 홑따옴표 상관없음)를 통해 묶어주면 된다.

 

let garden = {

"flower name": "rose" ,

time : 20

};

alert(garden["flower name"]); // 이렇게 호출해야 한다.

alert(garden.["flower name"]); // 이렇게 작성하면 불러 올 수 없다.

 

다만 키 값이 복합 단어인 경우 점(.) 을 통해 호출 할 수 없으므로 대괄호([ ])만을 사용한다.

 

프로퍼티를 이용해서 틀을 짜두고 변수를 불러와서 사용하는 경우도 많다고 한다.

 

function Flowerbasket(name, color, limit){ // 값을 적어준다
	return {
    	name : name ,
        color : color,
        "time limit" : limit,
        //
	};
}

let Sotheby = Flowerbasket("rose", "yellow", true); //필요한 부분만 작성해도 상관없다.
alert(Sotheby.name); // rose

 

name과 color 부분은 키 = 값 이므로 이 부분은 각각 name과 color로 축약이 가능하다.

function Flowerbasket(name, color, limit){ 
	return {
    	name ,
        color,
        "time limit" : limit,
        //
	};
}

let Sotheby = Flowerbasket("rose", "yellow", 30); 

alert(Sotheby.name); // rose
alert(Sotheby["time limit"]);  // 30

//즉 이렇게 적더라도 상관없다는 것이다.

 

 

그 외에 중요한 점은 객체 안에서는

for, let, import와 같은 이미 역할이 있는 (함수 등으로 사용되는 등의) 예약어 또한 키 값으로 사용 할 수 있다. 라는 점이다.

let opt = {
	if : 1,
	else : 2,
	new : 3, //객체의 끝은 쉼표로 끝나더라도 문제가 발생하지 않는다.
};  
  
alert( opt.if + opt.else * opt.new ); // 1 + 2x3 = 7

 

문자형, 심볼형이 키값으로 오게 되는데 따라서 그 외에 다른 숫자열과 같은 값들은 문자형으로 변경된다

 

let prj = {
	10 : "true",
	20 : "false",
};

alert(prj[10]); //true
alert(prj["10"]);  //true
alert(prj[10] === prj["10"]); //true

 

다 같다.

 

예외형과 심볼형은 조금 더 공부를 한 뒤에 정리해야겠다.

 

해결해야할 과제

• 객체에 대한 심화학습 (in 연산자)