javascript의 데이터 타입 ⅱ

문자열 리터럴

- 백틱 기호(`)를 이용해서 문자열 표현

- 여러줄의 문자열을 그대로 표현 가능

- 보간법 ${expression} 사용가능

 

 

var user = {
  userName: '김철수',
  age: 30,
  phone: '0102223333',
  address: '서울특별시 종로구 종로3길 17 D타워, 16-17층 (주)멋쟁이사자처럼'
};

function userInfo(strings, userName, age, phone, address){
  console.log(strings);
  console.log(userName);
  console.log(age);
  console.log(phone);
  console.log(address);

  if(age >= 19 && age <= 34){
    age = '청년';
  }
  address = address.split(' ')[0];
  let first = phone.slice(0, phone.length-4); //뒤에서 4자리는 빼고 선언
  phone = first.padEnd(phone.length, 'X');//뒤에 4자리 x표시

  return strings[0] + userName + strings[1] + age + strings[2] + phone + strings[3] + address + strings[4];
}
var kim = userInfo`
  ${user.userName}님의 정보입니다.
  나이: ${user.age}
  전화번호: ${user.phone}
  주소: ${user.address}
`;
console.log(kim);

 

콘솔창에 출력 >

 

구조 분해 할당

- 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있는 표현식

// 구조 분해 할당
var colors = ["yellow", "green", "blue"];
var [one, two, three, four] = colors;
console.log(one, two, three, four); //마지막 four은 해당되는 것이 없어서 undefined 출력

var kim = { userName: "김철수", userAge: 35 };
console.log(kim.userName, kim.userAge);
var { userName, userAge: age } = kim; //순서 바껴도 동작됨, 객체는 순서가 중요하지 않음, 배열은 순서가 중요함
console.log(userName, age);

// 선언된 변수에 적용
var first, second;
[first, second] = [100, 200, 300];
console.log(first, second);
({ first, second } = { first: "orange", second: "green", third: "yellow" }); //중괄호로만 묶은거라서 에러가 남 -> 괄호 하나 해줘야 함
console.log(first, second);

// 기본값 할당(undefined 대체)
var { userName, userAge = 20 } = { userName: "이영희" };
console.log(userName, userAge);

// 변수명 변경과 기본값 할당
var { userName: accountName = "게스트", userAge: age = 20 } = { userAge: 30 };
console.log(accountName, age);

// 변수값 교환
var a = 100;
var b = 200;
var temp = a;
a = b;
b = temp;
console.log(a, b);

// 변수값 교환(구조 분해 할당)
[a, b] = [b, a];
console.log(a, b);

// 복합 객체에서 사용
var userList = [
  {
    name: "김철수",
    age: 30,
    course: {
      name: "멋사 6기",
    },
  },
  {
    name: "이영희",
    age: 35,
    course: {
      name: "멋사 8기",
    },
  },
];

// 이름과 코스명만 출력
for (var elem of userList) {
  console.log(elem.name, elem.course.name);
}

//구조 분해 할당
for (var {
  name,
  course: { name: courseName }, //name이랑 겹치기 때문에 courseName으로 바꾸기
} of userList) {
  console.log(name, elem.course.name);
}

 

기본값 매개변수

- 함수 호출시 인자값을 전달하지 않으면 undefined가 전달됨

- 값이 전달되지 않거나 undefined를 인자값으로 전달한 경우 지정한 매개변수를 기본값으로 초기화

 

나머지 매개변수

- 정해지지 않은 수의 매개변수를 배열로 전달받음

- 함수의 마지막 매개변수 앞에 ...을 붙임

var user = {
  name: '김철수', 
  age: 30,
  phone: '0102223333',
  address: '서울특별시 종로구 종로3길 17 D타워, 16-17층 (주)멋쟁이사자처럼'
};

var {name, age, ...etc} = user;
console.log(name, age, etc.phone, etc.address);

 

전개 연산자

- 배열이나 객체의 요소, 속성을 분해해서 배열, 객체, 함수에 전달

- 배열, 객체를 손쉽게 복사

- 배열, 객체의 리터럴이나 함수의 인자값 변수 앞에 ...을 붙임

- 나머지 매개변수는 여러 매개변수를 하나의 배열로 압축하는 반면 전개 연산자는 하나의 배열, 객체를 여러개의 요소, 속성으로 분해해서 전달

// 함수에서 사용
function sum(x, y) {
  console.log(x + y);
}
var numbers = [10, 20];
sum(numbers[0], numbers[1]);
sum(...numbers);
// 배열 결합
var arr1 = [100, 200];
var arr2 = [300, 400, 500];
var arr3 = [...arr1, ...arr2];
console.log(arr3);

// 객체 결합
var obj1 = { _id: 1, title: "javascript 공부", done: false };
var obj2 = { _id: 1, content: "열심히 해야지", date: "2023-10-25" };
var obj3 = { ...obj1, ...obj2 };
console.log(obj3);