๐Ÿ““ ์ฝ”๋”ฉ ๊ณต๋ถ€ ์ผ๊ธฐ์žฅ/{ study: with me. }

[์ฝ์œผ๋ฉฐ ๊ธฐ๋ก] ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive

yyezzzy 2025. 1. 10. 03:49

์ฑ… ๋ชฉ์ฐจ๋Œ€๋กœ ์ฝ์ง€์•Š๊ณ  ์ฝ์œผ๋ฉฐ ์ •๋ฆฌํ•˜๋Š” Deep Dive

 

Day 1 โœช 10์žฅ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด

๊ฐ์ฒด

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„  ํด๋ž˜์Šค์™€ ์ธ์Šคํ„ด์Šค๋ฅผ ํฌํ•จ

์ธ์Šคํ„ด์Šค

ํด๋ž˜์— ์˜ํ•ด ์ƒ์„ฑ๋˜์–ด ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅ๋œ ์‹ค์ฒด

ํ•จ์ˆ˜์™€ ๋ฉ”์„œ๋“œ์˜ ์ฐจ์ด

  • ํ•จ์ˆ˜๋Š” ์ผ๊ธ‰๊ฐ์ฒด๋กœ ๊ฐ’์œผ๋กœ ์ทจ๊ธ‰
  • ๋ฉ”์„œ๋“œ๋Š” ๊ฐ์ฒด์—์„œ ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ํ•จ์ˆ˜ </aside>

 

๐Ÿ“Œ Point

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” โ€œ๋ชจ๋“  ๊ฒƒโ€์ด ๊ฐ์ฒด๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค.

๊ฐ์ฒด์™€ ํ•จ์ˆ˜๋Š” ๋ฐ€์ ‘ํ•œ ๊ด€๊ฒŒ๊ฐ€์žˆ๋‹ค. ํ•จ์ˆ˜๋กœ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑ ๋˜๋Š” ํ•จ์ˆ˜์ž์ฒด๊ฐ€ ๊ฐ์ฒด๊ฐ€ ๋˜๊ธฐ๋„ ํ•œ๋‹ค.

Node.js ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์˜ ์—๋Ÿฌ๋Š” ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” window ๊ฐ์ฒด๊ฐ€ ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ

 

์•Œ๊ฒŒ๋œ ๊ฐœ๋…

1. ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋กœ ๊ฐ€๋Šฅํ•œ ๊ฒƒ๋“ค

// 1. ์‹๋ณ„์ž ๋„ค์ด๋ฐ ๊ทœ์น™์„ ๋”ฐ๋ฅด์ง€ ์•Š๋Š” ํ‚ค๋Š” ๋ฐ˜๋“œ์‹œ ๋”ฐ์˜ดํ‘œ๋ฅผ ์‚ฌ์šฉ
var person = {
	firstName: "Kim",
	last-name: 'Lee' // SyntaxError
};

var person = {
	firstName: "Kim",
	'last-name': 'Lee'
};

// 2. ๋นˆ ๋ฌธ์ž์—ด๋„ ํ”„๋กœํผํ‹ฐ ํ‚ค๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
var foo = {
	'': ''
};

// 3. ์˜ˆ์•ฝ์–ด๋„ ๊ฐ€๋Šฅ
var foo = {
	var: '',
	function: ''
};

// 4. ์ˆซ์ž๋„ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ์•”๋ฌต์ ์œผ๋กœ ๋ฌธ์ž์—ด ๋ณ€ํ™˜
var foo = {
	0: 1,
	1: 2,
	2: 3
};

 

2. ํ”„๋กœํผํ‹ฐ ์ ‘๊ทผ๋ฒ•

// ๋งˆ์นจํ‘œ ํ‘œ๊ธฐ๋ฒ•, ๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•์ด ์žˆ๋‹ค.
// ๋Œ€๊ด„ํ˜ธ๋กœ ์ ‘๊ทผํ•˜๋Š” ํ”„๋กœํผํ‹ฐ ํ‚ค๋Š” ๋ฐ˜๋“œ์‹œ ๋”ฐ์˜ดํ‘œ๋กœ ๊ฐ์‹ผ ๋ฌธ์ž์—ด
var person = {
	name: 'Lee
};

console.log(person.name);
console.log(person['name']);
console.log(person[name]); // ReferenceError: name is not defind

 

3. ํ”„๋กœํผํ‹ฐ ์‚ญ์ œ

// delete ์—ฐ์‚ฐ์ž ์‚ฌ์šฉ
delete person.name;

 

4. ํ”„๋กœํผํ‹ฐ ์ถ•์•ฝ

// ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ๋งŒ๋“œ๋Š” ๊ฒฝ์šฐ ์ด๋ฆ„-ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋™์ผํ•˜๋ฉด key๋ฅผ ์ƒ๋žต ๊ฐ€๋Šฅ
var x = 1, y = 2;
var obj = {
	x: x,
	y: y
};

 

5. ๊ณ„์‚ฐ๋œ ํ”„๋กœํผํ‹ฐ ์ด๋ฆ„

var perfix = 'prop';
var i = 0;
var obj = {};

// ์ด๋ ‡๊ฒŒ ํ‚ค๋ฅผ ๋™์ ์œผ๋กœ ์ƒ์„ฑ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
console.log(obj); // {prop-1: 1, prop-2: 2, prop3: 3}

 


Day 1 โœช ์›์‹œ ๊ฐ’๊ณผ ๊ฐ์ฒด์˜ ๋น„๊ต

์›์‹œ / ๊ฐ์ฒด(์ฐธ์กฐ) ํƒ€์ž…

๊ฐœ๋… ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฐ’ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ๊ฐ’
๋ฉ”๋ชจ๋ฆฌ ์‹ค์ œ ๊ฐ’ ์ €์žฅ ์ฐธ์กฐ๊ฐ’์ด ์ €์žฅ
ํŠน์„ฑ ๋ถˆ๋ณ€์„ฑ ๊ฐ€๋ณ€์„ฑ

 

์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด

๋งˆ์น˜ ๋ฐฐ์—ด์ฒ˜๋Ÿผ ์ธ๋ฑ์Šค๋กœ ํ”„๋กœํผํ‹ฐ ๊ฐ’์— ์ ‘๊ทผ + lengh ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ–๋Š” ๊ฐ์ฒด

 

์–•์€/๊นŠ์€ ๋ณต์‚ฌ

๊ฐ์ฒด์˜ 1๋‹จ๊ณ„ ๊นŒ์ง€๋งŒ ๋ณต์‚ฌ ๊ฐ์ฒด์— ์ค‘์ฒฉ๋œ ๊ฐ์ฒด๊นŒ์ง€ ๋ชจ๋‘ ๋ณต์‚ฌ
๋ณต์‚ฌ๋œ ๊ฐ์ฒด๋Š” ์›๋ณธ ๊ฐ์ฒด์™€ ์ฐธ์กฐ๊ฐ’ ๊ณต์œ  ์›๋ณธ๊ณผ ์™€๋„Œํžˆ ๋…๋ฆฝ๋œ ๋ณต์‚ฌ๋ณธ์„ ์ƒ์„ฑ
Object.assign()์ด๋‚˜ ์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž ...๋ฅผ ์‚ฌ์šฉํ•œ ๋ณต์‚ฌ JSON.parse(JSON.stringify(obj))๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜, structuredClone()

 

๐Ÿ“Œ Point

  • ๊ฐ์ฒด๋งŒ์œผ๋กœ๋„ ์—„์ฒญ๋‚˜๊ฒŒ ๋งŽ์€ ๊ฐœ๋…๋“ค์ด ์กด์žฌ ..
  • Javascript์™€ ํด๋ž˜์Šค๊ธฐ๋ฐ˜ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด๋Š” ๊ฐ์ฒด ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ๋‹ค๋ฅด๊ฒŒ ํ‘œํ˜„๋  ์ˆ˜ ์žˆ๋‹ค
  • Javascript๋Š” ํฌ์ธํ„ฐ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์•„ โ€œ์ฐธ์กฐ์— ์˜ํ•œ ์ „๋‹ฌโ€์˜ ์˜๋ฏธ๊ฐ€ ์ •ํ™•ํ•˜์ง€ ์•Š์•„. ๊ณ ๋กœ, โ€œ๊ฐ’/๊ณต์œ ์— ์˜ํ•œ ์ „๋‹ฌโ€์ด๋ผ๊ณ  ํ‘œํ˜„

 

์•Œ๊ฒŒ๋œ ๊ฐœ๋…

  1. ๋ฌธ์ž์—ด์€ ์›์‹œ ํƒ€์ž…์ด๋‹ค.
  2. Java, C++ ๊ฐ™์€ ํด๋ž˜์Šค ๊ธฐ๋ฐ˜์€ ์‚ฌ์ „์— ์ •์˜๋œ ํด๋ž˜์Šค๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐ์ฒด(์ธ์Šคํ„ด์Šค) ์ƒ์„ฑ
  3. Javascript๋Š” ํด๋ž˜์Šค ์—†์ด ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑ. but, ์„ฑ๋Šฅ ๋ฉด์—์„œ ์ƒ์„ฑ/ํ”„๋กœํผํ‹ฐ ์ ‘๊ทผ์— ๋น„์šฉ์ด ๋น„ํšจ์œจ์ 
  4. ๋™์  ํƒ์ƒ‰? ํžˆ๋“  ํด๋ž˜์Šค?
  5. V8 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„ - ๊ฐ์ฒด๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌ
  6. ๊ฐ์ฒด๋Š” ์›์‹œํƒ€์ž…์ด์ง€๋งŒ ํ”„๋กœํผํ‹ฐ๋Š” ์ฐธ์กฐํƒ€์ž…
  7. == ํƒ€์ž… ๋ณ€ํ™˜์„ ํ—ˆ์šฉ, === ์—„๊ฒฉํ•œ ๋™๋“ฑ ์—ฐ์‚ฐ์ž
var person1 = {
	name: 'Lee'
};

var person2 = {
	name: 'Lee'
};

console.log(person1 === person2) // false
console.log(person1.name === person2.name) // true