📚 ES6 📌 Shorthand property names const name = 'haesa'; const age = '22'; // 💩 const haesa1 = { name: name, age: age, }; // ✨ const haesa2 = { name, age, }; 오브젝트를 만들 때 key와 value의 이름이 같다면 하나로 축약해서 작성할 수 있다. 더보기 🔗 MDN 링크 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer 📌 Destructuring Assignment Object // object const student = { name: 'Anna', level: 1..

📚 데이터 타입 두 가지 원시 타입 (Primitive) 참조 타입 (Reference) number array string object boolean function null RegExp undefined symbol 자바스크립트에선 두 가지의 데이터 타입이 존재한다. 원시 타입은 데이터의 가장 작은 단위로 더 이상 쪼개질 수 없고, 하나의 데이터만을 가진다. 참조 타입은 원시 타입을 모아둔 집합으로 원시 타입을 제외한 나머지는 모두 참조 타입이다. 그렇다면 불변성과 가변성은 무엇일까? 원시 타입은 불변성을 띠고, 참조 타입은 가변성을 띤다. 아래에서 알아보자. 📚 불변성 불변성을 얘기하기 전에 데이터의 저장 방식을 살펴보자. let a = 1; 변수 a를 선언하고 1을 할당했다. 이때 메모리에는 어떤..

📚 Shallow Capy - 얕은 복사 자바스크립트에서는 복사할 때 항상 얕은 복사가 일어난다. 객체를 복사할 때 객체 데이터 자체가 복사되는 것이 아니라 객체의 메모리 주소가 복사되는데 이것을 얕은 복사라 한다. 따라서 어떤 객체를 복사한 후 데이터를 변경하면, 두 개의 변수가 가리키는 객체는 동일하기 때문에 변경사항이 다른 복사본에도 똑같이 반영된다. 이는 함수에서도 마찬가지이다. 함수의 인자로 객체를 넘겨줄 경우, 객체의 메모리 주소를 받아오기 때문에 함수 내에서의 변경사항이 밖에서도 반영된다. 이때 객체가 원래의 의도와는 맞지 않는 데이터로 오염될 수 있기 때문에 함수의 인자로 객체를 전달하는 것은 좋은 방법이 아니다. 아래 코드로 얕은 복사를 직접 확인해보자. const haesa = { na..

class Student { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } fullName() { return `${this.lastName} ${this.firstName}`; } } 위처럼 firstName과 lastName을 생성자로 받고, fullName을 만들어주는 Student 클래스가 있다. Student 인스턴스를 생성하고, fullName을 console에 찍어보자. const student = new Student('길동', '홍'); console.log(student.fullName()); // 홍 길동 그럼 위와 같은 코드를 작성하게 될 것이다. full name은 ..

📚 함수와 메모리 자바스크립트에선 함수는 메모리상에 어떻게 저장되어 있을까? 아래 예제와 함께 살펴보자. function sum(a, b) { return a + b; } 두 개의 값을 받고 더한 후 반환하는 sum 함수가 있다. sum 함수는 메모리 공간 어딘가에 저장되어 있을 것이다. 이때 함수 이름 sum은 이 메모리 공간을 가리키게 된다. 더 정확하게 말하자면 변수 sum은 함수가 저장된 메모리 주소를 가지게 된다. 그렇다면 다음과 같이 함수 이름을 다른 변수에 할당하게 되면 어떻게 될까? function sum(a, b) { return a + b; } const add = sum; 변수 add는 sum에 저장된 메모리 주소를 갖게 될 것이다. 즉 add도 sum 함수를 가리키게 된다. 이제는 ..