[JS] koans 복습[(암묵,명시)타입변환, 호이스팅, 화살표함수, …etc]

😁 뭔가 장황하게 나열한거 같은데,, 나름 헷갈렸던 것 위주로 정리를 해보았다!

생각보다 알고 있는 것이라고 생각한 것들이 오히려 들어가서 문제를 풀어보니
나는 제대로 알고 있던 것이 아니었고, 안다고 착각하고 대충 쓰고 있었다ㅋㅋㅋ
정신 차리고~~ 차근히 다시 하면 되니까 드ㅡㅡ가자!!

 

암묵적 타입 변환(Implicit coercion) || 타입 강제 변환(Type coercion)

let a = 1
let b = true

console.log(a+b) // 2

typeof(a+b) // 'number'

let a = 1
let b = '1'

console.log(a+b) // 11

typeof(a+b) // 'string'

let a = 12
let b = '1'

// + 제외한 -, *, / 는 넘버로 인식하여 계산 -> 도출
console.log(a-b) // 11

typeof(a-b) // 'number'

// 스트링이면 스트링 반환
let a = '12'
let b = true

console.log(a+b) // 12true

typeof(a+b) // 'string'

---

let a = true
let b = '12'

console.log(a+b) // true12

typeof(a+b) // 'string'

---
// 숫자면 숫자 반환
let a = 12
let b = true

console.log(a+b) // 13

typeof(a+b) // 'number'

최대한 같은 타입끼리 연산을 하고, 즉 엄격한 동치 연산('===')을 사용하고, 조건문에 비교 연산을 명시하는 것이 훨씬 좋다.

// 논리합(||) 연산자
// 논리 연산의 결과를 결정한 첫번째 피연산자의 평가 결과 즉, 문자열 ‘Cat’를 그대로 반환한다.
'Cat' || 'Dog'  // 'Cat'

false || 'Dog'  // 'Dog'
'Cat' || false  // 'Cat'

// 논리곱(&&) 연산자
// 논리곱 연산자 &&는 논리 연산의 결과를 결정한 두번째 피연산자의 평가 결과 즉, 문자열 ‘Dog’를 그대로 반환한다.
'Cat' && 'Dog'  // Dog

false && 'Dog'  // false
'Cat' && false  // false

명시적 타입 변환

• 스트링 변환

// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 => 문자열 타입
console.log(String(1));        // "1"
console.log(String(NaN));      // "NaN"
console.log(String(Infinity)); // "Infinity"
// 불리언 타입 => 문자열 타입
console.log(String(true));     // "true"
console.log(String(false));    // "false"

// 2. Object.prototype.toString 메소드를 사용하는 방법
// 숫자 타입 => 문자열 타입
console.log((1).toString());        // "1"
console.log((NaN).toString());      // "NaN"
console.log((Infinity).toString()); // "Infinity"
// 불리언 타입 => 문자열 타입
console.log((true).toString());     // "true"
console.log((false).toString());    // "false"

• 숫자형 변환

// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 숫자 타입
console.log(Number('0'));     // 0
console.log(Number('-1'));    // -1
console.log(Number('10.53')); // 10.53
// 불리언 타입 => 숫자 타입
console.log(Number(true));    // 1
console.log(Number(false));   // 0

// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
// 문자열 타입 => 숫자 타입
console.log(parseInt('0'));       // 0
console.log(parseInt('-1'));      // -1
console.log(parseFloat('10.53')); // 10.53

• 불리언타입 변환

// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
console.log(Boolean('x'));       // true
console.log(Boolean(''));        // false
console.log(Boolean('false'));   // true
// 숫자 타입 => 불리언 타입
console.log(Boolean(0));         // false
console.log(Boolean(1));         // true
console.log(Boolean(NaN));       // false
console.log(Boolean(Infinity));  // true
// null 타입 => 불리언 타입
console.log(Boolean(null));      // false
// undefined 타입 => 불리언 타 입
console.log(Boolean(undefined)); // false
// 객체 타입 => 불리언 타입
console.log(Boolean({}));        // true
console.log(Boolean([]));        // true

---

호이스팅이란

호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

• 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효
• 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다.

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

// 실행 전
logMessage();
sumNumbers();

function logMessage() {
  return 'worked';
}

var sumNumbers = function () {
  return 10 + 20;
};

// 실행 시
function logMessage() {
  return 'worked';
}

var sumNumbers;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};

TIP 호이스팅 사용 시 주의

• 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다. 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다. let/const를 사용한다.
• var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있다. 그럼 왜 var와 호이스팅을 이해해야 할까? ES6를 어디에서든 쓸 수 있으려면 아직 시간이 더 필요하므로 ES5로 트랜스컴파일을 해야한다. 따라서 아직은 var가 어떻게 동작하는지 이해하고 있어야 한다.

 ✅ (호이스팅 포스트 참고!) https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

 

---

📌 깊은복사라는건 주소값을 가져오는게 아니라 그 값 자체만 가져오는것이다.

arr1 = [1,2,3,4]; let arr3 = [...arr1]; 으로 복사하면?

arr3을 건드려도 arr1에 영향을 받지 않는다 → 왜냐하면 arr1과 arr3의 주소가 다르기 때문이다.

 

주소값을 끊어서 요소만 복사하는걸 깊은복사

주소값을 가져오는것을 얕은복사

Object.assign()

전개연산자 ...???

객체의 한단계까지의 깊은복사만 가능하고,

그 이상의 depth부터는 여전히 얕은복사가 일어난다,,

---

화살표 함수 , let func = ( ) ⇒ { }

// 함수 표현식
function () {
    const add = function (x, y) {
        return x + y
}

// 화살표 함수
const add = (x, y) => {
    return x + y
}

console.log(add(1,2)) // 3

// 리턴을 생략 가능
const subtract = (x, y) => x - y

// 필요에 따라 소괄호를 붙일 수도 있다.
const multiply = (x, y) => (x * y)

// 파라미터가 하나일 경우 소괄호 생략이 가능!
const divideBy10 = x => x / 10

// '화살표 함수를 이용해 클로저를 표현
// 1
const adder = x => {
  return y => {
    return x + y
  }
}

// 2
const subtractor = x => y => {
  return x - y
}

---

원시자료형, 참조자료형

let num = 123;
    const msg = "hello";
    let arr = [1, 2, 3];
    const isOdd = true;

  원시 자료형의 데이터가 저장되는 공간 (stack)
     1 | num |   123
     2 | msg | "hello"
     3 | arr | heap의 12번부터 3개  // (실제 데이터가 저장되어 있는 주소)
     4 |isOdd|   true
  =====================================
  Object 자료형의 데이터가 저장되는 공간 (heap)
     10 ||   
     11 || 
     12 || 1
     13 || 2  
     14 || 3  
  실제 자바스크립트는 변수를 위와 같이 저장

---
  
원시 자료형이 할당되는 경우는 값 자체가 할당되고, 
참조 자료형은 주소가 할당된다고 암기하셔도 좋습니다.
  
const hello = "world"; // "world" 그 자체 
const arr = [1, 2, 3]; // [1, 2, 3] 의 메모리 주소 xxxxxx

---

렉시컬 스코프 (Lexical scope)

• 변수와 함수를 프로퍼티로 저장하는 객체
• 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말한다.
• 즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다.
• 다른 말로, 정적 스코프라 부르기도 하다.

https://developer-alle.tistory.com/407 // 조금 더 자세한 설명ㄱㄱ

클로저 (closure)

• 클로저는 함수와 그 함수가 선언되었을 때의 렉시컬 환경(Lexical environment)과의 조합이라고 부르며, 내부 함수가 외부(enclosing) 함수 변수에 액세스(접근) 할 수 있는 자바스크립트의 기능을 말한다.
• 외부 함수 밖에서 내부 함수가 호출되더라도 외부 함수의 지역 변수에 접근할 수 있다. 그 이유는 자신이 생성될 때의 환경(Lexical environment)을 기억하고 있기 때문이다. 그렇기에 이러한 함수를 클로저(Closure)라고 부른다.

this

• 자바스크립트에서는 선언할 때 값이 결정되는 것이 있는데 그것을 클로저라고 하고, 반면 호출하는 방법에 의해서 값이 결정되는 것이 바로 this이다.
• this가 바로 호출할 때 결정되는 것이고, 호출한 객체가 바로 this이다.

👩🏻‍🎓 slice() 에서 초과한 인덱스면 빈배열을 출력한다. slice(0);를 하면 복사가 된다. ⇒ 완전 새로운 주소의 배열이 나온다.

 

📌 const{name} = student 는 const name = student.name 이건 키값 가져오는 문법이다

 

❓ 객체는 길이를 구하려면?

⇒ 객체의 키의 길이를 구해야함!

⇒ Object.keys(obj)

⇒ 키값을 배열로 출력

 

⇒ Object.values(obj)

⇒ 벨류값 배열로 출력 위 두가지 방법의 .length를 붙여서 출력하면 길이가 나온다

 

Array.from()  메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array객체를 만듭니다.

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

---

Destructing(구조분해할당)

구조분해할당이란 배열이나 객체를 해체하여 그 값을 개별변수에 담을 수 있게하는 표현식이다.

배열

배열을 분해

const array = ['apple', 'banana', 'orange', 'grapefruit']

const [first, second] = array
console.log(first) // 'apple'
console.log(second) // 'banana'

const result = []
function foo([first, second]) {
  result.push(second)
  result.push(first)
}

foo(array)
console.log(result) //['banana','apple']

위와 같은 표현식을 쓰면 배열 안에 있는 값들을 변수에 재할당이 가능하고, 이 재할당은 함수의 인자로 받을 때도 사용이 가능하다.

rest/spread 문법을 배열 분해에 적용

const array = ['apple', 'banana', 'orange', 'grapefruit']
const [start, ...rest] = array
console.log(start) //'apple'
console.log(rest) //['banana', 'orange', 'grapefruit']

위와 같은 표현식으로도 사용이 가능하다.단, 아래 같은 표현식은 사용이 불가능 합니다.

// const [first, ...middle, last] = array

rest문법 뒤에는 쉼표가 올 수 없다.

객체

객체의 단축(shorthand) 문법

const name = '김코딩'
const age = 28

const person = {
  name,
  age,
  level: 'Junior',
}
console.log(person) // {name: '김코딩', age: 28, level: 'Junior'}

위와 같이 변수를 먼저 선언해준 뒤, 선언한 변수를 객체안에 넣을 수 있다.

객체 분해

const student = { name: '김코딩', major: '컴퓨터공학' }

const { name } = student
// const { name } = student.name
console.log(name) //'박해커'

배열과 마찬가지로 객체안에 있는 키를 변수로 키값을 값으로 가지고 올 수 있다.

rest/spread 문법을 객체 분해에 적용

변수명이 키값일 경우 다음과 같이 사용하면 된다.

let itemId = 3
let cartItems = [
    {
      itemId: 1,
      quantity: 1
    },
    {
      itemId: 5,
      quantity: 7
    },
    {
      itemId: 2,
      quantity: 3
    }
  ]
[...cartItems, {itemId, quantity: 1}]
// {itemId: itemId , quantity: 1} 이렇게 작성하지 않아도 된다.

 // rest/spread 문법을 객체 분해에 적용(1)
const student1 = { name: '최초보', major: '물리학과' }
const { name, ...args } = student

console.log(name) //'최초보'
console.log(args) //{major:'물리학과'}

// rest/spread 문법을 객체 분해에 적용(2)
const student2 = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

function getSummary({ name, lesson: course, grade }) {
  return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`}

console.log(getSummary(student)) //'최초보님은 B+의 성적으로 양자역학을 수강했습니다'

배열과 마찬가지로 다음과 같이 표현도 가능하다.또는 값을 분해해서 할당 할때 lesson: course같이 선언해 주면 변수명이 lesson이 아닌 course로 변경되어 값이 할당 된다.

이 외에도 변수명 뿐만 아니라 할당된 값을 변경하는데 사용도 가능하다.

// rest/spread 문법을 객체 분해에 적용(3)
const user = {
  name: '김코딩',
  company: {
    name: 'Code States',
    department: 'Development',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 35
}

const changedUser = { //전개구문으로 원본을 가져와 이름을 '박해커'로 나이를 '20'으로 변경
  ...user,
  name: '박해커', // : 뒤는 그 값을 변경한다는 의미
  age: 20
}

const overwriteChanges = {
  name: '박해커',
  age: 20,
  ...user //변수 선언 이후 원본이 불러와지기 때문에 원본과 같아진다.
}

const changedDepartment = {
  ...user, // 전개구문을 통해서 원본 ㄱㄱ
  company: { // 원본 안에 있는 company객체의 값을 변경
    ...user.company, // 원본에 있는 company객체의 값들을 불러옴
    department: 'Marketing' // 값을 변경
  }
}

console.log(changedUser) /*{
  name: '박해커',
  company: {
    name: 'Code States',
    department: 'Development',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 20
} */

console.log(overwriteChanges) /*{
  name: '김코딩',
  company: {
    name: 'Code States',
    department: 'Development',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 35
}*/

console.log(changedDepartment) /*{
  name: '김코딩',
  company: {
    name: 'Code States',
    department: 'Marketing',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 35
}*/

 

---

 

use strict

"use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞 에 올 수도 있다.

이렇게 하면 오직 해당 함수만 엄격 모드로 실행된다.

엄격 모드는 대개 스크립트 전체에 적용한다.

"use strict"는 반드시 최상단에 위치!!!!!!

다음 코드에서는 엄격 모드가 활성화X

alert("some code");
// 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다.

"use strict";

// 엄격 모드가 활성화되지 않습니다.

"use strict"의 위에는 주석만 사용할 수 있다 → 다른거 있으면 활성화 X

 

---

Object.assign()  메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다.

그 후 대상 객체를 반환합니다.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// expected output: true