Skip to main content

One post tagged with "javascript"

View All Tags

200301

์ธํ„ฐ๋„ท ๊ฐ•์ขŒ๋กœ๋Š” ์ดํ•ด๊ฐ€ ์•ˆ๋˜๋Š” ์ ๋“ค์ด ๋งŽ์•„์„œ '์ธ์‚ฌ์ด๋“œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ' ebook์„ ๊ตฌ์ž…ํ•ด ๊ณต๋ถ€ํ•œ๋‹ค.

์ด ๊ธ€์€ ๊ณ ํ˜„์ค€, ์†กํ˜•์ฃผ ๋‹˜์˜ ์ธ์‚ฌ์ด๋“œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฐธ์กฐํ•˜์—ฌ ์ž‘์„ฑํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

JavaScript ๋ฐ์ดํ„ฐ ํƒ€์ž…๊ณผ ์—ฐ์‚ฐ์ž#

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ’๋“ค์€ ํฌ๊ฒŒ ๊ธฐ๋ณธ ํƒ€์ž…๊ณผ ์ฐธ์กฐ ํƒ€์ž…์œผ๋กœ ๋‚˜๋‰œ๋‹ค.

  • ๊ธฐ๋ณธ ๋ฐ์ดํ„ฐ ํƒ€์ž…

    • ์ˆซ์ž

    • ๋ฌธ์ž์—ด

    • boolean

    • null

    • undefined

  • ์ฐธ์กฐ ๋ฐ์ดํ„ฐ ํƒ€์ž…

    • ๊ฐ์ฒด

      • ๋ฐฐ์—ด

      • ํ•จ์ˆ˜

      • ์ •๊ทœํ‘œํ˜„์‹

๋ฐฐ์—ด, ํ•จ์ˆ˜, ์ •๊ทœํ‘œํ˜„์‹์ด ๋ชจ๋‘ ๊ฐ์ฒด์— ์†ํ•˜๋Š” ๊ฐœ๋….


๊ธฐ๋ณธ ํƒ€์ž…#

๊ธฐ๋ณธ ํƒ€์ž…์˜ ํŠน์ง•์€ ๊ทธ ์ž์ฒด๊ฐ€ ํ•˜๋‚˜์˜ ๊ฐ’์„ ๋‚˜ํƒ€๋‚ธ๋‹ค๋Š” ๊ฒƒ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋Š์Šจํ•œ ํƒ€์ž… ์ฒดํฌ ์–ธ์–ด๋‹ค. C๋‚˜ Java ๋“ฑ์˜ ์—„๊ฒฉํ•œ ํƒ€์ž… ์ฒดํฌ ์–ธ์–ด๋Š” ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ ๋ณ€์ˆ˜์— ์ €์žฅํ•  ๋ฐ์ดํ„ฐ ์ข…๋ฅ˜์— ๋”ฐ๋ผ char, int, float ๋“ฑ์˜ ์˜ˆ์•ฝ์–ด๋ฅผ ์ด์šฉํ•ด์„œ ๋ณ€์ˆ˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ์ง€์ •ํ•œ๋‹ค.

๋ฐ˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ ํƒ€์ž…์„ ๋ฏธ๋ฆฌ ์ •ํ•˜์ง€ ์•Š๊ณ  var (let, const) ๋ผ๋Š” ํ•œ ๊ฐ€์ง€ ํ‚ค์›Œ๋“œ๋กœ๋งŒ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•œ๋‹ค.

var intNum = 10;
var floatNum = 0.1;
var singleQuoteStr = "Single quote string";
var doubleQuoteStr = "Double quote string";
var singleChar = "a";
var boolVar = true;
var emptyVar;
var nullVar = null;
console.log(
typeof intNum, // number
typeof floatNum, // number
typeof singleQuoteStr, // string
typeof doubleQuoteStr, // string
typeof boolVar, // boolean
typeof emptyVar, // undefined
typeof nullVar //object
);

์ˆซ์ž#

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ๋ชจ๋“  ์ˆซ์ž๋ฅผ 64๋น„ํŠธ ๋ถ€๋™ ์†Œ์ˆ˜์  ํ˜•ํƒœ๋กœ ์ €์žฅํ•œ๋‹ค.

intNum๊ณผ floatNum ๋ณ€์ˆ˜ ๋ชจ๋‘ typeof ์—ฐ์‚ฐ์ž์˜ ๊ฒฐ๊ณผ๊ฐ’์ด number ํƒ€์ž…์ด๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ์ •์ˆ˜ํ˜•์ด ๋”ฐ๋กœ ์—†๊ณ  ๋ชจ๋“  ์ˆซ์ž๋ฅผ ์‹ค์ˆ˜๋กœ ์ฒ˜๋ฆฌํ•˜๋ฏ€๋กœ ๋‚˜๋ˆ—์…ˆ ์—ฐ์‚ฐ์„ ํ•  ๋•Œ 5/2 ์˜๊ฒฝ์šฐ 2๊ฐ€ ์•„๋‹ˆ๋ผ 2.5๊ฐ€ ์ถœ๋ ฅ๋œ๋‹ค.

var num = 5 / 2;
console.log(num); // 2.5
console.log(Math.floor(num)); // 2

๋ฌธ์ž์—ด#

๋ฌธ์ž์—ด์€ ์ž‘์€ ๋”ฐ์˜ดํ‘œ๋‚˜ ํฐ ๋”ฐ์˜ดํ‘œ๋กœ ์ƒ์„ฑํ•œ๋‹ค. typeof์˜ ๊ฒฐ๊ณผ๋Š” string์ด๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” C์–ธ์–ด์˜ char ํƒ€์ž…๊ณผ ๊ฐ™์ด ๋ฌธ์ž ํ•˜๋‚˜๋งŒ์„ ๋ณ„๋„๋กœ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฐ์ดํ„ฐ ํƒ€์ž…์€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค.

์ฃผ์˜ํ•ด์•ผํ•  ์ ์€ ํ•œ ๋ฒˆ ์ •์˜๋œ ๋ฌธ์ž์—ด์€ ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. (immutable)


๋ถˆ๋ฆฐ๊ฐ’#

true, false๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ถˆ๋ฆฐ ํƒ€์ž…์ด๋‹ค.


null๊ณผ undefined#

์ด ๋‘ ํƒ€์ž…์€ ๋ชจ๋‘ '๊ฐ’์ด ๋น„์–ด์žˆ์Œ'์„ ๋œปํ•œ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ™˜๊ฒฝ ๋‚ด์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ’์ด ํ• ๋‹น๋˜์ง€ ์•Š์€ ๋ณ€์ˆ˜๋Š” undefined ํƒ€์ž…์ด๋ฉฐ, undefined ํƒ€์ž…์˜ ๋ณ€์ˆ˜๋Š” ๋ณ€์ˆ˜ ์ž์ฒด์˜ ๊ฐ’ ๋˜ํ•œ undefined์ด๋‹ค. ์ด์ฒ˜๋Ÿผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ undefined๋Š” ํƒ€์ž…์ด์ž, ๊ฐ’์„ ๋‚˜ํƒ€๋‚ธ๋‹ค

null ํƒ€์ž… ๋ณ€์ˆ˜์˜ ๊ฒฝ์šฐ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ช…์‹œ์ ์œผ๋กœ ๊ฐ’์ด ๋น„์–ด์žˆ์Œ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฐ ์‚ฌ์šฉํ•œ๋‹ค.

์ฃผ์˜ํ•  ์ ์€ null ํƒ€์ž… ๋ณ€์ˆ˜์˜ typeof ๊ฒฐ๊ณผ๊ฐ€ null์ด ์•„๋‹ˆ๋ผ object๋ผ๋Š” ๊ฒƒ์ด๊ณ  ๋”ฐ๋ผ์„œ null ํƒ€์ž… ๋ณ€์ˆ˜์ธ์ง€ ํ™•์ธํ•  ๋•Œ typeof ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋˜๊ณ , ์ผ์น˜ ์—ฐ์‚ฐ์ž(===)๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ง์ ‘ ํ™•์ธํ•ด์•ผ ํ•œ๋‹ค.

var nullVar = null;
console.log(typeof nullVar === null);
console.log(nullVar === null);

์ฐธ์กฐ ํƒ€์ž…(๊ฐ์ฒด ํƒ€์ž…)#

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ˆซ์ž, ๋ฌธ์ž์—ด, boolean, null, undefined ๊ฐ™์€ ๊ธฐ๋ณธ ํƒ€์ž…์„ ์ œ์™ธํ•œ ๋ชจ๋“  ๊ฐ’์€ ๊ฐ์ฒด๋‹ค.

๋”ฐ๋ผ์„œ ๋ฐฐ์—ด, ํ•จ์ˆ˜, ์ •๊ทœํ‘œํ˜„์‹ ๋“ฑ๋„ ๋ชจ๋‘ ๊ฒฐ๊ตญ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋กœ ํ‘œํ˜„๋œ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ์ฒด๋Š” ๋‹จ์ˆœํžˆ '์ด๋ฆ„(key):๊ฐ’(value)' ํ˜•ํƒœ์˜ ํ”„๋กœํผํ‹ฐ๋“ค์„ ์ €์žฅํ•˜๋Š” ์ปจํ…Œ์ด๋„ˆ๋กœ์„œ, ์ปดํ“จํ„ฐ ๊ณผํ•™ ๋ถ„์•ผ์—์„œ ํ•ด์‹œ(hash)๋ผ๋Š” ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์ƒ๋‹นํžˆ ์œ ์‚ฌํ•˜๋‹ค.

๊ฐ์ฒด๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ธฐ๋ณธ ํƒ€์ž…์˜ ๊ฐ’์„ ํฌํ•จํ•˜๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ฌ ์ˆ˜๋„ ์žˆ๋‹ค. ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋Š” ํ•จ์ˆ˜๋กœ ํฌํ•จํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ์ด๋Ÿฌํ•œ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ฉ”์†Œ๋“œ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.


๊ฐ์ฒด ์ƒ์„ฑ#

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ํฌ๊ฒŒ ์„ธ ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

  • Object() ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ์ด์šฉ
var foo = new Object();
foo.name = "foo";
foo.age = 30;
foo.gender = "male";
console.log(typeof foo); // object
console.log(foo); // { name: 'foo', age: 30, gender: 'male' }
  • ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ๋ฐฉ์‹ ์ด์šฉ
var foo = {
name: "foo",
age: 30,
gender: "male",
};
console.log(typeof foo); // object
console.log(foo); // { name: 'foo', age: 30, gender: 'male' }

์ค‘๊ด„ํ˜ธ๋ฅผ ์ด์šฉํ•ด์„œ ์ƒ์„ฑ, {} ์•ˆ์— ์•„๋ฌด๊ฒƒ๋„ ์ ์ง€ ์•Š์€ ๊ฒฝ์šฐ ๋นˆ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค.

  • ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ์ด์šฉ

์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒƒ์€ ๋‹ค์Œ์— ๋‹ค๋ฃฌ๋‹ค.


๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ ์ฝ๊ธฐ/์“ฐ๊ธฐ/๊ฐฑ์‹ #

๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•˜๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•

  • ๋Œ€๊ด„ํ˜ธ ( [] ) ํ‘œ๊ธฐ๋ฒ•

  • ๋งˆ์นจํ‘œ ( . ) ํ‘œ๊ธฐ๋ฒ•

var foo = {
name: "foo",
major: "computer science",
};
// ๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ ์ฝ๊ธฐ
console.log(foo.name); // foo
console.log(foo["name"]); // foo
console.log(foo.nickname); // undefined
// ๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ ๊ฐฑ์‹ 
foo.major = "electronics engineering";
console.log(foo.major); // electronics engineering
foo["major"] = "digital media";
console.log(foo["major"]); // digital media
// ๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ ๋™์  ์ƒ์„ฑ
foo.age = 30;
console.log(foo.age); // 30
foo["gender"] = "male";
console.log(foo["gender"]); // male

๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•์˜ ๊ฒฝ์šฐ ์ ‘๊ทผํ•˜๋ ค๋Š” ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ฌธ์ž์—ด ํ˜•ํƒœ๋กœ ๋งŒ๋“  ๋‹ค์Œ ๋Œ€๊ด„ํ˜ธ๋กœ ๋‘˜๋Ÿฌ์‹ธ์•ผ ๋œ๋‹ค.

๋งŒ์•ฝ ๋ฌธ์ž์—ด ํ˜•ํƒœ๋กœ ๋งŒ๋“ค์ง€ ์•Š๊ณ  foo[name] ๋กœ ์ ‘๊ทผํ•œ๋‹ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” name ์ด๋ผ๋Š” ๋ณ€์ˆ˜ ๋˜๋Š” ๊ฐ์ฒด๋ฅผ ์ฐพ์•„ toString() ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋ฌธ์ž์—ด๋กœ ๋ฐ”๊พธ๋ ค๋Š” ์‹œ๋„๋ฅผ ํ•œ๋‹ค.


๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ• ๋งŒ์„ ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ ์ ‘๊ทผํ•˜๋ ค๋Š” ํ”„๋กœํผํ‹ฐ๊ฐ€ ํ‘œํ˜„์‹์ด๊ฑฐ๋‚˜ ์˜ˆ์•ฝ์–ด์ผ ๊ฒฝ์šฐ, ๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•๋งŒ์„ ์ด์šฉํ•ด์„œ ์ ‘๊ทผํ•ด์•ผ ํ•œ๋‹ค. ex) foo['full-name']


๊ฐ์ฒด ์†์„ฑ ์ด๋ฆ„ ์ง“๊ธฐ#

์  ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์†์„ฑ์˜ ์ด๋ฆ„์ด ์‹๋ณ„์ž ๊ทœ์น™์„ ๋”ฐ๋ผ์•ผ ํ•œ๋‹ค. ์‹๋ณ„์ž ๊ทœ์น™์„ ๋”ฐ๋ฅผ ๊ฒฝ์šฐ ์†์„ฑ์˜ ์ด๋ฆ„์„ '' ๋กœ ๊ฐ์‹ธ์ง€ ์•Š์•„๋„ ๋œ๋‹ค.


์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹๋ณ„์ž ์ฝ”๋“œ ๋‚ด์˜ ๋ณ€์ˆ˜, ํ•จ์ˆ˜, ์†์„ฑ์„ ์‹๋ณ„ํ•˜๋Š” ๋ฌธ์ž์—ด ๋Œ€์†Œ๋ฌธ์ž๋ฅผ ๊ตฌ๋ณ„ํ•˜๋ฉฐ ์œ ๋‹ˆ์ฝ”๋“œ ๊ธ€์ž, $ , _ ,์ˆซ์ž(0-9)๋กœ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์ˆซ์ž๋กœ ์‹œ์ž‘ํ•  ์ˆ˜๋Š” ์—†๋‹ค.

๐Ÿ”—MDN web docs - ์‹๋ณ„์ž


๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•์—์„œ๋Š” ๋ฌธ์ž์—ด์ด๋‚˜ Symbol์„ ์†์„ฑ์˜ ์ด๋ฆ„์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ์œ ํšจํ•œ ์‹๋ณ„์ž๊ฐ€ ์•„๋‹ˆ์–ด๋„ ๋œ๋‹ค. 1foo , !bar! , ์‹ฌ์ง€์–ด ๊ณต๋ฐฑ ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•  ๋•Œ๋Š” foo['name'] ์ฒ˜๋Ÿผ ' ' ๋กœ ๊ฐ์‹ธ์ฃผ์–ด์•ผ ํ•œ๋‹ค.


๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ๋ฐฉ์‹์œผ๋กœ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ์˜ค์ง ์ˆซ์ž๋กœ ๊ตฌ์„ฑ๋œ ์†์„ฑ ์ด๋ฆ„์ด ' ' ๋กœ ๊ฐ์‹ธ์ง€ ์•Š์•„๋„ ๊ฐ€๋Šฅํ•œ๋ฐ (์‹๋ณ„์ž ๊ทœ์น™์— ์–ด๊ธ‹๋‚จ.) ์ด ์ด์œ ๋Š” ์•„์ง ์ž˜ ๋ชจ๋ฅด๊ฒ ์Œ. ์ˆซ์ž๊ฐ€ ๋ฌธ์ž์—ด๋กœ ๋ฐ”๋€Œ๋Š” ํŠน์ง•์ด ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Œ. ์ด ๊ฒฝ์šฐ ์  ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ๋Š” ์ ‘๊ทผํ•  ์ˆ˜ ์—†๊ณ , ๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•์—์„œ๋Š” foo['์ˆซ์ž'] ์™€ foo[์ˆซ์ž] ๋ชจ๋‘ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•จ.


์ฐธ๊ณ ์ž๋ฃŒ#

๐Ÿ”—MDN web docs - ์†์„ฑ ์ ‘๊ทผ์ž

๐Ÿ”—MDN web docs - ์‹๋ณ„์ž

๐Ÿ”—JavaScript Object['key'] vs Object.key ์ฐจ์ด