JABASCRIPT BASIC

λ³€μˆ˜

scope

function test(){
  var message = "hi"; // μ§€μ—­λ³€μˆ˜
}
test();
alert(message); // 였λ₯˜ λ°œμƒ
VM3067:5 Uncaught ReferenceError: message is not defined
    at <anonymous>:5:7

var μ—°μ‚°μžλŠ” λ³€μˆ˜λ₯Ό 둜컬 μŠ€μ½”ν”„μ—μ„œ μ •μ˜ν•œλ‹€λŠ” 점을 λ°˜λ“œμ‹œ κΈ°μ–΅ν•΄μ•Όν•œλ‹€. var ν‚€μ›Œλ“œλ₯Ό μ¨μ„œ λ³€μˆ˜λ₯Ό μ •μ˜ν•˜λ©΄ ν•΄λ‹Ή λ³€μˆ˜λŠ” μœ„μ™€ 같이 ν•¨μˆ˜κ°€ μ’…λ£Œλ˜λŠ” μˆœκ°„ νŒŒκ΄΄λœλ‹€.

function test(){
  message = "hi"; // μ „μ—­λ³€μˆ˜
}
test();
alert(message);    //"hi"

var μ—°μ‚°μžλ₯Ό μƒλž΅ν•˜λŠ” κ²½μš°μ—λŠ” λ³€μˆ˜λ₯Ό μ „μ—­μœΌλ‘œ μ •μ˜ν•  수 μžˆλ‹€.

데이터 νƒ€μž… ECMAScriptμ—λŠ” λ‹€μ„― κ°€μ§€ 기본적인 데이터 νƒ€μž…μ΄ μžˆλ‹€. 이λ₯Ό primitive(μ›μ‹œ) 데이터 νƒ€μž…μ΄λΌ λΆ€λ₯΄κΈ°λ„ν•œλ‹€.

  • Undefined

  • Null

  • Boolean

  • number

  • string

λ³΅μž‘ν•œ 데이터 νƒ€μž…

  • object : ν•¨μˆ˜λ₯Ό μ œμ™Έν•œ 객체 or null

  • function : ν•¨μˆ˜

μœ„μ˜ λ‹€μ„― κ°€μ§€κ°€ 이에 ν•΄λ‹Ήλœλ‹€.

undefined

undefined λŠ” var λ₯Ό μ¨μ„œ λ³€μˆ˜λ₯Ό μ •μ˜ν–ˆμ§€λ§Œ μ΄ˆκΈ°ν™” ν•˜μ§€μ•Šμ€ κ²½μš°μ΄λ‹€.

var message;
console.log(message); //=> undefined

기본적으둜 μ΄ˆκΈ°ν™”ν•˜μ§€ μ•Šμ€ λ³€μˆ˜μ—λŠ” 항상 undefinedκ°€ ν• λ‹Ήλœλ‹€.

var message; // undefined

console.log(message); // "undefined"
console.log(age);            // 였λ₯˜
Uncaught ReferenceError: age is not defined
    at <anonymous>:1:13

undefined 값이 ν• λ‹Ήλœ λ³€μˆ˜μ™€ μ •μ˜λ˜μ§€ μ•Šμ€ λ³€μˆ˜λ₯Ό ꡬ뢄할 수 μžˆμ–΄μ•Όν•œλ‹€. 아직 μ •μ˜ν•œ 적 μ—†λŠ” λ³€μˆ˜μ— μ‹€ν–‰ν•  수 μžˆλŠ” 쑰적은 typeof뿐이닀.

var message; 
typeof message
"undefined"
typeof age; // "undefined"

Null

Null νƒ€μž… μ—­μ‹œ κ°’ ν•˜λ‚˜λ§Œμ„ κ°–λŠ”λ‹€. null 은 빈 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” ν¬μΈν„°μ΄λ―€λ‘œ typeof λ₯Ό ν˜ΈμΆœν•˜λ©΄ objectλ₯Ό λ°˜ν™˜ν•œλ‹€.

var a = null;
typeof(a); // "object"

λ³€μˆ˜ μ •μ˜μ‹œμ— ν•΄λ‹Ή λ³€μˆ˜κ°€ 객체λ₯Ό κ°€λ¦¬ν‚€κ²Œ ν•  것이라면 null둜 μ΄ˆκΈ°ν™”ν•˜λŠ” 것을 ꢌμž₯ν•œλ‹€.

console.log(null == undefined) // true

undefinedλŠ” nullμ—μ„œ νŒŒμƒν–ˆμœΌλ―€λ‘œ ν‘œλ©΄μ μœΌλ‘œ λ™μΌν•œ κ²ƒμœΌλ‘œ μ •μ˜ν•œλ‹€. nullκ³Ό undefinedλŠ” μ„œλ‘œ κ΄€λ ¨μžˆμ§€λ§Œ 두 값은 μ•„μ£Ό λ‹€λ₯΄κ²Œ 쓰인닀. λ³€μˆ˜κ°’μ— λͺ…μ‹œμ μœΌλ‘œ undefinedλ₯Ό ν• λ‹Ήν•΄μ„œλŠ” μ•ˆλ˜μ§€λ§Œ, null은 객체λ₯Ό μ‚¬μš©ν•΄μ•Όν•˜μ§€λ§Œ ν•΄λ‹Ή 객체λ₯Ό μ΄μš©ν•  수 없을 λ•Œ 항상 null이 μ™€μ•Όν•œλ‹€.

boolean

데이터 νƒ€μž…

true

false

boolean

true

false

string

λΉ„μ–΄μžˆμ§€μ•Šμ€ λ¬Έμžμ—΄ μ „λΆ€

""(빈 λ¬Έμžμ—΄)

number

0이 μ•„λ‹Œ λͺ¨λ“  숫자, λ¬΄ν•œλŒ€(Infinity) 포함

0, NaN

object

λͺ¨λ“  객체

null

undefined

X(ν•΄λ‹Ήμ—†μŒ)

undefined

number

λΆ€λ™μ†Œμˆ˜μ  μˆ«μžλŠ” μ†Œμˆ˜μ  μ•„λž˜ 17μžλ¦¬κΉŒμ§€ μ •ν™•ν•˜μ§€λ§Œ 사칙연산에 μžˆμ–΄μ„œλŠ” λΆ€μ •ν™•ν•˜λ‹€.

a = 0.1
b = 0.2
a+b // 0.30000000000000004
console.log(a+b == 0.3) //=> false

0.1 + 0.2κ°€ 0.3이 μ•„λ‹Œ 0.30000000000000004λ₯Ό λ°˜ν™˜ν•˜λŠ” 것을 λ³Ό 수 μžˆλ‹€. λ”°λΌμ„œ λΆ€λ™μ†Œμˆ˜μ  숫자λ₯Ό λΉ„κ΅ν• λ•ŒλŠ” μ΄λŸ¬ν•œ 버그λ₯Ό μΈμ§€ν•˜κ³  λ‹€λ₯Έ 방법을 μ¨μ•Όν•œλ‹€.

Number.MIN_VALUE // 5e-324
Number.MAX_VALUE // 1.7976931348623157e+308
isFinite(123124124123123) // true
isFinite(Infinity)        // false

μ΅œμ†Ÿκ°’κ³Ό μ΅œλŒ€κ°’μ€ MIN_VALUE, MAX_VALUEλ₯Ό ν†΅ν•΄μ„œ μ•Œ 수 있으며, ν•΄λ‹Ή μˆ«μžκ°€ μœ νš¨ν•œ λ²”μœ„μ•ˆμ— μžˆλŠ”μ§€λŠ” isFinite() ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜λ©΄λœλ‹€.

NaN

NaN은 Not a Number으둜 μ˜λ„ν•œ μ‘°μž‘μ΄ μ‹€νŒ¨ν–ˆμ„ λ•Œ λ°˜ν™˜λ˜λŠ” 값이닀. NaN은 μ–΄λ– ν•œ 값도 μΌμΉ˜ν•˜μ§€ μ•ŠμœΌλ©°, NaN끼리도 μΌμΉ˜ν•˜μ§€ μ•ŠλŠ”λ‹€.

console.log(NaN == NaN); // false

κ·ΈλŸ¬λ―€λ‘œ, isNaN() ν•¨μˆ˜λ₯Ό λ”°λ‘œ μ œκ³΅ν•΄μ€€λ‹€.

μ›μ‹œ κ°’κ³Ό μ°Έμ‘° κ°’

μžλ°”μŠ€ν¬λ¦½νŠΈ λ³€μˆ˜λŠ” λ³€μˆ˜κ°€ κ°€μ Έμ•Όν•  데이터 νƒ€μž…μ— λŒ€ν•œ κ·œμΉ™μ΄ μ—†μœΌλ―€λ‘œ λ³€μˆ˜μ˜ κ°’κ³Ό 데이터 νƒ€μž…μ€ μ‹€ν–‰ 쀑에 λ°”λ€” 수 μžˆλ‹€.

μ›μ‹œ 값은 λ‹¨μˆœν•œ 데이터이며, μ°Έμ‘° 값은 μ—¬λŸ¬ κ°’μœΌλ‘œ κ΅¬μ„±λ˜λŠ” 객체λ₯Ό 가리킨닀. λ³€μˆ˜μ— 값을 ν• λ‹Ήν•˜λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 ν•΄λ‹Ή 값이 μ›μ‹œ 데이터인지 μ°Έμ‘° 데이터인지 νŒλ‹¨ν•œλ‹€.

μ›μ‹œνƒ€μž…μ€ Undefined, Null, Boolean, 숫자, λ¬Έμžμ—΄μ΄λ‹€. μ°Έμ‘° 값은 λ©”λͺ¨λ¦¬μ— μ €μž₯된 객체둜, μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ©”λͺ¨λ¦¬ 곡간을 직접 μ‘°μž‘ν•˜λŠ” 것이 λΆˆκ°€λŠ₯ν•˜λ©°, 객체λ₯Ό μ‘°μž‘ν• λ•ŒλŠ” 사싀 ν•΄λ‹Ή 객체에 λŒ€ν•œ μ°Έμ‘°λ₯Ό μ‘°μž‘ν•˜λŠ” 것이닀.

동적 ν”„λ‘œνΌν‹°

μ°Έμ‘° 값을 λ‹€λ£°λ•ŒλŠ” μ–Έμ œλ“  ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œλ₯Ό μΆ”κ°€ν•˜κ±°λ‚˜ λ°”κΎΈκ³  μ‚­μ œν•  수 μžˆλ‹€.

var person = new Object();
person.name = "Faker";
console.log(person.name); // "Faker"

객체λ₯Ό μƒμ„±ν•œ ν›„ ν”„λ‘œνΌν‹°λ₯Ό μΆ”κ°€ν–ˆλ‹€. 이 μ‹œμ λΆ€ν„° 객체가 νŒŒκ΄΄λ˜κ±°λ‚˜ ν”„λ‘œνΌν‹°λ₯Ό λͺ…μ‹œμ μœΌλ‘œ μ œκ±°ν•˜κΈ° μ „κΉŒμ§€λŠ” ν•΄λ‹Ή ν”„λ‘œνΌν‹°μ— μ ‘κ·Όν•  수 μžˆλ‹€.

var name = "Faker";
name.age = 24;
console.log(name.age); // undefined

μ›μ‹œκ°’μ—λŠ” ν”„λ‘œνΌν‹°κ°€ μ—†μœΌλ©°, μΆ”κ°€ν•˜λ €ν•΄λ„ 였λ₯˜κ°€ λ°œμƒν•˜μ§€λŠ” μ•Šμ§€λ§Œ λ°”λ‘œ 사라진닀. λ™μ μœΌλ‘œ ν”„λ‘œνΌν‹°λ₯Ό μΆ”κ°€ν•  수 μžˆλŠ” 값은 μ°Έμ‘°κ°’ 뿐이닀.

κ°’ 볡사

μ›μ‹œ 값을 λ‹€λ₯Έ λ³€μˆ˜λ‘œ 볡사할 λ•ŒλŠ” ν˜„μž¬ μ €μž₯된 값을 μƒˆλ‘œ μƒμ„±ν•œ λ‹€μŒ μƒˆλ‘œμš΄ λ³€μˆ˜μ— λ³΅μ‚¬ν•œλ‹€.

var num1 = 4;
var num2 = num1;

console.log(num1 , num2); // 4 4
num1 = 5;
console.log(num1 , num2); // 5 4

μ—¬κΈ°μ„œ λ³΅μ‚¬λœ κ°’ num2λŠ” num1에 μ €μž₯된 κ°’κ³ΌλŠ” μ™„μ „νžˆ λΆ„λ¦¬λ˜μ–΄μžˆλŠ” 것을 확인할 수 μžˆλ‹€.

μ°Έμ‘° 값은 객체λ₯Ό λ³΅μ‚¬ν•˜λ©΄ κ·Έ 값이 객체 μžμ²΄κ°€ μ•„λ‹ˆλΌ νž™μ— μ €μž₯된 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” 포인터이닀.

var obj = Object();
var obj2 = obj;

obj.name = "Faker";
console.log(obj2.name);
obj2.name = "Clid";
console.log(obj.name);

λ‹€μŒκ³Ό 같이 객체λ₯Ό μ‘°μž‘ν•˜λ©΄ λ‹€λ₯Έ 객체에도 영ν–₯이 κ°€λŠ” 것을 확인할 수 μžˆλ‹€.

λ§€κ°œλ³€μˆ˜

ECMAScript의 ν•¨μˆ˜ λ§€κ°œλ³€μˆ˜λŠ” λͺ¨λ‘ κ°’μœΌλ‘œ μ „λ‹¬λœλ‹€. ν•¨μˆ˜ 외뢀에 μžˆλŠ” 값은 ν•¨μˆ˜ λ‚΄λΆ€μ˜ λ§€κ°œλ³€μˆ˜μ— λ³΅μ‚¬λ˜λŠ”λ°, μ΄λ•Œ λ³€μˆ˜μ˜ 값을 λ³΅μ‚¬ν•˜λŠ” 것과 κ°™λ‹€. λ³€μˆ˜λŠ” κ°’μœΌλ‘œλ„, μ°Έμ‘°λ‘œλ„ μ ‘κ·Όκ°€λŠ₯ν•˜μ§€λ§Œ λ§€κ°œλ³€μˆ˜λŠ” 였직 κ°’μœΌλ‘œλ§Œ μ „λ‹¬λœλ‹€.

function addTen(num){
  // μ—¬κΈ°μ„œ λ§€κ°œλ³€μˆ˜ num은 μ§€μ—­λ³€μˆ˜μ΄λ‹€.
  num += 10;
  return num;
}

var count = 20;
var result = addTen(count);
console.log(count); // 20
console.log(result); // 30
function setName(obj){
  obj.name = "Faker";
}
var person = new Object();
setName(person);
console.log(person);
[object Object] {
  name: "Faker"
}

objλŠ” ν•¨μˆ˜μ— κ°’ ν˜•νƒœλ‘œ μ „λ‹¬λ˜μ—ˆμ§€λ§Œ, μ°Έμ‘°λ₯Ό ν†΅ν•΄μ„œ 객체에 μ ‘κ·Όν•œλ‹€. ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ obj에 name ν”„λ‘œνΌν‹°λ₯Ό μΆ”κ°€ν•˜λ©΄ ν•¨μˆ˜ μ™ΈλΆ€μ—μ„œλ„ λ°˜μ˜λ˜λŠ”λ° objκ°€ κ°€λ¦¬ν‚€λŠ” 것은 νž™μ— μ‘΄μž¬ν•˜λŠ” μ „μ—­ 객체이기 λ•Œλ¬Έμ΄λ‹€.

function setName2(obj){
  obj.name = "Faker";
  obj = new Object();
  obj.name = "Greg";
}

var person2 = new Object();
setName2(person2);
console.log(person2);
[object Object] {
  name: "Faker"
}

λ§Œμ•½ person2κ°€ 참쑰둜 μ „λ‹¬λ˜μ—ˆλ‹€λ©΄, person2의 name ν”„λ‘œνΌν‹° 값은 Grag둜 λ³€κ²½λ˜μ–΄μ•Όν•˜μ§€λ§Œ "Faker"κ·ΈλŒ€λ‘œμ΄λ‹€. ν•¨μˆ˜μ— 값을 μ „λ‹¬ν–ˆκΈ°λ•Œλ¬Έμ— ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ λ§€κ°œλ³€μˆ˜μ˜ 값이 λ°”λ€Œμ—ˆμŒμ—λ„ λΆˆκ΅¬ν•˜κ³  μ›λž˜ 객체에 λŒ€ν•œ μ°Έμ‘°λ₯Ό κ·ΈλŒ€λ‘œ μœ μ§€ν•œ 것이닀. ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ μƒˆλ‘œμš΄ 객체λ₯Ό μƒμ„±ν•˜λ©΄, objλŠ” μ§€μ—­ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” 포인터가 되며, 이 μ§€μ—­ κ°μ²΄λŠ” ν•¨μˆ˜κ°€ 싀행을 λ§ˆμΉ˜λŠ” μˆœκ°„ μ¦‰μ‹œ νŒŒκ΄΄λœλ‹€.

νƒ€μž… νŒλ³„

typeof μ—°μ‚°μžλŠ” λ³€μˆ˜κ°€ μ›μ‹œ νƒ€μž…μΈμ§€ νŒŒμ•…ν•˜κΈ°μ— μ΅œμƒμ΄μ§€λ§Œ, 참쑰값에 λŒ€ν•΄μ„œλŠ” νŒλ³„ν•˜κΈ° μ–΄λ ΅λ‹€. μ΄λŸ¬ν•œ κ²½μš°μ— instanceof λ₯Ό μ‚¬μš©ν•˜λ©΄λœλ‹€.

variable instanceof constructor
console.log(person instanceof Object); // true

λͺ¨λ“  μ°Έμ‘° 값은 Object의 μΈμŠ€ν„΄μŠ€μΈ κ²ƒμœΌλ‘œ μ •μ˜λ˜μ–΄ μžˆμœΌλ―€λ‘œ 항상 trueλ₯Ό λ°˜ν•œν™˜λ‹€.

μ—°μ‚°μž

일치/뢈일치 vs 동일/비동일 μ—°μ‚°μž

동일(==)/비동일(!=) μ—°μ‚°μžμ™€ 일치(===)/뢈일치(!==) μ—°μ‚°μžλŠ” 같은 μΌμ„ν•˜μ§€λ§Œ 일치, 뢈일치 μ—°μ‚°μžλŠ” ν”Όμ—°μ‚°μžμ˜ νƒ€μž…μ„ λ³€ν™˜ν•˜μ§€ μ•Šκ³  κ·ΈλŒ€λ‘œ λΉ„κ΅ν•œλ‹€.

console.log("55"==55); // true
console.log("55"===55); // false

동일 μ—°μ‚°μž(==)λŠ” λ¬Έμžμ—΄μ„ 숫자둜 λ³€ν™˜ν•œ λ‹€μŒ 비ꡐλ₯Ό ν•˜λ―€λ‘œ 두 값이 λ™μΌν•˜λ‹€κ³  λ³Έλ‹€. ν•˜μ§€λ§Œ 일치 μ—°μ‚°μž(===)λŠ” λ³€ν™˜ν•˜μ§€ μ•Šμ€ μƒνƒœμ—μ„œ λΉ„κ΅ν•˜λ―€λ‘œ μΌμΉ˜ν•˜μ§€ μ•Šλ‹€κ³  λ°˜ν™˜ν•œλ‹€.

console.log(undefined == null); // true
console.log(undefined === null); // false

ν•¨μˆ˜

ECMAScript ν•¨μˆ˜λŠ” λ§€κ°œλ³€μˆ˜ 숫자λ₯Ό λ”°μ§€μ§€ μ•ŠμœΌλ©° 데이터 νƒ€μž…λ„ μ²΄ν¬ν•˜μ§€ μ•ŠλŠ”λ‹€. ν•¨μˆ˜μ—μ„œ λ§€κ°œλ³€μˆ˜λ₯Ό 두 개 받도둝 λ§Œλ“€μ—ˆλ”λΌλ„ λ°˜λ“œμ‹œ λ§€κ°œλ³€μˆ˜ 두 개λ₯Ό λ„˜κ²¨μ•Όν•˜λŠ” 건 μ•„λ‹ˆλ‹€. ECMAScript의 λ§€κ°œλ³€μˆ˜κ°€ λ‚΄λΆ€μ μœΌλ‘œλŠ” λ°°μ—΄λ‘œ ν‘œν˜„λ˜κΈ° λ•Œλ¬Έμ΄λ‹€. 이 배열은 항상 ν•¨μˆ˜μ— μ „λ‹¬λ˜μ§€λ§Œ ν•¨μˆ˜λŠ” 배열에 μ–΄λ–€ 값이 λ“€μ–΄μžˆλŠ”μ§€ μ²΄ν¬ν•˜μ§€ μ•ŠλŠ”λ‹€. ν•¨μˆ˜λŠ” argumentsλΌλŠ” 객체λ₯Ό ν†΅ν•΄μ„œ λ§€κ°œλ³€μˆ˜ 값에 μ ‘κ·Όν•  수 μžˆλ‹€.

function sayHi(){
  console.log(arguments);
}
sayHi('test1','1234', '25');
[object Arguments] {
  0: "test1",
  1: "1234",
  2: "25"
}

argumentsλŠ” 인덱슀 κ°’μœΌλ‘œ μ ‘κ·Όν•  수 μžˆλ‹€.

ECMAScript ν•¨μˆ˜μ—λŠ” λ‹€λ₯Έ μ–Έμ–΄μ—μ„œ μ‚¬μš©ν•˜λŠ” μ˜€λ²„λ‘œλ”©μ΄ μ—†λ‹€.같은 μ΄λ¦„μœΌλ‘œ ν•¨μˆ˜λ₯Ό μ—¬λŸ¬ 번 μ •μ˜ν•˜λ©΄ λ§ˆμ§€λ§‰ ν•¨μˆ˜κ°€ ν• λ‹Ήλœλ‹€.

Last updated

Was this helpful?