• object
  • 전개연산자
  • map
  • arguments
  • rest
  • 배열 접근
  • 키 생성 / 추출
  • Object 메서드
  • freeze
  • defineProperty / seal
  • arrCopy / assign

 

1) object

 

기본 객체 복습

 

const obj = {
    // key:value, key:value 나열
    // 숫자, boolen, null, undefined는 따옴표 작성하지 않음
    no : 1001,
    grade : 1,
    name : '홍길동',
    tel : '010-1111-4444'
}

// 기본 출력 객체.속성(객체.키)
// react 출력 객체['속성'](객체['키'])

console.group('기본 출력');
console.log('학번 : ' + obj.no);
console.log('학년 : ' + obj.grade);
console.log('이름 : ' + obj.name);
console.groupEnd();

console.log();

console.group('react 출력');
console.log('학번 : ' + obj['no']);
console.log('학년 : ' + obj['grade']);
console.log('이름 : ' + obj['name']);
console.groupEnd();



기본 출력
  학번 : 1001
  학년 : 1
  이름 : 홍길동

react 출력
  학번 : 1001
  학년 : 1
  이름 : 홍길동

 

 

2) 전개연산자

 

const names = [
    '김옥지',
    '이옥지',
    '박옥지',
    '최옥지',
    '윤옥지'
];
const foods = [
    '삼겹살',
    '우삼겹',
    '갈비살',
    '뒷고기'
];

// 새로운 배열
console.log(names.concat());
console.log([...foods]);
console.log(names.concat('강호동', '유재석').concat(foods));
console.log([...names, ...foods]);
console.log([...names, '김만득', '최만득', ...foods]);



[ '김옥지', '이옥지', '박옥지', '최옥지', '윤옥지' ]
[ '삼겹살', '우삼겹', '갈비살', '뒷고기' ]
[
  '김옥지', '이옥지',
  '박옥지', '최옥지',
  '윤옥지', '강호동',
  '유재석', '삼겹살',
  '우삼겹', '갈비살',
  '뒷고기'
]
[
  '김옥지', '이옥지',
  '박옥지', '최옥지',
  '윤옥지', '삼겹살',
  '우삼겹', '갈비살',
  '뒷고기'
]
[
  '김옥지', '이옥지',
  '박옥지', '최옥지',
  '윤옥지', '김만득',
  '최만득', '삼겹살',
  '우삼겹', '갈비살',
  '뒷고기'
]
const data = [
    {id : 1, name : '김'},
    {id : 2, name : '이'},
    {id : 3, name : '박'},
    {id : 4, name : '최'},
    {id : 5, name : '정'}
];

// 새로운 배열
const data1 = data.concat();
console.log(data1);
const data2 = [...data];
console.log(data2);
const data3 = data.concat({id : 5, name : '윤'});
console.log(data3);

// 데이터 추가
const data4 = [...data, {id : 5, name : '진'}];
console.log(data4);



[
  { id: 1, name: '김' },
  { id: 2, name: '이' },
  { id: 3, name: '박' },
  { id: 4, name: '최' },
  { id: 5, name: '정' }
]
[
  { id: 1, name: '김' },
  { id: 2, name: '이' },
  { id: 3, name: '박' },
  { id: 4, name: '최' },
  { id: 5, name: '정' }
]
[
  { id: 1, name: '김' },
  { id: 2, name: '이' },
  { id: 3, name: '박' },
  { id: 4, name: '최' },
  { id: 5, name: '정' },
  { id: 5, name: '윤' }
]
[
  { id: 1, name: '김' },
  { id: 2, name: '이' },
  { id: 3, name: '박' },
  { id: 4, name: '최' },
  { id: 5, name: '정' },
  { id: 5, name: '진' }
]

 

 

3) map

 

const data = [
    {id : 1, name : '김'},
    {id : 2, name : '이'},
    {id : 3, name : '박'},
    {id : 4, name : '최'},
    {id : 5, name : '정'}
];

const data1 = data.map(item=>{
    if(item.id===3) {
        return {id:3, name:'민'};
    } else {
        return item;
    }
})
console.log(data1);



[
  { id: 1, name: '김' },
  { id: 2, name: '이' },
  { id: 3, name: '민' },
  { id: 4, name: '최' },
  { id: 5, name: '정' }
]

map 메서드의 경우 forEach와 비슷하다고 생각하면 된다.

전체 배열중에서 키 id의 값이 3인것을 찾아 name을 민으로 변경해 주었다.

 

const data3 = data.map(item=>
    item.id===3 ? {...item, name : '민'} : item)

이처럼 삼항연산자를 사용해 쓸 수도 있다.

 

 

4) arguments

 

* arguments는 화살표 함수 안에 사용이 불가능하다.

function make1(name){
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);

    // let arr = Array.from(arguments);
    // arr.forEach(item=>{
    //     console.log(item);
    // })
    
    // let arr2 = [...arguments];
    // arr2.forEach(item=>{
    //     console.log(item);
    // })
}

make1('김','이','박','최');



김
이
박

arguments는 index 번호로 배열을 추출한다고 생각하면 된다.

 

 

5) rest

 

const make = (...rest) =>{
    console.log(rest);
}
make();
make('김');
make('이','박','최','정');



[]
[ '김' ]
[ '이', '박', '최', '정' ]

반드시 rest만 사용해야 하는 것은 아니다.

아래처럼 사용자 정의 이름으로 사용 가능하다.

 

const make1 = (...names) =>{
    console.log(names);
}
make1()
make1('김');
make1('이','박','최','정');
const add = (name, ...nums) => {
    let sum = 0;
    nums.forEach(item=>sum+=item);
    console.log(sum);
};
add('봉', 10,20,30,40);



100
10
60

이렇게 다른 변수와 같이 사용 할 경우엔 ...rest를 가장 마지막에 작성해야 한다.

 

const add1 = (name, ...nums) => {
    let sum = 0;
    sum = nums.reduce((prev, curr)=>prev+curr);
    console.log(sum);
};
add1('윤', 11,22,33,44);



110

reduce는 값들을 합할 때 사용한다.

 

 

6) 배열 접근

 

배열의 접근 방법에는 .(dot)과 [ ](대괄호)가 있다.

 

let com = {
    name : '(주)YEONGAMES',
    since : 2025,
    depart : ['기획','디자인','프론트엔드','백엔드']
}

console.log(com.name);
console.log(com['since']);

console.log(com.depart[0]);
console.log(com['depart'][3]);



2025
기획
백엔드

아래와 같은 2차원 배열의 경우 접근하려면 두 번 써주어야 한다.

 

let obj = {
    center: {
        x: 10,
        y: 20
    },
    radius: 5.40
}

console.log(obj.center.x);
console.log(obj.center.y);
console.log(obj.radius);



10
20
5.4

 

7) 키 생성 / 추출

 

const obj = {
    name : '김',
    age : 40
}

console.log(obj.addr);



undefined

존재하지 않는 키를 추출하면 undefined가 출력된다.

 

obj.addr = '서울';
obj.id = 1;
console.log(obj);
console.log(obj.addr);
console.log(obj.id);



{ name: '김', age: 40, addr: '서울', id: 1 }
서울
1

키를 추가로 생성하고 값을 넣어줄 수 있다.

 

 

8) Object 메서드

 

Object.keys() : 속성(키)
Object.values() : 값
Object.entries() : 키/값 배열 처리
Object.fromEntries() : 키/값 객체 처리

 

const user = {
    name : '김',
    age : 10,
    addr : '서울',
    sex : 'male' 
}

const arr = [
    ['name','김'],
    ['age',10],
    ['addr','서울']
]

console.log(user);
console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));
console.log();
console.log(arr);
console.log(Object.fromEntries(arr));



{ name: '김', age: 10, addr: '서울', sex: 'male' }
[ 'name', 'age', 'addr', 'sex' ]
[ '김', 10, '서울', 'male' ]
[ [ 'name', '김' ], [ 'age', 10 ], [ 'addr', '서울' ], [ 'sex', 'male' ] ]

[ [ 'name', '김' ], [ 'age', 10 ], [ 'addr', '서울' ] ]
{ name: '김', age: 10, addr: '서울' }

 

9) freeze

객체를 동결시켜 수정이 불가능하게 만든다.

 

const arr = [10,20,30];

arr[0] = 100;
console.log(arr);

Object.freeze(arr);

arr[1] = 500;
console.log(arr);



[ 100, 20, 30 ]
[ 100, 20, 30 ]

freeze 메서드 사용 전에는 arr의 index 0 번의 값을 변경하는 것이 가능했지만 사용 후에 1번이 바뀌지 않는 것을 확인할 수 있다.

 

 

10) defineProperty / seal

 

const obj = {
    name : '라면',
    state : '좋음',
    brand : '농심'
}

Object.defineProperty(obj, 'cal', {
    value : 200,
    // 수정 가능 여부
    writable : false
})

console.log(obj);
console.log(obj.cal);

obj.title = "신라면";
console.log(obj);



{ name: '라면', state: '좋음', brand: '농심' }
200
{ name: '라면', state: '좋음', brand: '농심', title: '신라면' }

defineProperty은 새로운 키 값을 추가할 때 사용한다.

대신 추가한 값이 숨어있으므로 obj.cal 처럼 지정을 해서 호출을 해야 출력이 가능하다.

 

Object.seal(obj)
obj.title = '오뚜기';
console.log(obj);



{ name: '라면', state: '좋음', brand: '농심', title: '오뚜기' }

seal의 경우 수정은 가능하나 새로 추가하거나 삭제가 불가능하다.

 

11) arrCopy / assign

 

let arr = [10, 20, 30];
let arrCopy = arr;
// 객체의 참조값(메모리 주소)만 복사

arr[0] = 100;

console.log(arr);
console.log(arrCopy);



[ 100, 20, 30 ]
[ 100, 20, 30 ]

arrCopy는 얕은 복사이기 때문에 주소만 복사를 한다.

따라서 원본의 값이 바뀌면 같이 주소를 참조하기 때문에 변경이 된다.

 

let a1 = {name : '최'};
let a2 = {age : 20};
let a3 = {addr : '서울'};

let a4 = Object.assign(a1, a2, a3);

console.log(a4);



{ name: '최', age: 20, addr: '서울' }

assign은 객체를 복사헤 대상객체에 붙여넣어준다.

 

 

 

 

티스토리툴바