3주차_김다연_회고록 - hyeone999/Docs-JS_deepDive_Study GitHub Wiki
- 자바스크립트를 구성하는 거의 모든 것은 객체이다.
- 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다.
구분 | 설명 |
---|---|
원시 타입 | 단 하나의 값만 나타냄 변경 불가능한 값(immutable) |
객체 타입 | 다양한 값을 하나의 단위로 구성한 복합 구조 변경 가능한 값(mutable) |
- 객체(Object): 0개 이상의 프로퍼티로 구성된 집합
- 프로퍼티(Property): **키(key)**와 **값(value)**의 쌍으로 구성
- 메서드(Method): 프로퍼티의 값이 함수일 경우, 이를 특별히 메서드라 부름
const stroller = {
brand: 'SmartSafe',
stop: function() {
console.log('Stroller stopped.');
}
};
- 객체 리터럴 { }
- Object 생성자 함수
- 사용자 정의 생성자 함수
- Object.create() 메서드
- 클래스(class) 문법
const obj = {
key1: 'value1',
key2: 123,
key3: true
};
-
중괄호 {}로 감싸고, 내부에 프로퍼티를 나열
-
key: value 형식 사용
-
마지막 프로퍼티 뒤에는 쉼표를 생략하는 것이 일반적
-
빈 문자열 포함 모든 문자열 또는 심벌(Symbol) 사용 가능
-
식별자 네이밍 규칙을 따르지 않아도 OK → 단, 반드시 따옴표로 감싸야 함(따옴표 사용)
const obj = {
"123": "valid",
"has space": true
};
- 키 + 값 → 프로퍼티
- 프로퍼티의 집합 → 객체
- 프로퍼티 나열시 쉼표( , )로 구분 , 일반적으로 마지막 프로퍼티 뒤에는 쉼표 사용 X
- 프로퍼티 키로 사용할 수 있는 값: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
- 프로퍼티 값으로 사용할 수 있는 값: 자바스크립트에서 사용할 수 있는 모든 값임
- 자바스크립트에서 사용할 수 있는 모든 값 가능 (숫자, 문자열, 객체, 배열, 함수 등)
-
객체에 묶여 있는 함수
-
프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부름
const stroller = {
move: function(speed) {
console.log(`Moving at ${speed}km/h`);
}
};
방법 | 문법 | 설명 |
---|---|---|
마침표 표기법 | obj.key |
일반적인 사용 방식 < 마침표 프로퍼티 접근 연산자( . ) 사용 > |
대괄호 표기법 | obj["key"] |
공백/숫자/변수 등 유연한 키 접근 가능 < 대괄호 프로퍼티 접근 연산자([ … ]) 사용 > |
const key = 'brand';
console.log(stroller["brand"]); // "SmartSafe"
console.log(stroller[key]); // "SmartSafe"
| 🔹 대괄호 표기법의 키는 반드시 문자열 또는 변수여야 함
obj.key1 = 'newValue';
➡️ 이미 존재하는 프로퍼티에 값을 할당 → 프로퍼티 값 갱신
obj.newKey = 'added';
➡️ 존재하지 않는 프로퍼티에 값을 할당하면, 자동으로 새 프로퍼티가 추가됨
delete obj.key1;
➡️ delete 연산자는 객체에서 특정 프로퍼티를 제거
- delete 연산자 : 객체의 프로퍼티 삭제됨
- delete 연산자의 피연산자: 프로퍼티 값에 접근할 수 있는 표현식이여야 함
항목 | 설명 |
---|---|
객체 | 키-값 쌍의 집합. 함수도 값이 될 수 있음 |
프로퍼티 | 키와 값으로 구성된 객체의 구성 요소 |
메서드 | 프로퍼티 값이 함수인 경우 |
객체 리터럴 | 가장 간단한 객체 생성 방식 |
접근 방법 | 마침표(. ), 대괄호([ ] ) 방식 |
동적 조작 | 프로퍼티 추가, 수정, 삭제 모두 가능 |
원시 타입과 객체 타입의 차이, 그리고 값이 변수에 어떻게 전달되는가를 정확히 이해해하는 것이 중요
자바스크립트에서 **원시값(Primitive)**과 **객체(Object)**는 저장 방식, 복사 방식, 변경 가능 여부 등에서 본질적으로 다릅니다. 이 부분에서는 이 두 가지 타입을 명확히 비교하고, 메모리와 전달 방식에서 어떤 차이가 발생하는지를 정리하였습니다.
구분 | 원시 타입 | 객체(참조) 타입 |
---|---|---|
값의 특징 | 변경 불가능한 값 (immutable) | 변경 가능한 값 (mutable) |
메모리 저장 방식 | 변수에 실제 값이 직접 저장 | 변수에는 객체의 참조값(메모리 주소) 저장 |
재할당 필요 여부 | 값을 바꾸려면 재할당 필요 | 객체 내부 변경은 재할당 없이 가능 |
메모리 공간 | 고정 크기 확보 가능 | 구조가 유동적이라 공간 크기 사전 지정 불가 |
예시 |
string , number , boolean , undefined , null , symbol , bigint
|
객체, 배열, 함수 등 |
- 변경 불가능한 값 (Immutable)
- 자바스크립트의 기본 데이터 타입
string
number
boolean
undefined
null
symbol
bigint
let score = 80;
let copy = score;
copy = 100;
console.log(score); // 80
console.log(copy); // 100
- copy는 score의 값을 복사받은 것
- 두 변수는 서로 다른 메모리 공간에 저장됨 → 완전히 독립적인 | 📌 이를 값에 의한 전달 (pass by value) 이라고 한다.
-
프로퍼티 개수 제한 없음
-
프로퍼티 추가/삭제 가능
-
프로퍼티 값의 타입도 자유로움
➡️ 메모리 공간 크기를 사전에 지정할 수 없다.
-
원시 타입이 아닌 모든 값
-
프로퍼티(key-value) 집합으로 이루어진 동적 구조
-
변경 가능한 값 (mutable)
const person = { name: "Lee" };
const copy = person;
copy.name = "Kim";
console.log(person.name); // "Kim"
console.log(copy.name); // "Kim"
-
copy는 person이 참조하는 같은 객체를 가리킴
-
하나를 바꾸면 서로 영향
const person = { name: "Lee" };
person.age = 30;
delete person.name;
console.log(person); // { age: 30 }
- 참조값을 통해 객체에 접근하여 재할당 없이도 직접 수정 가능
const text = "hello";
console.log(text[1]); // "e"
text[0] = "H";
console.log(text); // "hello" (변경되지 않음)
구분 | 설명 |
---|---|
값에 의한 전달 | 원시값의 실제 값이 복사되어 전달 |
참조에 의한 전달 X | 자바스크립트는 참조 자체도 값으로 전달됨 (주소 복사) |
실제로는 | 모든 전달은 값에 의한 전달이며, 객체의 경우 그 값이 참조일 뿐 |
항목 | 설명 |
---|---|
원시 타입 값 | 변경 불가능한 값. 새로운 값을 할당하면 새 메모리 공간에 저장됨 |
객체 타입 값 | 변경 가능한 값. 변수에는 참조값(주소) 저장 |
값에 의한 전달 | 원시값 전달 방식. 복사된 값이 전달됨 |
참조에 의한 전달 | 객체 전달 방식처럼 보임. 실제로는 참조값이 복사되어 전달됨 |
주요 차이점 | 원시값은 복사 독립, 객체는 공유 참조로 서로 영향 |
-
원시값은 안전하고 독립적인 값
-
객체는 효율적이지만 공유로 인해 의도치 않은 변경 가능성 있음
-
객체를 복사할 때는 얕은 복사 / 깊은 복사 구분 필요
-
객체를 복사하고 싶다면 얕은/깊은 복사(Shallow/Deep Copy)를 명확히 이해하고 사용해야 합니다.
-
Object.assign() 또는 전개 연산자({ ...obj })를 이용한 복사는 얕은 복사만 됩니다.
일련의 작업을 수행하도록 정의된 코드 블록
- 입력(인수)을 받아 처리하고, 출력(반환값)을 반환
- 하나의 독립된 실행 단위로 사용
용어 | 의미 |
---|---|
함수 | 실행 가능한 코드 블록 |
매개변수 | 함수 내부에서 입력 값을 전달받는 변수 [내부로 입력을 전달 받는 함수] |
인수 | 함수를 호출할 때 전달하는 실제 값 [입력] |
반환값 | 함수 실행 후 외부로 전달하는 출력 값 [출력] |
-
중복 제거 (코드 재사용)
-
유지보수가 용이함
-
가독성 향상
-
모듈화 및 추상화
구성 요소 | 요약 설명 |
---|---|
함수 이름 | - 식별자 사용 (네이밍 규칙 준수) - 함수 몸체 내에서만 참조 가능 - 이름 생략 가능 (무명 함수) |
매개변수 목록 | - 0개 이상, 쉼표로 구분 - 호출 시 인수 순서 중요 - 변수와 동일한 네이밍 규칙 준수 |
함수 몸체 | - 실행 코드 블록 - 함수 호출 시 실행됨 |
- 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성 → 거기에 객체 할당
- 함수 객체를 가리키는 식별자로 호출
function add(a, b) {
return a + b;
}
- 호이스팅 O: 선언 전에 호출 가능
const add = function(a, b) {
return a + b;
};
- 호이스팅 X
- 값처럼 변수에 할당됨
- 함수를 호출할 때 함수 이름이 아닌 함수 객체를 가리키는 식별자 사용
const add = (a, b) => a + b;
- 항상 익명 함수
- this, arguments 바인딩 없음 (내부 간결화에 적합)
방식 | 예시 | 특징 |
---|---|---|
함수 선언문 | function foo() {} |
선언 이전에도 호출 가능 |
함수 표현식 | const foo = function() {} |
변수 호이스팅만 가능 |
화살표 함수 | const foo = () => {} |
간결, this 미바인딩 |
Function 생성자 | new Function('a', 'b', 'return a + b') |
거의 사용하지 않음 |
greet('Kim'); // → 인수 "Kim"이 매개변수 name에 전달됨
- 매개변수는 함수 정의 시 선언
- 인수는 함수 호출 시 전달
function getAge() {
return 30;
}
- return 키워드로 결과를 반환 -> 함수 몸체 내부에서만 사용 가능
- return이 없으면 기본적으로 undefined 반환
- 함수의 실행을 중단하고 함수 몸체 빠져나감
- return 키워드 뒤에 오는 표현식 평가해 반환
(function () {
console.log("즉시 실행");
})();
-
정의와 동시에 실행
-
전역 오염 방지, 단 1회 실행
function countDown(n) {
if (n <= 0) return;
console.log(n);
countDown(n - 1);
}
-
자기 자신을 호출
-
재귀 호출: 자기 자신을 호출하는 것
-
재귀 함수: 재귀 호출을 수행하는 함수 (반복 처리를 위해 사용)
function outer() {
function inner() {
console.log("내부 함수");
}
inner();
}
-
외부 함수 내부에서만 호출 가능
-
클로저 형성 가능
-
중첩 함수(= 내부 함수): 함수 내부에 정의된 함수
-
외부 함수: 중첩 함수를 포함하는 함수
function repeat(n, callback) {
for (let i = 0; i < n; i++) {
callback(i);
}
}
repeat(3, console.log);
- 콜백 함수 : 다른 함수의 인수로 전달되는 함수, 함수의 매개변수를 통해 다른 함수의 내부로 전달됨
- 고차 함수 : 콜백 함수를 매개변수로 받는 함수, 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받음
구분 | 설명 |
---|---|
순수 함수 | 외부 상태에 의존하거나 변경하지 않음 → 예측 가능 <부수 효과 없음> |
비순수 함수 | 외부 상태에 의존하거나 변경함 → 부작용 있음 <부수 효과 있음> |
// 순수 함수
const add = (a, b) => a + b;
// 비순수 함수
let count = 0;
function increase() {
count++;
}
구분 | 호출 가능 시점 | 설명 |
---|---|---|
함수 선언문 | 선언 이전 호출 가능 | 전체 코드 스캔 중 생성됨 |
함수 표현식 | 선언 이후에만 호출 가능 | 실행 중 평가됨 (런타임) |
익명 함수 : 함수 리터럴의 함수 이름을 생략한 것 인수 : 값으로 평가될 수 있는 표현식, 함수 호출시 지정, 개수와 타입 제한이 없음 매개변수: 함수 정의시 선언, 함수 몸체 내부에서 변수와 동일 취급, 몸체 내부에서만 참조 가능
-
이성적인 매개변수 개수는 0개, 적을수록 좋으며, 이상적인 함수는 한 가지 일만 해야 하며 가급적 작게 만들어야 한다.
항목 | 설명 |
---|---|
함수 정의 방식 | 선언문, 표현식, 화살표 함수, 생성자 함수 |
함수 호출 방식 | 식별자를 통해 실행 |
반환 처리 |
return 키워드 사용, 생략 시 undefined 반환 |
콜백/고차 함수 | 함수가 다른 함수를 인자로 받거나 반환 |
즉시 실행/재귀 함수 | 일회성 실행 또는 자기 자신 호출 |
순수 함수 | 외부 상태에 의존하지 않는 함수 (권장) |
함수 호이스팅 | 선언문은 호이스팅 O, 표현식은 호이스팅 X |
[ 느낀점 ] 함수 부분과 원시 값과 객체의 비교 부분이 많이 어려운 편이었는데 설명을 들으면서 이해에 도움이 되어서 좋았습니다. 확실히 스터디 하면서 물어볼 사람과 내가 공부한 내용을 바탕으로 작성하고 수업을 듣는 느낌이어서 너무 좋은 것 같아요. 점점 뒤로 갈수록 난이도가 올라가고 있지만 앞으로도 계속 열심히 공부하겠습니당