const 변수, 상수명 = {
키 : 값,
키 : '값',
'키 키' : 값
// 키는 공백이 없어야하며 있어야 할 경우 따옴표로 감싸 문자열로 넣어준다
}객체를 선언할 때에는 { } 문자 안에 원하는 값을 넣어줌
하나의 이름에 여러 종류의 값을 넣을 수 있음
const dust = {
name : 'dust',
color : 'black',
shape : 'circle',
};
console.log(dust.name);
// dust
console.log(dust.color);
// black
function print(info){
const text = '${info.name}는 ${info.color},${info.shape}'
console.log(text);
}
객체 비구조화 할당
위에서 객체의 값을 조회할 때 마다 info.를 입력했는데 객체 비구조화 할당 문법을 사용하면 더욱 짧고 가독성을 높일 수 있다
const dust = { name: 'dust', color : 'black', shape : 'circle'};
const { name, color, shape } = dust;
console.log(name); // dust
console.log(color); // black
console.log(shape); // circle
// 또는
const dust = { name: 'dust', color : 'black', shape : 'circle'};
const { name : a, color : b, shape : c } = dust;
// 객체의 속성명과는 다른 이름의 변수에 할당 할 수 있다
console.log(a) // dust
console.log(b) // black
console.log(c) // circleconst dust = {
name : 'dust',
color : 'black',
shape : 'circle',
}
function print(info){
const { name, color, shape } = info;
// ✔객체에서 값을 추출하여 새로운 상수로 선언✔
console.log(name + '는 ' + color, shape);
}
print(dust);
// dust는 black, circle
let { x = 5, y = 2 } = { 1 };
// 1이 x에 대입, y에는 들어갈 값이 없기 때문에 그대로 나옴
// x = 1, y = 2
let { x = 5, y = 2 } = { 10, 20 };
// x = 10, y = 20
let number = { x: 10, y: 20 };
let { x, y } = number;
function print({ x, y, z }){
console.log(x);
console.log(y);
console.log(z);
}
print(number);
// 10
// 20
// undefined
// ---------------------------------------
// z에 기본값을 주고 싶을 때
function print({ x, y, z = 30 }){
console.log(x);
console.log(y);
console.log(z);
}
print(number);
// 10
// 20
// 30
객체안에 함수 넣기
const dust = {
name : 'dust',
active : '팔랑팔랑',
move : function move(){
// 함수가 객체 안에 들어가게 되면 this는 자신이 속한 객체를 가르킨다
// 함수를 선언 할 때 함수명은 필수가 아님
// ex) move : function() { ~
// 객체 안에 화살표 함수는 x ==> this는 자신이 속한 객체를 가르키지만 화살표 함수는 그렇지 않기 때문
console.log(this.name + "는 " + this.active);
}
};
dust.move();
// dust는 팔랑팔랑
const
const dust = {
name: "dust",
color: "black",
shape: "circle",
active: "팔랑팔랑",
move: function move() {
console.log(this.name + "는 " + this.active);
},
};
dust.name = "dust2";
console.log(dust.name);
// dust2우짜다 보니 콘솔에 dust.name 을 수정하고 봤는데 값이 변경되길래 const인데.. . 상수인데 왜 값이 바뀌지 .. .?
해서 찾아봄
상수로 변수를 선언할 때 사용,
const는 할당된 값의 바인딩 변경을 못하게 막는 것이지 바인딩 된 값의 변경을 막는 것이 아니다
...? 뭔말일까..
const dust = {
name: 'dust'
};
dust.name = 'test';
// dust --> test
// 이런식으로 변경은 가능
// ------------------------------------------------
const dust = {
name : 'dust'
};
dust = {
name : 'test'
};
// dust --> ! 오류 !이런 속성이라고 한다
참고
https://velog.io/@hemtory/JSConstLetIIFE
JS - const, let, 즉시 실행 함수
JS const, let, 즉시 실행 함수
velog.io
배열 비구조화 할당
기존
const animal = ["고양이", "강아지", "햄스터", "다람쥐"];
// 변수에 담기
const cat = animal[0];
const dog = animal[1];
const ham = animal[2];
const squirrel = animal[3];값을 꺼내려면 귀찮고, 가독성이 좋지않음
비구조화 할당
const [cat, dog, ham] = ["고양이", "강아지", "햄스터"];
// 기본값 지정
const [cat, dog, ham, rabbit = "토끼" ] = ["고양이", "강아지", "햄스터"];const animal = ["강아지", "고양이", "햄스터"];
const [dog, cat, ham, rabbit = "토끼"] = animal;
// 위에 예시는 되는데 왜 얘는 안될까
// 확인하기
// 배열에 변수와 값을 추가하고 싶을 때
animal[3] = "토끼";
const animal = ["고양이", "강아지", "햄스터", "다람쥐"];
const [ a, b, ...rest ] = animal;
// 여기서 rest 는 원하는 텍스트를 입력해주면 됨
// 객체 안에 있는 값을 추출하여 변수 or 상수로 바로 선언
// ... 지시자 사용 시 분해하고 남은 변수들을 따로 배열로 담을 수 있다
console.log(a); // 고양이
console.log(b); // 강아지
console.log(rest) // ['햄스터', '다람쥐'];
function Array(){
return { 1, 2, 3, 4, 5 };
}
{ a, , , , e } = Array();
console.log(a); // 1
console.log(e); // 5원하는 배열 요소만 가져올 수 있다
'개발 > js & jquery' 카테고리의 다른 글
| [javascript] 배열 내 최대, 최솟값 구하기 (0) | 2022.09.07 |
|---|---|
| [javascript] 배열 내장함수 (0) | 2022.05.16 |
| [javascript]onclick, alert, prompt, confirm (0) | 2022.01.13 |
| [javascript]scrollTop, 스크롤시 상단 메뉴 사라짐 (1) | 2022.01.11 |
