Jacob Ko

Jacob Ko

Everything is Awesome 👍

01.Data

Updated:

1. 표기법

  • 프로그래밍 언어의 interpreter (인터프리터)는 space bar (띄어쓰기)는 하나의 메모리로 할당 하기 때문에 메모리 손실 뿐 아니라, 의미가 달라 지는 경우가 발생됩니다.

  • 그래서 사람의 눈으로 보기 쉽게 하기 위해서 각 프로그래밍 언어들은 주요 언어들은 아래의 방법으로 표현합니다.

1. camelCase

  • 처음글자를 소문자 띄어쓰기 되는 다음 글자를 대문자 로 표기하는 방식.
Raw camelCase
fruits in basket fruitsInBasket
has error hasError
is visible isVisible
  • 주로 JavaScript 에서 사용합니다..

2. PascalCase

  • 처음글자도 대문자 띄어쓰기 되는 다음 글자도 대문자 로 표기하는 방식.
Raw camelCase PascalCase
fruits in basket fruitsInBasket FruitsInBasket
has error hasError HasError
is visible isVisible IsVisible
  • 주로 C 에서 사용합니다..

3. kebab-case

  • 띄어쓰기 부분에 dash - 를 사용해서 사용합니다.. 나머지 글자는 모두 소문자
Raw camelCase PascalCase kebab-case
fruits in basket fruitsInBasket FruitsInBasket fruits-in-basket
has error hasError HasError has-error
is visible isVisible IsVisible IsVisible
  • 주로 HTML, CSS 에서 사용합니다..

4. snake-case

  • 띄어쓰기 부분에 underline _ 를 사용해서 사용합니다.. 나머지 글자는 모두 소문자
Raw camelCase PascalCase kebab-case snake_case
fruits in basket fruitsInBasket FruitsInBasket fruits-in-basket fruits_in_basket
has error hasError HasError has-error has_error
is visible isVisible IsVisible IsVisible is_visible
  • 나머지 대부분 프로그래밍 언어에서 사용 Python, SQL 등 에서 사용합니다.

2. Zero-based Numbering

  • 거의 모든 programming language 는 array, string 등 index 번호를 사용하는 곳에서는 0부터 기호를 사용합니다.
let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'

3. Data type

3-1 String (문자 데이터)

  • ””(quotation mark), ‘’(Apostrophe) 를 사용합니다.
  • 다른 variable 을 받으려면 ``(backtic) 기호를 사용해서 ${variable} 형식으로 사용합니다.
let myName = "Jacob";
let email = "thefirstemail@gmail.com";
let hello = `Hello ${myName}!`;

console.log(myName); // Jacob
console.log(email); // thefirstemail@gmail.com
console.log(hello); // hello Jacob!

🔑 String Method

String MDN web docs

  • JS는 기존의 객체를 복사하여(Cloning) 새로운 객체를 생성하는 Prototype 기반의 언어입니다. 프로토타입객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다.
  • 자주 사용되는 prototype method 입니다.
  1. string.indexOf()
const result = "Hello world".indexOf("world");
console.log(result); // string의 index 번호를 출력합니다 -> 6
const noResult = "Hello world".indexOf("programming");
console.log(noResult); // 만약 문자 데이터가 없으면 -1이 나옴니다
  1. string.length()
const str = "Hello world";
console.log(str.length); // 띄어쓰기 포함에서 전체 string의 길이임 -> 11
  1. string.slice()
const str = "Hello world";
console.log(str.slice(6, 11)); // (index 시작지점-zero base부터 시작, 끝나기 전까지 index 번호) -> world
  1. string.replace()
const str = "Hello world";
console.log(str.replace("world", "Jacob")); // (선택 단어, 바꿀 단어) -> Hello Jacob
  1. string.match()
const str2 = "jacobkosmart@gmail.com";
console.log(str2.match(/.+(?=@)/)[0]); // match() match 해서 맞추는것. 특정한 정규 표현식을 매치 시킬수 있는것 -> jacobkosmart
  1. string.trim()
const str3 = "     Hello world    ";
console.log(str3.trim()); // trim() 앞뒤에 공백 문자 없애 주는것 (특히, 로그인 ID 넣을 때 많이사용 - 사용자가 띄어쓰기를 할 경우) -> Hello world

3-2 Number (숫자 데이터)

  • 정수 및 부동소수점 숫자를 사용합니다.
let number = 123;
let opacity = 1.57;

console.log(number); //123
console.log(opacity); //1.57

🔑 Number and Math

  • 자주 사용되는 Math 내장 함수
  1. toFixed()
const pi = 3.1415926358979;
const str = pi.toFixed(2); // 소수점 2자리만 나타냄, 나머지 소숫점 이하는 제거함
console.log(str); // -> 3.14
console.log(typeof str); // 근데 결과 값이 strting 임 -> str
// string 을 다시 number type 으로 바꾸려면 parseInt, parseFloat 으로 형 변환 해서 사용함니다.
const integer = parseInt(str); // int 형으로 형변환
const float = parseFloat(str); // float 형으로 형변환
console.log(integer); // -> 정수로 출력 3
console.log(float); // -> 솟수형으로 그대로 출력 3.14
console.log(typeof integer, typeof float); // number, number
  1. Math.abs()
console.log("abs: ", Math.abs(-12)); // 절대값 계산 -> abs: 12
  1. Math.min()
console.log("min: ", Math.min(2, 8)); // 최소값 계산 -> min: 2
  1. Math.max()
console.log("max: ", Math.max(2, 8)); // 최대값 계산 -> max: 8
  1. Math.ceil()
console.log("ceil: ", Math.ceil(3.14)); // 소수점 올림 계산, 정수 부분만 출력 -> ceil: 4
  1. Math.floor()
console.log("fllor: ", Math.floor(3.14)); // 소수점 내림 계산, 정수만 출력 -> floor: 3
  1. Math.round()
console.log("round: ", Math.round(3.14)); // 소수점 반올림 계산, 정수만 출력 -> roung: 3
  1. Math.random()
console.log("random: ", Math.random()); //  Random 번호 출력 난수라서 소수점 10 단위 나타냄 -> random:  0.9599742770634099

🔑 비교, 논리 연산자

  • 비교 연산자 (Comparision operator)
// 동등연산자는 === 3개 사용함 (value, type 값까지 같아야 true 가 됨)

const a = 1;
const b = 3;

console.log(a === b); // false

function isEqual(x, y) {
  return x === y;
}

console.log(isEqual(1, 1)); // true
console.log(isEqual(2, "2")); // false -> type 이 다르기 때문에 false 가 됨
console.log(a >= b); // false -> a 가 더 작기 때문에 false가 됨
  • 논리 연산자 (logical operator)
    • && = and
    •   = or
    • ! = not(부정연산자)
// 논리 연산자(logical operator)

const a = 1 === 123;
const b = "AB" === "ABC";
const c = true;

console.log(a); // 1 과 123 이 같지 않기 때문에 -> false
console.log(b); // AB 와 ABC가 같지 않기 때문에  -> false
console.log(c); // true

// && 그리고, and 연산자 임.
console.log("&&: ", a && b && c); // 셋다 false 니까 (and 연산자니까 3가지 값이 모두 true 이어야함)-> false

// || 또는, or 연산자 임.
console.log("||: ", a || b || c); // 셋중에 하나에 true 가 있기 때문에 or 연산자임 -> true

//  부정 연산자 ! 임
console.log("!: ", !a); // false의 반대 (not) 이니까 -> false

🔑 산술, 할당 연산자

  • 산술연산자 (arithmetic operator)
console.log(1 + 2); // 더하기 -> 3
console.log(5 - 7); // 빼기 ->  -2
console.log(3 * 4); // 곱하기 -> 12
console.log(10 / 2); // 나누기 -> 5
console.log(7 % 5); // 나머지 값 -> 2
  • 할당 연산자 (assignment operator)
let a = 2;
// a = a + 1
a += 1;

console.log(a); // 자신에 1을 더한값을 return 하는것 (다른 연산자 - * / % 도 같이 다 쓸 수 있임) -> 3
  • 삼향 연산자 (tenary operator)
// 삼향 연산자(tenary operator)

const a = 1 < 2;

if (a) {
  console.log("참"); // 참
} else {
  console.log("거짓");
}

// 물음표 ? 의 기준으로 a의 참일경우 앞부분을 출력, 거짓일 경우 뒷부분을 출력함
console.log(a ? "참" : "거짓"); // 참
// 코드를 줄이기 위해서 많이 사용되는 tenary operator 임...

3-3 Boolean (참, 거짓)

  • ture, false 두 가지 값밖에 없는 논리 데이터 입니다.
let checked = true;
let isShow = false;

console.log(checked); //true
console.log(isShow); //false

3-4 undefined

  • 값이 할당되지 않은 상태를 나타냅니다.
let undef;
let obj = { abc: 123 };

console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined

3-5 Null

  • 어떤 값이 의도적으로 비어 있음을 의미합니다.
let empty = null;

console.log(empty); // null

3-6 Object (객체 데이터)

  • 여러 데이터를 key:Value 형태로 저장합니다. {} Brace 기호를 사용합니다.
let user = {
  //key: value,
  name: "Jacob",
  age: "80",
  isValid: true,
};

console.log(user.name); // Jacob
console.log(user.age); // 80
console.log(user.isValid); // true

🔑 Object (객체) 타입에서 자주 쓰이는 함수들

  • .assign(target, source) -> 1개 이상의 source를 target으로 붙여 넣기 해서 합치는것
const userAge = {
  // key: value
  name: "Jacob",
  age: 80,
};
const userEmail = {
  name: "Jacob",
  email: "jacobkosmart@gmail.com",
};

// userEmail (source 부분을) userAge로 복사해서 합치는거 (중복되면 덮어쓰기 됨)
const target = Object.assign(userAge, userEmail);
console.log(target); // .assing(합침) -> {name: "Jacob", age: 80, email: "jacobkosmart@gmail.com"}

console.log(userAge); // 원본 데이터도 함께 변경 됨 ->  {name: "Jacob", age: 80, email: "jacobkosmart@gmail.com"}
console.log(target === userAge); // 생김새가 같다고 해서 똑같은게 아니라, 매모리 할당이 같다는거임. -> true
  • Object는 value 값이 같다고 해서 true가 되는것이 아니라, 메모리 주소가 같아야 함.
// 2개의 객체는 생김새는 같지만, 다른 객체임 (메모리 주소가 다른것임)
const a = { k: 123 };
const b = { k: 123 };
console.log(a === b);
  • 만약, 합쳐서 새로운 object에 할당하는 방법은? -> {} 추가
const userAge = {
  // key: value
  name: "Jacob",
  age: 80,
};
const userEmail = {
  name: "Jacob",
  email: "jacobkosmart@gmail.com",
};

// 만약에, 합쳐서 새로운 Object를 만드는 방법은? -> {} 추가
// userAge, userEmail 이 source data 가 됨에 따라 새로운 object data에다가 값을 넣음
const target = Object.assign({}, userAge, userEmail);
console.log(target); // ->  {name: "Jacob", age: 80, email: "jacobkosmart@gmail.com"}

console.log(userAge); //  ->  {name: "Jacob", age: 80, email: "jacobkosmart@gmail.com"}
// 이렇게 되면 새로운 obejct가 생성 됬으니, 메모리 값이 같지 않아 false data 출력
console.log(target === userAge); // false
  • object.keys() -> key 값만 추출해서 return
const user = {
  name: "Jacob",
  age: 80,
  email: "jacobkosmart@gmail.com",
};

const keys = Object.keys(user);
console.log(keys); // key 값만 출력 함 -> ['name', 'age', 'email']

// user 부분의 value 값 property를 출력
console.log(user["email"]); // -> jacobkosmart@gmail.com

// key 부분에 있는 value 값들만 추출해서 value 값만 array로 만들 수 있음
const values = keys.map((key) => user[key]);
console.log(values); // -> ['Jacob', '80', 'jacobkosmart@gmail.com']

3-7 Array (배열 데이터)

  • 여러 데이터를 순차적으로 저장합니다. [] Bracket 기호를 사용합니다.
let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'

🔑 Array (배열) 타입에서 자주 쓰이는 함수들

  • .length() -> array 에 몇개의 element (item) 이 있는지 count 해주는것입니다.
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cheery"];

console.log(numbers.length); // number 의 item 수는 4개 -> 4
console.log(fruits.length); // fruits 의 item 수는 3개 -> 3
console.log([1, 2].length); // [1, 2] 의 item 수는 2개 -> 2
console.log([].length); // [] 공배열 은 아무것도 없으니까 -> 0
  • .concat() 은 2개의 array를 병합해서 새로운 array를 만드는것입니다.
    • 단, 원본의 기존 데이터는 바뀌지 않고 새로운 array를 메모리에 할당 됩니다.
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cheery"];

console.log(numbers.concat(fruits)); // 2 개의 array 가 순서대로 합침 -> [1, 2, 3, 4, "Apple", "Banana", "Cheery"]
console.log(numbers); // 원본의 array는 그대로 남아 있음 -> [1, 2, 3, 4]
console.log(fruits); // 원본의 array는 그대로 남아 있음 -> ['Apple', 'Banana', 'Cheery']
  • .forEach()는 붙어 있는 array의 item 갯수 만큼 반복해서 콜백 함수가 실행되는것입니다.
const fruits = ["Apple", "Banana", "Cheery"];

fruits.forEach(function (item, i) {
  console.log(item, i);
});
// item , index 하나씩 콜백해서 출력함
// Apple 0
// Bananna 1
// Cheery 2
  • .map() 은 method 내부에 콜백에서 반환된 새로운 array 로 return 해줌니다.
// 비교, forEach()를 사용하여 item - index 순으로 return
const fruits = ["Apple", "Banana", "Cheery"];

const a = fruits.forEach(function (fruit, i) {
  console.log(`${fruit}-${i}`);
});
// Apple - 0
// Banana - 1
// Cheery - 2
console.log(a); // retrun 해주었기 때문에 undefined

// 마찬가지로 forEach를 사용하해서 arrow function 으로 표현
// this가 없기 때문에 function을 arrow function으로 사용해도 됨
const a = fruits.forEach((fruit, i) => {
  console.log(`${fruit}-${i}`);
});
console.log(a);

// 비교, map() 을 사용하여 index - item 순으로 return
const b = fruits.map(function (fruit, i) {
  return {
    id: i,
    name: fruit,
  };
});
console.log(b);
// id : 0, name: "Apple"
// id : 1, name: "Banana"
// id : 2, name: "Cheery"

// 마찬가지로 arrow 함수를 사용할 수 있고, 또한 return 문 도 생략이 가능하게 사용 가능
const b = fruits.map((fruit, i) => ({
  id: i,
  name: fruit,
}));
console.log(b);
// id : 0, name: "Apple"
// id : 1, name: "Banana"
// id : 2, name: "Cheery"
  • .filter() - true 로 반환된 data 만 찾아서 새로운 array 에 출력 해주는 함수 입니다.
// map 을 통해 boolen data 반환, 새로운 array data
// 배열데이터의 갯수만큼 반환된 데이터의 갯수도 같음
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cheery"];

const a = numbers.map((number) => {
  return number < 3;
});
console.log(a);
// map() 함수를 통해 모든 boolen data 반환됨 (number 가 3보가 작으면 true, 아니면 false) // [true, true, false, false]

// 위에 map() 함수 에서 arrow function을 사용 했기 때문에, return 문 생략 가능
const a = numbers.map((number) => number < 3);
console.log(a); // [true, true, false, false]

// filter는 true 반환된 data만 찾아서 새로운 array 에 출력 해주는것
// 필터링을 해서 true 갯수만 반환함, raw data 와 갯수가 다를 수도 있음
const b = numbers.filter((number) => {
  return number < 3;
});
console.log(b); // [1, 2]
// filter 는 true 된 값 중에서, map 과 다르게 filter는 boolen data type 이 아닌 item 을 return 함.

// return 문 생략 버전
const b = numbers.filter((number) => number < 3);
console.log(b); // [1, 2]

// 최종 원본 데이터는 손상되지 않고 그대로 잘 출력됨
console.log(numbers); // [1, 2, 3, 4]
  • .find(), findIndex() - array 내부의 find() 조건에 맞는 item을 return 해줍니다. findIndex()는 그 찾은 item의 index 를 return 해줍니다.
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cheery"];

const a = fruits.find((fruit) => {
  return /^B/.test(fruit); //정규표현식 /^B/ -> 대문자 B로 시작하는 문자데이터를 의미
}); // test method를 거쳐서 true data가 나옴 찾은 아이템이 나오면 find를 멈추고 1개의 true data를 반환함
console.log(a); // 조건에 맞는 -> Banana

// arrow function 사용으로 코드 간소화 (return 문 생략)
const a = fruits.find((fruit) => /^B/.test(fruit));
console.log(a); // Banana

const b = fruits.findIndex((fruit) => {
  return /^C/.test(fruit); // 대문자 C로 시작하는 모든 item 검색 후, 찾은 위치의 index 번호를  zero based 형식으로 반환함
});
console.log(b); // index 번호인 -> 2

// arrow function 사용으로 코드 간소화 (return 문 생략)
const b = fruits.findIndex((fruit) => /^C/.test(fruit));
console.log(b); // -> 2
  • .includes() - array data 부분에 인수로 사용된 특정한 데이터가 포함되있는지 확인하는입니다.
    • boolen data 로 반환됨
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cheery"];

// array data 부분에 인수로 사용된 특정한 데이터가 포함되있는지 확인하는거 .include()
// boolen data 로 반환됨
const a = numbers.includes(3);
console.log(a); // number 에 3이 포함되어 있기 때문에 -> true

const b = fruits.includes("Jacob");
console.log(b); // fruits 에 Jacob이 없기 때문에 -> false
  • ❗️ (중요) .push(), .unshift() - 자주 사용되니까 주의깊게 확인하시기 바랍니다.
    • push() -> array 맨 뒤쪽에 특정한 element 를 삽입하는것입니다. (원본 데이터가 변경됩니다.)
    • unshift() -> array 맨 앞쪽에 특정한 element 를 삽입하는것입니다. (역시 원본 데이터가 변경됩니다.)
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cheery"];

// push는 제일 뒤쪽에 5 를 밀어 넣는것
numbers.push(5);
console.log(numbers); // [1, 2, 3, 4, 5]

// unshift는 맨 앞에 0를 밀어 넣는것
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3, 4, 5]
  • .reverse() - 배열 데이터를 거꾸로 뒤집어서 원본데이터를 다시 return 합니다. (원본 데이터가 변경됩니다.)
const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cheery"];

// 배열데이터를 거꾸로 뒤집어서 원본데이터가 변함
numbers.reverse();
fruits.reverse();

console.log(numbers); // [4, 3, 2, 1]
console.log(fruits); // ['Cheery', 'Banana', 'Cheery']

  • splice() - 특정한 부분을 지울때 많이 사용합니다. (원본 데이터가 변경 됩니다.)

  • splice(x, y, z) x: 선택 index 번호 , y: 몇개나 지울지 선택 (0 을 쓰면 아무것도 안지움) , z: x 자리 앞에 사이에 z 를 insert 해서 return 함

const numbers = [1, 2, 3, 4];
const fruits = ["Apple", "Banana", "Cheery"];

numbers.splice(2, 1); // (index, 몇개를 지울지 선택) // 현재 상태 : [1, 2, 4]
numbers.splice(2, 0); // 지울 아이템이 하나도 없을때, 는 그대로 출력 // 현재상태 : [1, 2, 4]
numbers.splice(2, 0, 999); // zero based 2번 자리 앞에 1~2 번 사이에 999를 집어 넣어라 // 현재상태 : [1, 2, 999, 4]
numbers.splice(2, 1, 99); // 2번째인 3을 지우고, 그자리에 99를 집어 넣어라임.  // 현재 상태 : [1, 2, 99, 4]

console.log(numbers); // [1, 2, 99, 4]

fruits.splice(2, 0, "orange");
console.log(fruits); // 지우는것은 없고 orange를 index 2 번 앞에 'orange' 삽입 -> ['Apple', 'Banana', 'Orange', 'Cheery']

4. 구조 분해 할당 (Destructuring assignment)

  • 비구조화 할당, 변수에다가 user keys data 를 분해해서 새로운 변수를 만듬니다
const user = {
  name: "Jacob",
  age: 80,
  email: "jacobkosmart@gmail.com",
};

const { name, age, email, address } = user;

console.log(`사용자의 이름은 ${name}입니다`); // -> 사용자의 이름은 Jacob 입니다.
console.log(`${name}의 나이는 ${age}`); // -> Jacob의 나이는 80
console.log(`${name}의 이메일 주소는 ${email}입니다`); // -> Jacob의 이메일 주소는 jacobkosmart@gmail.com 입니다
console.log(address); // -> key 값이 없기 때문에 undefined
  • 만약 기본값으로 제시된것과 나중에 제시된 값과 충돌 될때는, 기본값으로 제시된 것으로 덮어 씌움니다.
const user = {
  name: "Jacob",
  age: 80,
  email: "jacobkosmart@gmail.com",
  address: "USA",
};
// address 가 기본값으로 Korea로 지정될때, address 가 이미 user에 USA로 되어 있기 때문에, 최종으로는 USA로 덮어 씌움
const { name, age, email, address = "Korea" } = user;

console.log(`사용자의 이름은 ${name}입니다`); // -> 사용자의 이름은 Jacob입니다
console.log(`${name}의 나이는 ${age}`); // -> Jacob의 나이는 80
console.log(`${name}의 이메일 주소는 ${email}입니다`); // -> Jacob의 이메일 주소는 jacobkosmart@gmail.com입니다
console.log(address); // 먼저 제시된 기본값인 USA 로 덮어 씌워짐 -> USA
  • 새로운 변수를 설정해서 출력 할 수 도 있습니다
const user = {
  name: "Jacob",
  age: 80,
  email: "jacobkosmart@gmail.com",
  address: "USA",
};
// name:새로운 변수 , 를 사용해서 nyName이라는 변수로 나타 낼수 있다
const { name: myName, age, email, address = "Korea" } = user;
console.log(myName); // 새로운 변수 사용하여 Jacob 출력 -> Jacob
  • 객체 데이터 뿐만 아니라, array data 도 구조분해할당을 사용할 수 있습니다.
// 객체 데이터 뿐만 아니라, array data도 구조분해할당을 사용할 수 있음
// 단순하게 index 번호대로 순서대로 각각, 새로운 변수에 할당됨
const fruits = ["Apple", "Banana", "Cherry"];
const [a, b, c, d] = fruits;
console.log(a, b, c, d); // d 는 없기 때문에 undefined -> Apple, Banana, Cherry, undefined

// 만약 중간에 Banana 만 출력하고 싶을때는 공란에 , 만 넣고 쓰면됨
const [, b] = fruits;
console.log(b); // -> banana

5. 전개 연산자 (Spread)

  • … 3개를 사용해서 array data를 그냥 str 형태로 변환해서 return 합니다.
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // -> ['Apple', 'Banana', 'Cherry']
console.log(...fruits); // array 형태가 아닌 string 으로 그냥 return -> Apple Banana Cherry
  • 전개 연산자를 object 형태로 묶은 경우
const fruits = ["Apple", "Banana", "Cherry"];

function toObject(a, b, c) {
  return {
    a: a,
    b: b,
    c: c,
  };
}
console.log(toObject(...fruits)); // {a: "Apple", b: "Banana", c: "Cherry"}

// 만약 전개연산자를 사용하지 않고 object 형태로 출력하려면 array 에 indexing 해줘서 출력 (코드가 길어져서 불편해짐.)
console.log(toObject(fruits[0], fruits[1], fruits[2])); // {a: "Apple", b: "Banana", c: "Cherry"}
  • rest parameter (받는 매게 변수를 모두 받아서 처리하는것 입니다.)
    • 순서대로 처리하다가, 나머지부분 cherry 부터는 c 에서 나머지 부분 다 받아서 처리하는 것입니다.
    • 나머지 부분은 array data로 처리함니다.
const fruits = ["Apple", "Banana", "Cherry", "Orange"];
function toObject(a, b, ...c) {
  return {
    a, //속성과 변수의 이름이 같은경우, 축약해서 하나만 써도 인식함
    b, //축약형임
    c,
  };
}
console.log(toObject(...fruits)); //  나머지 부분을 array 로 return {a: "Apple", b: "Banana", c: ["Cherry", "Orange"]}

// 위의 arrow 함수를 사용해서 줄여서 사용할 수 있음.
// 주의!! 화살표 함수에서 객체 데이터를 쓸때, {}를 사용하면, 함수의 범위를 나타내는 단순한 블럭의 의미를 나타냄.
// 즉, () 안에 {} 객체데이터 형식을 넣어야 함 -> ({a, b, c})
const fruits = ["Apple", "Banana", "Cherry", "Orange"];

const toObject = (a, b, ...c) => ({ a, b, c });
console.log(toObject(...fruits)); // -> {a: "Apple", b: "Banana", c: ["Cherry", "Orange"]}

6. 불변성 (Immutability)

  • 원시 데이터: String, Number, Boolean, underfined, null -> 데이터 불변
  • 참조형 데이터: Object, Array, Function -> 데이터 가변
// 기존의 데이터는 변하지 않고, 원시 데이터의 경우 같은 값일 경우 같은 메모리에 저장되서
// 비교 연산 자를 할 경우 true 가 나오게 됨
let a = 1;
let b = 4;
console.log(a, b, a === b); // ->  1 4 false

b = a;
console.log(a, b, a === b); // -> 1 1 true

a = 7;
console.log(a, b, a === b); // -> 7 1 false

let c = 1;
console.log(b, c, b === c); // -> 1 1 true

// 참조형 데이터는 보이는 모양이 같아도 메모리 저장된 주소를 비교 하기 때문에 똑같은 값이라도 다를 수 있음.
// 메모리 참조 주소만 옴겨 간다는것임.
let a = { k: 1 };
let b = { k: 1 };
console.log(a, b, a === b); // 메모리 값이 다르기 때문에 value 가 같다고 해도 false 됨 -> {k: 1}, {k: 1}, false

a.k = 7;
b = a; // 이렇게 할당 연산자를 변경하게 되면 데이터에 혼란이 됨.
console.log(a, b, a === b); // 데이터가 7로 덮어 씌워지고 같은 메모리 값에 저장되어 true -> {k: 7}, {k: 7}, true

a.k = 2;
console.log(a, b, a === b); // 데이터가 2로 덮어 씌워지고 같은 메모리 값에 저장되어 true -> {k: 2}, {k: 2}, true

let c = b;
console.log(a, b, c, a === c); // 변수 c 추가 데이터가 9로 다 덮어 씌워짐. -> {k: 2}, {k: 2}, {k: 2}, true

a.k = 9;
console.log(a, b, c, a === c); // 데이터가 9로 덮어 씌워지고 같은 메모리 값에 저장되어 true -> {k: 9}, {k: 9}, {k: 9}, true

// 참조형 데이터 처럼 데이터를 변경 할경우, 복사 (얕은복사, 깊은 복사)를 통해서 진행해야함.

7. 얕은 복사, 깊은 복사 (shallow copy, Deep copy)

  • 얕은 복사란 객체를 복사할 때 위의 예제처럼 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말한다. 객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은 복사라고 합니다.
// Object.assign은 첫번째 요소로 들어온 객체에 다음인자로 들어온 객체를 복사해준다.
const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = Object.assign({}, obj);

copiedObj.b.c = 3;

obj === copiedObj; // false
obj.b.c === copiedObj.b.c; // true

// 전개 연산자를 이용한 shallow copy
const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = { ...obj };

copiedObj.b.c = 3;

obj === copiedObj; // false
obj.b.c === copiedObj.b.c; // true
  • 깊은 복사 : 깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말합니다.
    • js 재귀함수를 이용한 복사를 사용하여야 하는데 코드 양도 많고 복잡하기 때문에 lodash library를 주로 사용합니다.
// 재귀함수를 이용한 깊은 복사 방법
const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

function copyObj(obj) {
  const result = {};

  for (let key in obj) {
    if (typeof obj[key] === "object") {
      result[key] = copyObj(obj[key]);
    } else {
      result[key] = obj[key];
    }
  }

  return result;
}

const copiedObj = copyObj(obj);

copiedObj.b.c = 3;

obj.b.c === copiedObj.b.c; //false

// lodash 라이브러를 사용하여 쉽게 깊은 복사를 구현할 수 있습니다.
const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = _.cloneDeep(obj);

copiedObj.b.c = 3;

obj.b.c === copiedObj.b.c; //false

Reference

Leave a comment

You may also enjoy