티스토리 뷰

1. concat(), slice(), pop() 예제

// 문법1

let arr = [10, 20, 30, 40, 50]
console.log('arr 출력 : ', arr);
console.log('------------------------------------------------------');

// 추가, 연결을 위한 함수
arr.concat(60);
// 그러나 출력 결과에는 추가가 되지 않음
console.log('arr.concat 출력 : ', arr);
console.log('------------------------------------------------------');

// concat은 자체적으로 붙인것 처럼 보이지만 복사본이다.
// arr = arr.concat(60); 이렇게 받아 주어야 한다.
// 원본 살리고 싶을 때 이용 하면 된다. 
arr = arr.concat(60);
console.log('arr=arr.concat(60) 출력 : ', arr);
console.log('------------------------------------------------------');

// slice 잘라내는 것
// 인덱스 2~3까지 잘려 온다.
let brr = arr.slice(2, 4)   // 끝번호 -1까지 가져온다.
console.log('arr.slice(2, 4) 출력 : ', brr);
console.log('------------------------------------------------------');

// 마지막 요소 삭제, 배열 자체를 갱신하고 그 값을 반환한다.
console.log('arr.pop() retrun 값 출력 : ', arr.pop());
console.log('pop()후의 arr 출력', arr);

concat(), slice(), pop() 예제


2. 전개 연산 예제

// 문법 2
// 전개 연산자
// ES6 에서 새로 생긴 문법이다.

//배열 전개연산
let arr = [10, 20, 30]
// 배열 요소 안에 배열이 들어간 것이다. length로 보면 3이다.
// 키워넣은게 아니라 배열을 넣은 것이다.
let brr = [50, arr, 60] 
// 이게 전개 연산자이다. 이러면 arr의 배열 요소들이 crr으로 들어간다.
// lenght는 5가 된다.
let crr = [50, ...arr, 60] 

console.log(brr);
console.log(brr.length);
console.log(crr);
console.log(crr.length);
console.log('-------------------');

// 객체 전개 연산
const obj1 = {
    a:10,
    b:20,
    c:30,
}
console.log(obj1);

const obj2 = {
    d:40,   // d와 e사이에 obj1을 넣을려 한다
    ...obj1,
    e:50,
}
console.log(obj2);
console.log('-------------------');

// 함수
function f1() {
    return {
        a:10,
        b:20,
    }
}
console.log(f1())

// 함수 return 값 전개 연산
const obj3 = {
    c : 30,
    d : 40,
    ...f1(),    // f1()에서 객체가 return되는데 반환되는 객체를 전개한다.
}
console.log(obj3);
console.log('-------------------');

전개 연산 예제

3. 비구조화 할당 예제

// 문법3
// 비 구조화 할당

const cr = [10, 20, 30]
const [x, y, z] = cr

console.log(x, y, z);

const obj4 = {
    a:10,
    b:20,
    c:30,
}
const { a,c } = obj4
console.log(a, c);

비구조화 할당 예제

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
TAG
more
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함