프도

참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것입니다. 원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사되는 반면에 말이죠. 예시: let message = "Hello!"; let phrase = message; 예시를 실행하면 두 개의 독립된 변수에 각각 문자열 "Hello!"가 저장됩니다. 그런데 객체의 동작방식은 이와 다릅니다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장됩니다. 그림을 통해 변수 user에 객체를 할당할 때 무슨 일이 일어나는지 알아봅시다. let user = { name: "John" }; 객체는 메..

구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말합니다. 분해 후 새 변수에 할당 배열 const [a, b, ...rest] = [10, 20, 30, 40, 50]; // 질문: a, b, rest는 각각 어떤 값인가요? 객체 const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} // 질문: a, b, rest는 각각 어떤 값인가요? 객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있습니다. 선언없이 할당하는 경우, 이 콘텐츠의 하단있는 공식문서 링크를 통해 내용을 확인할 수 있습니다. 유용한 예제: 함수에서 객체 분해 functio..

Spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용합니다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 질문: 어떤 값을 리턴하나요? Rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) // 질문: 어떤 값을 리턴하나요? sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요..

자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형입니다. 배열([])과 객체({}), 함수(function(){})가 대표적입니다. 이런 자료형을 자바스크립트에서는 참조 자료형(reference data type; 참조 타입)이라고도 부릅니다. 그 이유에 대해서 자세히 설명 드리고자 합니다. 이전에 말씀 드렸지만 컴퓨터가 처음 사용되던 시절에는 배열, 즉 리스트라는 개념을 구현하기가 어려웠습니다. 그래서 띄어쓰기, 탭, 쉼표 등으로 데이터를 구분하여 배열과 비슷한 형태로 자료 구조를 구현하기 시작했습니다. 이 흔적은 csv에서도 찾아볼 수 있습니다. 쉼표로 구분된 데이터(comma-separated values)라는 의미죠. 10,20,30,40,50,60 이렇게 하나의 스트링을 split 하던..

자바스크립트에서 원시 타입의 데이터(primitive data types; 원시 자료형)는 객체가 아니면서 method를 가지지 않는 6 가지의 타입 string, number,bigint, boolean, undefined, symbol, (null) 을 말합니다. 이 중에서 자주 사용하는 4 (+1)가지 원시 자료형 string, number, boolean, undefined, (null) 을 살펴보겠습니다. 이 데이터를 유심히 볼까요? 모두 어떤 종류의 데이터인가요? 왜 원시 자료형이라고 부르나요? 'string', 42, true, false, undefined // 데이터가 "하나"의 정보를 담고 있습니다. 원시 자료형은 모두 "하나"의 정보, 즉, 데이터를 담고 있습니다. 옛날에 어떻게 코드..