[React 1주차(2)] 자바스크립트 복습: template literals, destructuring, spread, rest, 화살표 함수, 조건 연산자 , 단축평가

1. Template Literals

변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법

백틱(`)을 사용하여 문자열을 구성하고, ${변수 이름 혹은 식..} 통해 변수나 표현식을 삽입

 

let customer = { name: "르탄이" };
let item = { name: "커피", price: 4000 };
console.log(`감사합니다, ${customer.name}님. ${item.name}을(를) ${item.price}(원)에 구매하셨습니다.`);
// 출력: 감사합니다, 르탄이님. 커피을(를) 4000(원)에 구매하셨습니다.

 

 

2. Destructuring

객체나 배열의 속성을 보다 쉽게 추출할 수 있게 해주는 문법

• 객체에서의 사용
  • key 가 중요함!! 그래서 순서대로 값을 받는 것이 아님을 기억해야함!!

const { name, price } = item;
console.log(name);  // 커피
console.log(price); // 4000

function greet({ name, age }) {
  console.log(`안녕하세요, 제 이름은 ${name}이고 나이는 ${age}살입니다.`);
}
greet({ name: "르순이", age: 28 });

 

• 배열에서의 사용
  • 순서가 중요함(객체처럼 key 가 없으니 index로 각 요소 내용 판단!!)
  • 즉, 배열의 요소를 위치에 따라 변수로 할당함

let colors = ["red", "green", "blue"];
let [firstColor, secondColor] = colors;
console.log(firstColor);  // red
console.log(secondColor); // green

 

 

<구조분해 사용 예시>

const person = {
  name: "르탄이",
  age: 25,
  job: "개발자",
};

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  release: {
    year: 2010,
    month: "July",
  },
};

// 1. 객체의 구조분해
const { name, age, job } = person;
console.log(name, age, job)

const { title, release : {year}  } = movie;
console.log(title, year)

//////////////////////////////////////
const numbers = [10, 20, 30, 40, 50];

// 2. 배열의 구조분해
const [first, , third] = numbers;
console.log(first, third)


// 3. 함수의 구조분해
function confirmReservation(user) {
  // 여기에 user 객체를 구조 분해 할당 하세요.
  const { name, roomType, date : firstDate } = user;

  return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`;
}

const userInfo = {
  name: "James",
  roomType: "Deluxe",
  date: "2023-05-30",
};
const result = confirmReservation(userInfo);
console.log(result);

- 객체 안에 객체 안에 속성을 가지고 오고 싶으면 '객체이름 : {객체속성이름}' 식으로 쓰기

- 객체 안에 속성을 다른 식별자 이름으로 가지고 오고 싶으면 '객체속성이름 : 사용할 식별자 이름' 이런식으로 쓰기

 

 

그럼 객체 안에 객체 안에 속성을 다른 식별자 이름으로 가지고 오고 싶으면???? 아래 처럼 사용하면 됨.

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  release: {
    year: 2010,
    month: "July",
  },
};


const { title, release : {year : newVariableName}  } = movie;
console.log(title, newVariableName)

 

3. Spread Operator

배열, 객체 등의 요소를 개별 요소로 확장할 때 많이 사용, 말그대로 펼친다.

(1) 객체에서의 사용

const originalUser = { name: "르탄이", age: 28 };
const updatedUser = { ...originalUser, location: "한국" };
console.log(updatedUser);  // { name: "르탄이", age: 28, location: "한국" }

- 특히 객체 복사할 때, 원본의 불변성을 지키기 위해 많이 사용됨. 

- 말그대로 bracket을 무시하고 그 안의 내용을 펼친것을 다시 bracket으로 감싸줌으로서 새로운 객체를 생성하고 그 안의 내용은 복사하고자하는 객체의 내용을 담는 느낌.

 

(2) 배열에서의 사용

const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = [...first, ...second];
console.log(combined);  // [1, 2, 3, 4, 5, 6]

- 두 배열을 이렇게 합칠 떄 주로 사용함.

 

<객체에서 같은 속성 이름을 가진 두 객체들을 합칠 때 무엇은 우선으로 둘지....>

const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { name: "르탄이", age: 25, email: "rsoony@sparta.com" }

mergedObj.name = "원장님";
console.log(mergedObj); // { name: "원장님", age: 25, email: "rsoony@sparta.com" }
console.log(obj1);      // { name: "르탄이", age: 25 }
console.log(obj2);      // { name: "르순이", email: "rsoony@sparta.com" }

- 우선으로 두고 싶은 객체를 마지막에 두기!!!! 여기서는 obj2 name 속성이 우선시됨.그래서 합치면 obj2 name 값을 따름.

 

4. Rest Operator

나머지 연산자(= rest operator)는 함수의 매개변수에서 사용되거나, 객체 리터럴이나 배열 리터럴에서 남은 부분을 하나의 변수로 그룹화할 때 사용됨. 예를 들어, 함수에서 여러 인수를 배열로 그룹화하거나, 객체 분해 할당(destructuring)에서 특정 속성을 제외한 나머지 속성들을 새 객체로 그룹화할 때 사용함.

🧐 객체 리터럴(배열 리터럴)? 리터럴이라는 단어 때문에 헤매지 마세요! 단순히 중괄호 {}를 이용하여 객체를 직접 선언하는 방식일 뿐입니다. 배열리터럴도 마찬가지 []를 통해 직접 선언하는 방식이에요.

function sum(...numbers) {
    return numbers.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

 

const person = {
    name: "John",
    age: 30,
    country: "USA",
    occupation: "Developer"
};

const { country, ...rest } = person;
console.log(rest); // { name: "John", age: 30, occupation: "Developer" }

const person = { name: "Young", age: 35, job: "developer", password: "1234" };

// 여기에 코드를 작성합니다.
const { password, ...sampleObj } = person;

console.log(sampleObj); // => { name: 'Young', age: 35, job: "developer" }

 

---

1. Arrow Function(화살표 함수)

간결한 문법을 통해 함수를 더욱 간단하게 선언 () =>

// 가장 간결한 형태의 화살표 함수
const add = (a, b) => a + b;
console.log(add(5, 3));  // 8

// multi-line
const sampleLogging = () => {
	const name = "르탄이";
	const age = 20;
	console.log(`안녕, ${name}`);	
	
	return age + 1;
}

 

2. Conditional Operator(조건 연산자// 삼항 연산)

const score = 85;
const grade = score > 70 ? '합격' : '불합격';
console.log(grade);  // '합격'

 

3. Short Circuit Evaluation (단축 평가)

논리 연산자를 사용하여 조건문을 처리할 때, 전체 표현식을 평가하지 않고 최소한의 평가로 결과를 도출하는 방식. 단축 평가는 주로 && (논리곱), || (논리합)  ?? (null 병합 연산자)를 사용할 때 발생.

 

(1) 논리합 (||) 연산자

논리합 연산자 ||는 좌변의 피연산자가 falsy 값(false, 0, "", null, undefined, NaN)일 때만 우변의 피연산자를 평가함. 좌변의 피연산자가 truthy 값일 경우, 그 값이 바로 결과값으로 반환되며, 우변은 평가되지 않음

// 유저 정보가 제공되지 않았을 때 기본 이름 제공
function getUsername(user) {
    return user.name || '신원미상';
}

console.log(getUsername({ name: '르탄이' })); //르탄이
console.log(getUsername({})); //신원미상

 

(2) 논리곱 (&&) 연산자

논리곱 연산자 **&&**는 좌변이 truthy일 때만 우변을 평가함. 조건에 따라 특정 코드를 실행하고자 할 때 유용함.

// 사용자가 로그인 상태이면 환영 메시지를 출력
let loggedIn = true;
let username = '르탄이';
loggedIn && console.log('환영합니다! ' + username); //환영합니다! 르탄이

loggedIn = false;
loggedIn && console.log('환영합니다! ' + username); //아무것도 출력되지 않음

(3) Optional Chaining(?.)

객체의 속성에 접근 해당 속성이 존재하지 않아도 에러를 발생시키지 않고, 대시 undefined를 반환함. 오류를 발생시키지 않기 때문에, 객체의 중첩된 속성에 안전하게 접근가

Optional Chaining의 작동 방식

const user = {
    profile: {
        name: "르탄이",
        details: {
            age: 30,
            location: "서울시 강남구"
        }
    }
};

 

이런 user 객체가 있다고 가정함

여기서 age 값을 구하려면,

console.log(user.profile.details.age);  // 출력: 30

---> 이런 식으로 코드 작성함.

 

근데 만약에 profile 또는 details가 undefined 이나 null 이면 에러 생김.

 

const user = {};
console.log(user.profile?.details?.age);  // 출력: undefined

Optional chaning(?.)을 이용하면 이제 profile 이나 details 중 하나라도 undefind나 null이면 그 시점에 평기를 멈추고 undfined를 반환함.

 

const result = user.profile?.getDetails?.();  // user.profile.getDetails가 존재하지 않으면 undefined 반환

이런식으로 optional chaining은 객체의 속성뿐만 아니라 메소드 호출에도 사용가능함. 객체가 메소드를 가지고 있지 않아도 안전하게 메소드를 호출할 수 있음.

 

 

===> 주로 optional chaining 은 중첩된 객체 구조에서 안전하게 값을 읽거나 메소드를 호출할 때 유용하게 사용되며, 코드의 안정성을 높이고 간결하게 만드는 데 도움을 줌!!

 

(4) Null 병합 연산자 (??)

?? 연산자는 좌변이 null이나 undefined일 경우에만 우변을 평가함.  null 또는 undefined가 아닌 falsy 값들을 유효한 값으로 처리하고 싶을 때 사용됨.

// 사용자의 위치 설정이 없으면 기본 위치를 제공
let userLocation = null;
console.log(userLocation ?? 'Unknown location');  // 출력: Unknown location

userLocation = 'Seoul';
console.log(userLocation ?? 'Unknown location');  // 출력: Seoul

// 사용자 입력이 0인 경우에도 0을 유효한 값으로 취급
const temperature = 0;
console.log(temperature ?? 25);  // 출력: 0

• ||(논리 OR) 와 ??(null 병합 연산자)의 차이가 궁금하다면! 다음 예시를 참고해주세요.

  function displayPreferences(preferences) {
    // `||` 연산자 사용 예
    const textLength = preferences.textLength || 50; // textLength가 0일 경우 50이 할당됨
    console.log(`Text Length: ${textLength}`);
  
    // `??` 연산자 사용 예
    const itemsPerPage = preferences.itemsPerPage ?? 10; // itemsPerPage가 null 또는 undefined일 때만 10이 할당됨
    console.log(`Items Per Page: ${itemsPerPage}`);
  }
  
  // 테스트 케이스
  const userPreferences = {
    textLength: 0, // 0이 유효한 값이지만 || 연산자로 인해 50이 출력됨
    itemsPerPage: null // null 값에 대해 ?? 연산자로 인해 10이 출력됨
  };
  
  displayPreferences(userPreferences);
  

• truthy한 값이냐 아니냐 vs null이나 undefined이냐 아니냐
• 그래서 만약 itemsPerPage가 0이면 0은 falsy하지만, undefined는 아님으로 ?? 연산자에 의해 0이 출력될 것임