[TIL] JavaScript Koans

Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미

 

코드스테이츠 JavaScript Koans 파트에서 새로 배운 개념들을 정리해 보았다.

 

Types

tricky parts of JavaScript

console.log(1 + "1") // "11"
console.log(123 - "1") // 122
console.log(1 + true) // 2
console.log("1" + true) // "1true"

자바스크립트에는 다소 이해하기 힘든 부분들이 존재한다. 자바스크립트의 별난 부분들을 따로 모아둔 저장소도 있다.

https://github.com/denysdovhan/wtfjs

 

함수의 전달인자

let num = 10;
function addTen(num){
	num = num + 10;
	return num;
}

addTen();
console.log(num); // 10

원시 자료형 또는 원시 자료형의 데이터를 함수의 전달 인자로 전달할 경우, 값 자체의 복사가 일어난다

사실 함수의 전달 인자도 변수에 자료(data)를 할당하는 것

이름이 같아도 함수 안의 매개변수(num)와 밖의 변수(num)는 완전히 별개다.

함수를 호출하면서 넘긴 전달 인자가 호출된 함수의 지역변수로 (매 호출 시마다) 새롭게 선언된다.

 

 

Scope

함수 선언식(declaration)과 함수 표현식(expression)의 차이

선언식은 호이스팅 됨 / 표현식은 호이스팅 안됨

 

lexical scope(어휘적 범위 지정)

const x = 10;

function bar() {
	console.log(x);
}

function foo() {
	const x = 1;
	bar();
}

bar() // 10
foo() // 10

렉시컬 스코프로 인해서 함수가 호출될 때가 아니라 생성된 위치에서 주위 환경을 가져온다.

foo함수 안에서 bar 함수가 선언되었지만 x를 참조할 때는 foo안에서 찾는 것이 아니라 생성된 위치 바로 밖인 전역에서 찾는다.

 

 

Array

• slice 시작 위치보다 끝 위치가 앞에 있으면 빈 배열 [] 반환
• 끝 위치 값이 아무리 높아도 배열의 끝 값까지만 출력

 

 

object

This

this는 메서드가 담겨있는 오브젝트 자체를 의미함 → 호출 시점에 최신화해서 가져옴

method는 '어떤 객체의 속성으로 정의된 함수'를 말한다.

전역 변수에 선언한 함수도 웹페이지에서 window 객체의 속성으로 정의된 함수라고 할 수 있다.

따라서 호출될 때마다 '어떠한 객체'에 속하는지를 묻는 것이 this다.

 

Object.assign

참조자료형 안에 다른 참조자료형 Object.assign으로 복사를 하면 안쪽 참조자료형은 주소 값만 복사가 된다.

Object.assign === spreadsyntax const merged = { ...fullPre, ...me };

참조자료형 안에 다른 참조자료형이 있을 경우 힙 안에서 1차원에 있는 자료가 2차원 자료의 주소 값을 참조한다. 그렇기 때문에 Object.assign으로 복사를 해도 1차원만 완전한 복사가 되고, 2차원은 참조된 주소 값만 복사하는 얕은 복사가 이루어진다.

 

 

destructuring_구조 분해 할당

객체의 단축 문법

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

const person = {
  name,
  age,
  level: 'Junior',
}

console.log(person)
/*
{
  name: "김코딩",
  age: 28,
  level: "Junior",
}
*/

 

 

객체 분해

const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

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

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

 

rest/spread 문법으로 객체 분해 할당

const user = {
  name: '김코딩',
  company: {
    name: 'Code States',
    department: 'Development',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 35
}

const changedUser = {
  ...user,
  name: '박해커',
  age: 20
}

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

const changedDepartment = {
  ...user,
  company: {
    ...user.company,
    department: 'Marketing'
  }
}

console.log(changedDepartment) /*

{
  name: "김코딩",
  company: {
    name: "Code States",
    department: "Marketing",
    role: {
      name: "Software Engineer",
    },
  },
  age: 35,
} */

동일한 키 값이 있을 경우 뒤에 있는 값이 앞에 있는 값을 덮어쓴다.