자바 스크립트 코테 정리 - jaba seukeulibteu kote jeongli

⭐️ 자바스크립트 코드 트릭

1️⃣ 구조분해할당을 통한 변수 Swap

✏️ ES6의 구조 분해 할당 문법을 사용하여 두 변수를 swap 가능하다.

let a = 5, b = 10;
[a, b] = [b, a];
console.log(a, b); // 10 5

2️⃣ 배열생성으로 루프 제거

✏️ 보통 단순히 범위 루프를 돌고 싶다면 다음과 같이 작성한다.

let sum = 0;
for (let i = 5; i < 10; i += 1) {
    sum += i;
}

✏️ 만약 범위 루프를 함수형 프로그래밍 방식으로 사용하고 싶다면 배열을 생성해서 사용

const sum = Array
    .from(new Array(5), (_, k) => k + 5)
    .reduce((acc, cur) => acc + cur, 0);

3️⃣ 배열 내 같은 요소 제거

✏️ Set 을 이용할 수 있다.

const names = ['Lee', 'Kim', 'Park', 'Lee', 'Kim'];
const uniqueNamesWithArrayFrom = Array.from(new Set(names));
const uniqueNamesWithSpread = [...new Set(names)];

4️⃣ Spread연산자를 통한 객체 병합

✏️ 두 객체를 별도 변수에 합쳐줄 수 있다.

const person = {
    name: 'Lee Sun-Hyoup',
    familyName: 'Lee',
    givenName: 'Sun-Hyoup'
};

const company = {
    name: 'Cobalt. Inc.',
    address: 'Seoul'
};

const leeSunHyoup = { ...person, ...company };
console.log(leeSunHyoup);
// {
//   address: “Seoul”
//     familyName: “Lee”
//   givenName: “Sun-Hyoup”
//   name: "Cobalt. Inc." // 같은 키는 마지막에 대입된 값으로 정해진다.
// }

5️⃣ && 와 || 활용

✏️ &&와 ||는 조건문 외에서도 활용 가능

/// ||
// 기본값을 넣어주고 싶을 때 사용할 수 있습니다.
// participantName이 0, undefined, 빈 문자열, null일 경우 'Guest'로 할당됩니다.
const name = participantName || 'Guest';

/// &&
// flag가 true일 경우에만 실행됩니다.
flag && func();

// 객체 병합에도 이용할 수 있습니다.
const makeCompany = (showAddress) => {
  return {
    name: 'Cobalt. Inc.',
    ...showAddress && { address: 'Seoul' }
  }
};
console.log(makeCompany(false));
// { name: 'Cobalt. Inc.' }
console.log(makeCompany(true));
// { name: 'Cobalt. Inc.', address: 'Seoul' }

6️⃣ 구조 분해 할당 사용

✏️ 객체에서 필요한 것만 꺼내 사용하는 것이 좋다

const person = {
    name: 'Lee Sun-Hyoup',
    familyName: 'Lee',
    givenName: 'Sun-Hyoup'
    company: 'Cobalt. Inc.',
    address: 'Seoul',
}

const { familyName, givenName } = person;

✏️ 객체 생성 시 키 생략하기

• 객체를 생성할 때 프로퍼티 키를 변수 이름으로 생략 가능

const name = 'Lee Sun-Hyoup';
const company = 'Cobalt';
const person = {
  name,
  company
}
console.log(person);
// {
//   name: 'Lee Sun-Hyoup'
//   company: 'Cobalt',
// }

7️⃣ 비구조화 할당 사용

✏️ 함수에 객체를 넘길 경우 필요한 것만 꺼내 사용 가능

const makeCompany = ({ name, address, serviceName }) => {
  return {
    name,
    address,
    serviceName
  }
};
const cobalt = makeCompany({ name: 'Cobalt. Inc.', address: 'Seoul', serviceName: 'Present' });

8️⃣ 동적 속성 이름

✏️ ES6에 추가된 기능으로 객체의 키를 동적으로 생성 가능

const nameKey = 'name';
const emailKey = 'email';
const person = {
  [nameKey]: 'Lee Sun-Hyoup',
  [emailKey]: ''
};
console.log(person);
// {
//   name: 'Lee Sun-Hyoup',
//   email: ''
// }

9️⃣ !!연산자를 통한 Boolean값 변경

✏️ !! 연산자를 이용하여 0, null, 빈 문자열, undefined, NaN을 false로 그 외에는 true로 변경 가능

function check(variable) {
  if (!!variable) {
    console.log(variable);
  } else {
    console.log('잘못된 값');
  }
}
check(null); // 잘못된 값
check(3.14); // 3.14
check(undefined); // 잘못된 값
check(0); // 잘못된 값
check('Good'); // Good
check(''); // 잘못된 값
check(NaN); // 잘못된 값
check(5); // 5

⭐️ 배열

배열은 연관된 데이터를 연속적인 형태로 구성되 구조를 가진다. 배열에 포함된 원소는 순서대로 번호 index가 붙는다.

1️⃣ 배열 특징

✏️ 고정된 크기를 가지며 일반적으론 동적으로 크기를 늘릴 수 없다.

• 자바스크립트처럼 대부분의 스크립트 언어는 동적으로 크기가 증감되도록 만들어져있다.

✏️ 원하는 원소의 index를 알고 있다면 O(1)로 원소를 찾을 수 있다.

✏️ 원소를 삭제하면 해당 index에 빈자리가 생긴다.

2️⃣ 배열 요소 삭제

삭제 후 순서를 맞추는 것은 O(n), 즉 선형시간이 소요

3️⃣ 배열 요소 추가

중간에 요소를 추가하고 싶다면 O(n), 즉 선형시간 소요

💡 따라서 추가와 삭제가 반복되는 로직이라면 배열 사용을 권장하지 않는다

✅ JS with 배열

1️⃣ 배열 생성 및 초기화

✏️ 배열 생성

const arr1 = new Array(); // []
const arr2 = []; // []
const arr3 = [1, 2, 3, 4, 5]; // [1,2,3,4,5]
const arr4 = new Array(5); // [empty x 5] 

✏️ 배열 초기화

// fill() : 똑같은 수로 초기화
const arr5 = new Array(5).fill(5); // [5,5,5,5,5]

// from() : 1,2,3,4,5로 초기화
const arr6 = Array.from(Array(5), function (v, k) {
  return k + 1;
}); // [1,2,3,4,5]

✏️ Source

✏️ Output

2️⃣ 배열 요소 추가, 삭제

✏️ Source

✏️ Output

3️⃣ 배열 길이 확인

✏️ 배열 길이 확인 length

• length를 작은 값으로 하면 뒷 요소 삭제
• length를 큰 값으로 하면 빈값으로 나머지 요소 추가

(! 권장 방법이 아님)

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr.length) // 6
arr.length = 3;
console.log(arr); // [1,2,3]
arr.length = 10; 
console.log(arr); [1,2,3, empty x 7]

4️⃣ number가 아닌 index

index가 number가 아니어도 배열에 추가되고 키값이 설정된다. 자바스크리트의 배열은 크기가 고정되어있지 않고 필요에 다라서 줄이고 늘릴 수 있기 때문에 인덱스에 숫자가 아닌 문자열, 논리값이 들어갈 수 있다.

숫자 외에 값을 넣으면 자동으로 문자열로 반환된 값이 키 값이 된다. 왜냐하면 배열은 근본적으로 객체 타입이기 때문이다.

하지만 배열은 일반적인 객체와 달리 length가 내부적으로 관리되기 때문에 인덱스와 무관한 값에 대해서는 길이 추가가 되지 않는다. 아래에서 길이가 여전히 4인 이유가 바로 이 것이다!

// 자바스크립트의 Array는 동적
const arr = []; // []

// 배열 요소 추가
arr.push(1); [1]
arr.push(2); [1,2]
arr.push(3); [1,2,3]
arr.push(3); [1,2,3,3]

console.log(arr.length); // 4

arr["string"] = 10; // [1,2,3,3, string:10]
arr[false] = 0; // [1,2,3,3, string:10, false:0]
console.log(arr.length); // 4

5️⃣ 배열의 편리한 함수들

✏️ 자세한 설명은 아래의 정리에서!

const arr = [1, 2, 3, 4, 5, 6];

// join
console.log(arr.join(", ")); // 1, 2, 3, 4, 6

// reverse
console.log(arr.reverse()); // [6, 5, 4, 3, 2, 1]
console.log(arr); // [6, 5, 4, 3, 2, 1]

const arr1 = [1, 2, 3, 4, 5, 6];
const arr2 = [7, 8, 9, 10];

// concat
console.log(arr1.concat(arr2)); // [1,2,3,4,5,6,7,8,9,10]

const arr = [1, 2, 3, 4, 5, 6];

// push, pop
arr.push(7); // [1,2,3,4,5,6,7]
arr.push(7, 8, 9); // [1,2,4,5,6,7,7,8,9]
arr.pop(); // [1,2,3,4,5,6,7,8]
arr.pop(); // [1,2,3,4,5,6,7]
console.log(arr.pop()); // [1,2,3,4,5,6]
console.log(arr); // [1,2,3,4,5,6]

const arr = [1, 2, 3, 4, 5, 6];

// shift, unshift
arr.shift(); // [2,3,4,5,6]
arr.shift(); // [3,4,5,6]
arr.unshift(10); [10,3,4,5,6]

// 배열 중간의 3, 4 잘라 출력하기
const arr = [1, 2, 3, 4, 5, 6];

// 2번 인덱스부터 4번 앞까지 잘라 출력한다.
console.log(arr.slice(2, 4)); // [3,4]
console.log(arr); // [1,2,3,4,5,6]

const arr = [1, 2, 3, 4, 5, 6];

/* 
for (let i = 0; 1 < 6; i += 1) {
  console.log(arr[i]);
}
*/

// for of
for (const item of arr) {
  console.log(irem);
}

⭐️ 객체

여러 값을 키-값 형태로 결합시킨 복합 타입

✅ JS with 객체

1️⃣ 객체 생성

const obj1 = new Object();
const obj2 = {};
const obj3 = { name : "박정호", id: "houya" };
console.log(obj1); // {}
console.log(obj2); // {}
console.log(obj3); // { name : "박정호", id: "houya" }

2️⃣ 객체 추가

const obj = { name : "박정호", id: "houya" };

obj["email"] = "pjh2234.com";
obj.phone = "01012345678";
console.log(obj); // { name : "박정호", id: "houya", email: "pjh2234.com", phone: "01012345678"  }

3️⃣ 객체 삭제

delete obj.phone;
console.log(obj); // { name : "박정호", id: "houya", email: "pjh2234.com" }

in 이용하여 실제로 키가 있는지 없는지 확인

console.log("email" in obj); // true
console.log("phone" in obj); // false

4️⃣ key & value 확인

• keys 배열의 형태로 키 확인 가능 Object.keys(obj)
• values 배열의 형태로 값 확인 가능 Object.values(obj)

const obj = { name : "박정호", id: "houya" };

obj["email"] = "pjh2234.com";

console.log(Object.keys(obj)); // ['name','id','email']
console.log(Object.values(obj)); // ['박정호', 'houya', 'pjh2234']

5️⃣ 객체 순회

const obj = { name : "박정호", id: "houya" };

obj["email"] = "pjh2234.com";

// for in
for (const key in obj) {
  console.log(key, obj[key]);
}

name 박정호
id houya
email pjh2234.com

👍 정리 (중요)

🙂 코딩테스트에서 써먹을 수 있는 유용한 문법들만 정리해보자~~

✏️ fill

• 많은 값을 같은 값으로 초기화

let arr3 = Array(10).fill(0);
console.log(arr3);

// 결과
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

✏️ from

• 특정 로직을 사용하여 초기화

let arr4 = Array.from( { length: 10}, (_, i) => i);
console.log(arr4);

// 결과
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

✏️ push

• 배열 끝에 값을 추가

const arr = [1, 2, 3]; // [1,2,3]

arr.push(4); // [1,2,3,4]

arr.push(5, 6) [1,2,3,4,5,6]

✏️ pop

• 배열의 끝의 값을 삭제

const arr = [1, 2, 3, 4, 5, 6];

// push, pop
arr.push(7); // [1,2,3,4,5,6,7]
arr.push(7, 8, 9); // [1,2,4,5,6,7,7,8,9]
arr.pop(); // [1,2,3,4,5,6,7,8]
arr.pop(); // [1,2,3,4,5,6,7]
console.log(arr.pop()); // [1,2,3,4,5,6]
console.log(arr); // [1,2,3,4,5,6]

✏️ shift

• 배열 앞에 값 추가 (선형시간 소요)

const arr = [1, 2, 3, 4, 5, 6];

arr.shift(); // [2,3,4,5,6]
arr.shift(); // [3,4,5,6]

✏️ unshift

• 배열 앞에 값 삭제 (선형시간 소요)

const arr = [1, 2, 3, 4, 5, 6];

arr.unshift(10); [10,1,2,3,4,5,6]

✏️ slice

• 배열 중간을 잘라 출력하기(원본에 영향 X)

const arr = [1, 2, 3, 4, 5, 6];

// 2번 인덱스부터 4번 앞까지 잘라 출력한다.
console.log(arr.slice(2, 4)); // [3,4]
console.log(arr); // [1,2,3,4,5,6]

✏️ splice

• 배열 중간에 값 추가, 삭제 (선형시간 소요)

// 3번 엔덱스에 522 추가
arr.splice(3, 0, 522); // [1,2,3,522,4,5,6]
console.log(arr);

// 3번 인덱스 값 제거
arr.splice(3, 1); //  [1,2,3,4,5,6]

✏️ join

• 배열을 하나의 문자열로 합친다

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr.join(", ")); // 1, 2, 3, 4, 6

✏️ reverse

• 모든 배열을 거꾸로 돌린다 (원본에 영향을 준다 = 원본이 변경)

const arr = [1, 2, 3, 4, 5, 6];

console.log(arr.reverse()); // [6, 5, 4, 3, 2, 1]
console.log(arr); // [6, 5, 4, 3, 2, 1]

✏️ concat

• 두 배열을 합치기

const arr1 = [1, 2, 3, 4, 5, 6];
const arr2 = [7, 8, 9, 10];

console.log(arr1.concat(arr2)); // [1,2,3,4,5,6,7,8,9,10]

✏️ for... of

• 직관적인 배열 순회 기능

const arr = [1, 2, 3, 4, 5, 6];

/* 
for (let i = 0; 1 < 6; i += 1) {
  console.log(arr[i]);
}
*/

// for of
for (const item of arr) {
  console.log(irem);
}

✏️ for... in

• 직관적인 객체 순회 기능

const obj = { name : "박정호", id: "houya" };

obj["email"] = "pjh2234.com";

// for in
for (const key in obj) {
  console.log(key, obj[key]);
}

name 박정호
id houya
email pjh2234.com

✏️ Object.keys(obj)

• 배열의 형태로 키 확인 가능

const obj = { name : "박정호", id: "houya" };

obj["email"] = "pjh2234.com";

console.log(Object.keys(obj)); // ['name','id','email']

✏️ Object.values(obj)

• 배열의 형태로 값 확인 가능

const obj = { name : "박정호", id: "houya" };

obj["email"] = "pjh2234.com";

console.log(Object.values(obj)); // ['박정호', 'houya', 'pjh2234']

참조 및 참고하기 좋은 사이트

• 코딩테스트 광탈 방지 A to Z : JavaScript 강의
• https://velog.io/@onezeun/03-1-%EB%B0%B0%EC%97%B4