[JS] 실무에서 자주 사용하는 Javascript 문법

IT 쪽 공부를 시작하면서 좋아하게 된 유튜버, 인스타그래머가 여럿 있는데,

그 중에 특히나 정감이 많이 가는 유튜버 '코딩알려주는누나' (..언니🥰)의 강의에서 알게된 지식을 정리하고자 한다.

---

💛실무에서 자주 사용하는 Javascript 문법💛

실무에서 이미 몇 번이고 본 코드긴 한데, 막상 내가 쓸려고 보면 생각이 안나서 이렇게 기록 ㅎ

1.  Object Shorthand Assignment (객체 축약 할당?)

💔 기존

const name = 'noona';
const age = 28;

let person = {
    name: name,
    age: age
}

 

❤️ 실무에서는?

let person = {
    name,
    age
}

객체 내 변수와 할당할 변수의 이름이 동일할 경우, `name: name` 같이 적지 않고 축약해서 `name`이라고 적는다!

 

---

2.  Destructuring (분해)

💔 기존

/* Object 형태 */
const person = {name: 'noona',  age: '28'}

// 값 사용하는 방법
let name = person.name;
let age = person['age'];


/* Array 형태 */
const array = [1,2,3,4];

// 값 사용하는 방법
let first = array[0];
let second = array[1];

 

❤️ 실무에서는?

/* Object 형태 */
const person = {name: 'noona',  age: '28'}

let {name, age} = person; // 값 가져와서 변수에 바로 할당


/* Array 형태 */
const array = [1,2,3,4];

let [a,b, ...rest] = array; // a=1, b=2, rest=[3,4]

👉🏻 Object 형태 : person 객체에서 name과 age를 각각 바로 할당해서 쓸 수 있음

👉🏻 Array 형태 : array 에서 순서대로 값을 할당해서 쓸 수 있음

 

 

---

3. Spread (깊은 복사 & 얕은 복사)

실무에서 특히나 의문이었던 부분..! 이 강의를 먼저 봤으면 삽질을 덜했겠지 ^_^

let person = {name: 'noona', age: 28};

let person2 = {...person}; // 깊은 복사 --> 객체를 복사해서 새로운 객체를 만듦
let person3 = person; // 얕은 복사 --> 객체 주소를 참조하는거라 값이 바뀌면 함께 바뀜

‼️ 얕은 복사는 객체 자체를 복사하는 것이 아니라, 객체 `주소`를 참조하는 것

🍀 깊은 복사를 사용해야 기존 객체와 별개의 새 객체로 만들어져, 원본 데이터를 건드리지 않고 값을 자유롭게 수정할 수 있음.

console.log(person === person3); // true
console.log(person === person2); // false

동일한 객체를 바라보고 있는 얕은 복사의 경우 `true`로, 

신규 객체를 만들어버린 깊은 복사의 경우 `false`로 나온다.

// 깊은 복사를 해오되, 안에 데이터를 변경하고 싶을 때
let person4 = {...person, name: 'noona2'}; // name만 변경 {name: 'noona2', age: 28}

깊은 복사를 해오면서, 내부 데이터를 변경할 때는 이렇게 사용한다.

객체 안에 동일한 key의 값을 업데이트 해서 깊은 복사를 하게된다!

 

/* Array 형태 */
let a = [1,2,3];

let b = [...a, 4]; // 추가 [1,2,3,4]
let c = [...a, ...b]; // 합치기 [1,2,3,1,2,3,4]

Object 뿐만 아니라, Array 도 깊은 복사가 가능하다!

 

 

---

4. 삼항연산자

💔 기존

let person = {name: 'noona', age: 28};

if (person) {
    console.log(person.name);
} else {
    console.log('person이 없습니다.');
}

❤️ 실무에서는?

let person = {name: 'noona', age: 28};

console.log(person? person.name : "person이 없습니다.")

조건이 간단할 경우 삼항연산자를 자주 사용한다.

하지만, 조건이 까다롭거나 많은 사람들과 협업할 때는 삼항연산자가 자칫 스파게티코드가 되어버릴 수 있어 주의 요망🚨🚨

 

 

출처 : https://youtu.be/NcI-WJSWdv8?si=lw0ZKyrM8AIicLdV