10μ₯ κ°μ²΄ 리ν°λ΄
κ°μ²΄λ?
μλ°μ€ν¬λ¦½νΈλ κ°μ²΄ κΈ°λ°μ νλ‘κ·Έλλ° μΈμ΄μ΄λ©°, μμ κ°μ μ μΈν λλ¨Έμ§ κ°(ν¨μ, λ°°μ΄, μ κ· ννμ λ±)μ λͺ¨λ κ°μ²΄λ€. μ¦ κ°μ²΄λ λ³κ²½ κ°λ₯ν κ°μ΄λ€.
κ°μ²΄λ νλ‘νΌν°μ μ§ν©μ΄λ©°, νλ‘νΌν°λ ν€μ κ°μΌλ‘ ꡬμ±λλ€. νλ‘νΌν° κ°μ΄ ν¨μμΌ κ²½μ°, μΌλ° ν¨μμ ꡬλΆνκΈ° μν΄ λ©μλλΌ λΆλ₯Έλ€.
- νλ‘νΌν° : κ°μ²΄μ μνλ₯Ό λνλ΄λ κ°(data)
- λ©μλ : νλ‘νΌν°(μν λ°μ΄ν°)λ₯Ό μ°Έκ³ νκ³ μ‘°μν μ μλ λμ(behavior)
var counter = {
// νλ‘νΌν°
num: 0, // νλ‘νΌν° ν€μ νλ‘νΌν° κ°
// λ©μλ
increase: function() {
this.num++;
}
};
κ°μ²΄ 리ν°λ΄μ μν κ°μ²΄ μμ±
μλ°μ€ν¬λ¦½νΈλ νλ‘ν νμ κΈ°λ° κ°μ²΄μ§ν₯ μΈμ΄λ‘μ ν΄λμ€ κΈ°λ° κ°μ²΄μ§ν₯ μΈμ΄μλ λ¬λ¦¬ λ€μν κ°μ²΄ μμ± λ°©λ²μ μ§μνλ€. (κ°μ²΄ 리ν°λ΄, Object μμ±μ ν¨μ, μμ±μ ν¨μ, Object.create λ©μλ, ν΄λμ€ES6) κ°μ₯ μΌλ°μ μ΄κ³ κ°λ¨ν λ°©λ²μ κ°μ²΄ 리ν°λ΄μ μ¬μ©νλ λ°©λ²μ΄λ€.
// κ°μ²΄ 리ν°λ΄μ μ€κ΄νΈλ μ½λ λΈλ‘μ μλ―Ένμ§ μλλ€.
// κ°μΌλ‘ νκ°λλ ννμμ΄λ―λ‘ μ€κ΄νΈ λ€μ μΈλ―Έμ½λ‘ μ λΆμΈλ€.
var person = {
name: 'Lee',
sayHello: function () {
console.log(`Hello! My name is ${this.name}.`);
}
};
console.log(typeof person); // object
console.log(typeof person); // {name: 'Lee', sayHello: f}
μΈμ€ν΄μ€λ ν΄λμ€μ μν΄ μμ±λμ΄ λ©λͺ¨λ¦¬μ μ μ₯λ μ€μ²΄λ₯Ό λ§νλ€. κ°μ²΄μ§ν₯ νλ‘κ·Έλλ°μμ κ°μ²΄λ ν΄λμ€μ μΈμ€ν΄μ€λ₯Ό ν¬ν¨ν κ°λ μ΄λ€. ν΄λμ€ μΈμ€ν΄μ€λ₯Ό μμ±νκΈ° μν ν νλ¦Ώμ μν μ νλ€.
νλ‘νΌν°
νλ‘νΌν° ν€μ νλ‘νΌν° κ°μΌλ‘ μ¬μ©ν μ μλ κ°μ λ€μκ³Ό κ°λ€.
- νλ‘νΌν° ν€ : λΉ λ¬Έμμ΄μ ν¬ν¨νλ λͺ¨λ λ¬Έμμ΄ λλ μ¬λ² κ°
- νλ‘νΌν° κ° : μλ°μ€ν¬λ¦½νΈμμ μ¬μ©ν μ μλ λͺ¨λ κ°
νλ‘νΌν° ν€λ νλ‘νΌν° κ°μ μ κ·Ό ν μ μλ μ΄λ¦μΌλ‘μ μλ³μ μν μ νλ€. μλ³μ λ€μ΄λ° κ·μΉμ λ°λ₯΄μ§ μλ μ΄λ¦μλ λ°λμ λ°μ΄νλ₯Ό μ¬μ©ν΄μΌ νλ€. νμ§λ§ κ°κΈμ μλ³μ λ€μ΄λ° κ·μΉμ μ€μνλ νλ‘νΌν° ν€λ₯Ό μ¬μ©ν κ²μ κΆμ₯νλ€.
λ¬Έμμ΄ λλ λ¬Έμμ΄λ‘ νκ°ν μ μλ ννμμ μ¬μ©ν΄ νλ‘νΌν° ν€λ₯Ό λμ μΌλ‘ μμ±ν μλ μλ€. μ΄ κ²½μ°μλ νλ‘νΌν° ν€λ‘ μ¬μ©ν ννμμ λκ΄νΈλ‘ λ¬Άμ΄μΌ νλ€.
var key = 'hello';
// ES5
var obj1 = {};
obj[key] = 'world';
// ES6
var obj2 = { [key]: 'world' };
νλ‘νΌν° ν€μ λ¬Έμμ΄μ΄λ μ¬λ² κ° μΈμ κ°μ μ¬μ©νλ©΄ μ묡μ νμ
λ³νμ ν΅ν΄ λ¬Έμμ΄μ΄ λλ€.
ex) νλ‘νΌν° ν€λ‘ μ«μ 리ν°λ΄μ μ¬μ©νλ©΄ λ°μ΄νλ λΆμ§ μμ§λ§ λ΄λΆμ μΌλ‘λ λ¬Έμμ΄λ‘ λ³νλλ€.
λ©μλ
λ©μλλ κ°μ²΄μ λ¬Άμ¬ μλ ν¨μλ₯Ό μλ―Ένλ€. λ©μλ λ΄λΆμμ μ¬μ©ν [ic]this[/ic] ν€μλλ κ°μ²΄ μμ μ κ°λ¦¬ν€λ μ°Έμ‘°λ³μλ€.
νλ‘νΌν° μ κ·Ό
νλ‘νΌν°μ μ κ·Όνλ λ°©λ²μ λ€μκ³Ό κ°μ΄ λ κ°μ§λ€.
- λ§μΉ¨ν νκΈ°λ²
- λκ΄νΈ νκΈ°λ²
λκ΄νΈ νλ‘νΌν° μ κ·Ό μ°μ°μ λ΄λΆμ μ§μ νλ νλ‘νΌν° ν€λ λ°λμ λ°μ΄νλ‘ κ°μΌ λ¬Έμμ΄μ΄μ΄μΌ νλ€. λκ΄νΈ νλ‘νΌν° μ κ·Ό μ°μ°μ λ΄μ λ°μ΄νλ‘ κ°μΈμ§ μμ μ΄λ¦μ νλ‘νΌν° ν€λ‘ μ¬μ©νλ©΄ μλ°μ€ν¬λ¦½νΈ μμ§μ μλ³μλ‘ ν΄μνλ€.
var person = {
name: 'Lee'
'first-name': 'suzy'
};
// λ§μΉ¨ν νκΈ°λ²
console.log(person.name);
// λκ΄νΈ νκΈ°λ²
console.log(person['name']);
console.log(person.age); // undefined
person.'last-name'; // SyntaxError: Unexpected string
person.last-name; // λΈλΌμ°μ νκ²½: NaN
// Node.js νκ²½ : ReferenceError
person['last-name']; // suzy
νλ‘νΌν° κ° κ°±μ
μ΄λ―Έ μ‘΄μ¬νλ νλ‘νΌν°μ κ°μ ν λΉνλ©΄ νλ‘νΌν° κ°μ΄ κ°±μ λλ€.
var person = {
name: 'Lee'
};
person.name = 'Kim';
νλ‘νΌν° λμ μμ±
μ‘΄μ¬νμ§ μλ νλ‘νΌν°μ κ°μ ν λΉνλ©΄ νλ‘νΌν°κ° λμ μΌλ‘ μμ±λμ΄ μΆκ°λκ³ νλ‘νΌν° κ°μ΄ ν λΉ λλ€.
var person = {
name: 'Lee'
};
person.age = 20;
νλ‘νΌν° μμ
[ic]delete[/ic] μ°μ°μλ κ°μ²΄μ νλ‘νΌν°λ₯Ό μμ νλ€.
var person = {
name: 'Lee'
};
delete person.name;
ES6μμ μΆκ°λ κ°μ²΄ 리ν°λ΄μ νμ₯ κΈ°λ₯
- νλ‘νΌν° μΆμ½ νν
: ES6μμλ νλ‘νΌν° κ°μΌλ‘ λ³μλ₯Ό μ¬μ©νλ κ²½μ° λ³μ μ΄λ¦κ³Ό νλ‘νΌν° ν€κ° λμΌν μ΄λ¦μΌ λ νλ‘νΌν° ν€λ₯Ό μλ΅ν μ μλ€.
let x = 1, y = 2;
const obj = {x, y};
console.log(obj); // {x: 1, y: 2}
- κ³μ°λ νλ‘νΌν° μ΄λ¦
: ES6μμλ κ°μ²΄ 리ν°λ΄ λ΄λΆμΈμ΄ κ³μ°λ νλ‘νΌν° μ΄λ¦μΌλ‘ νλ‘νΌν° ν€λ₯Ό λμ μμ±ν μ μλ€.
const prefix = 'prop';
let i = 0;
const obj = {
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i
};
console.log(obj); // {prop-1: 1, prop-2: 2}
- λ©μλ μΆμ½ νν
: ES6μμλ λ©μλλ₯Ό μ μν λ function ν€μλλ₯Ό μλ΅ν μΆμ½ ννμ μ¬μ©ν μ μλ€.
const obj = {
name: 'Lee',
sayHi() {
console.log(`Hi ${this.name}`);
}
};
11μ₯ μμ κ°κ³Ό κ°μ²΄μ λΉκ΅
μμ κ°
- λ³κ²½ λΆκ°λ₯ν κ°
- μμ νμ μ κ°μ μ½κΈ° μ μ© κ°μΌλ‘μ λ³κ²½ν μ μλ€.
- λ³μ κ°μ λ³κ²½νκΈ° μν΄ μμ κ°μ μ¬ν λΉνλ©΄ μλ‘μ΄ λ©λͺ¨λ¦¬ 곡κ°μ ν보νκ³ μ¬ν λΉν κ°μ μ μ₯ν ν, λ³μκ° μ°Έμ‘°νλ λ©λͺ¨λ¦¬ 곡κ°μ μ£Όμλ₯Ό λ³κ²½νλ€. κ°μ μ΄λ¬ν νΉμ±μ λΆλ³μ±μ΄λΌ νλ€.
- λΆλ³μ±μ κ°λ μμ κ°μ ν λΉν λ³μλ μ¬ν λΉ μ΄μΈμ λ³μ κ°μ λ³κ²½ν μ μλ λ°©λ²μ΄ μλ€.
- μμ κ°μ μκΈ°μΉ λͺ»ν λ³κ²½μΌλ‘λΆν° μμ λ‘λ€. μ΄λ λ°μ΄ν°μ μ λ’°μ±μ 보μ₯νλ€.
- λ¬Έμμ΄κ³Ό λΆλ³μ±
- λ¬Έμμ΄μ μ μ¬ λ°°μ΄ κ°μ²΄μ΄λ©΄μ μ΄ν°λ¬λΈμ΄λ―λ‘ λ°°μ΄κ³Ό μ μ¬νκ² κ° λ¬Έμμ μ κ·Όν μ μλ€. λ¬Έμμ΄μ μΌλΆ λ¬Έμλ λ³κ²½ν μ μμ§λ§ λ³μμ μλ‘μ΄ λ¬Έμμ΄μ μ¬ν λΉνλ κ²μ λ¬Όλ‘ κ°λ₯νλ€. μ΄λ κΈ°μ‘΄ λ¬Έμμ΄μ λ³κ²½νλ κ²μ΄ μλλΌ μλ‘μ΄ λ¬Έμμ΄μ μλ‘κ² ν λΉνλ κ²μ΄κΈ° λλ¬Έμ΄λ€.
- κ°μ μν μ λ¬
- λ³μμ μμ κ°μ κ°λ λ³μλ₯Ό ν λΉνλ©΄ ν λΉλ°λ λ³μμλ ν λΉλλ λ³μμ μμ κ°μ΄ 볡μ¬λμ΄ ν λΉλλ€. μ΄λ₯Ό κ°μ μν μ λ¬μ΄λΌ νλ€. μ΄λ κ° λ³μμ κ°μ λ€λ₯Έ λ©λͺ¨λ¦¬ 곡κ°μ μ μ₯λ λ³κ°μ κ°μ΄λ€. λ°λΌμ ν λΉλλ λ³μμ κ°μ λ³κ²½ν΄λ ν λΉλ°λ λ³μμ κ°μλ μ΄λ ν μν₯λ μ£Όμ§ μλλ€.
- μ¬μ€ κ°μ μν μ λ¬μ κ°μ μ λ¬νλ κ²μ΄ μλλΌ λ©λͺ¨λ¦¬ μ£Όμλ₯Ό μ λ¬νλ€. λ¨, μ λ¬λ λ©λͺ¨λ¦¬ μ£Όμλ₯Ό ν΅ν΄ λ©λͺ¨λ¦¬ 곡κ°μ μ κ·Όνλ©΄ κ°μ μ°Έμ‘°ν μ μλ€. μ€μν κ²μ λ λ³μμ μμ κ°μ μλ‘ λ€λ₯Έ λ©λͺ¨λ¦¬ 곡κ°μ μ μ₯λ λ³κ°μ κ°μ΄ λμ΄ μ΄λ νμͺ½μμ μ¬ν λΉμ ν΅ν΄ κ°μ λ³κ²½νλλΌλ μλ‘ κ°μν μ μλ€λ κ²μ΄λ€.
μ μ¬ λ°°μ΄ κ°μ²΄λ λ§μΉ λ°°μ΄μ²λΌ μΈλ±μ€λ‘ νλ‘νΌν° κ°μ μ κ·Όν μ μκ³ legnth νλ‘νΌν°λ₯Ό κ°λ κ°μ²΄λ₯Όλ§νλ€. forλ¬ΈμΌλ‘ μνλ κ°λ₯νλ€.
κ°μ²΄
- λ³κ²½ κ°λ₯ν κ°
- κ°μ²΄(μ°Έμ‘°) νμ μ κ°, μ¦ κ°μ²΄λ λ³κ²½ κ°λ₯ν κ°μ΄λ€.
- μμ κ°μ ν λΉν λ³μλ μμ κ° μ체λ₯Ό κ°μΌλ‘ κ°λλ€. νμ§λ§ κ°μ²΄λ₯Ό ν λΉν λ³μκ° κΈ°μ΅νλ λ©λͺ¨λ¦¬ μ£Όμλ₯Ό ν΅ν΄ λ©λͺ¨λ¦¬ 곡κ°μ μ κ·Όνλ©΄ μ°Έμ‘° κ°μ μ κ·Όν μ μλ€. μ°Έμ‘° κ°μ μμ±λ κ°μ²΄κ° μ μ₯λ λ©λͺ¨λ¦¬ 곡κ°μ μ£Όμ, κ·Έ μ체λ€.
- κ°μ²΄λ₯Ό ν λΉν λ³μμ κ²½μ° `λ³μλ κ°μ²΄λ₯Ό κ°λ¦¬ν€κ³ (μ°Έμ‘°νκ³ ) μλ€`λΌκ³ νννλ€.
- κ°μ²΄λ λ³κ²½ κ°λ₯ν κ°μ΄λ―λ‘ λ©λͺ¨λ¦¬μ μ μ₯λ κ°μ²΄λ₯Ό μ§μ μμ ν μ μλ€. μ΄λ κ°μ²΄λ₯Ό ν λΉν λ³μμ μ¬ν λΉμ νμ§ μμμΌλ―λ‘ κ°μ²΄λ₯Ό ν λΉν λ³μμ μ°Έμ‘° κ°μ λ³κ²½λμ§ μλλ€.
- κ°μ²΄λ ꡬ쑰μ λ¨μ μ λ°λ₯Έ λΆμμ©μ΄ μλλ°, μμ κ°κ³Όλ λ€λ₯΄κ² μ¬λ¬ κ°μ μλ³μκ° νλμ κ°μ²΄λ₯Ό 곡μ ν μ μλ€λ κ²μ΄λ€.
- μ°Έμ‘°μ μν μ λ¬
- κ°μ²΄λ₯Ό κ°λ¦¬ν€λ λ³μ(μλ³Έ)λ₯Ό λ€λ₯Έ λ³μ(μ¬λ³Έ)μ ν λΉνλ©΄ μλ³Έμ μ°Έμ‘° κ°μ΄ 볡μ¬λμ΄ μ λ¬λλ€. μ΄λ₯Ό μ°Έμ‘°μ μν μ λ¬μ΄λΌ νλ€.
- μλ³Έκ³Ό μ¬λ³Έ λ³μκ° λͺ¨λ λμΌν κ°μ²΄λ₯Ό κ°λ¦¬ν€λ κ²μ λ κ°μ μλ³μκ° νλμ κ°μ²΄λ₯Ό 곡μ νλ€λ κ²μ μλ―Ένλ€. λ°λΌμ μλ³Έ λλ μ¬λ³Έ μ€ μ΄λ νμͺ½μμ κ°μ²΄λ₯Ό λ³κ²½νλ©΄ μλ‘ μν₯μ μ£Όκ³ λ°λλ€.
- κ°μ μν μ λ¬κ³Ό μ°Έμ‘°μ μν μ λ¬μ μλ³μκ° κΈ°μ΅νλ λ©λͺ¨λ¦¬ 곡κ°μ μ μ₯λμ΄ μλ κ°μ 볡μ¬ν΄μ μ λ¬νλ€λ λ©΄μμ λμΌνλ€. μλ°μ€ν¬λ¦½νΈμλ μ°Έμ‘°μ μν μ λ¬μ μ‘΄μ¬νμ§ μκ³ κ°μ μν μ λ¬λ§μ΄ μ‘΄μ¬νλ€κ³ λ§ν μ μλ€.
- μλ°μ€ν¬λ¦½νΈμ μ΄ κ°μ λμ λ°©μμ μ€λͺ νλ μ νν μ©μ΄κ° μ‘΄μ¬νμ§ μλλ€. μ΄λ° μ΄μ λ‘ κ³΅μ μ μν μ λ¬μ΄λΌκ³ νννλ κ²½μ°λ μλ€.
μμ 볡μ¬μ κΉμ 볡μ¬
κ°μ²΄λ₯Ό νλ‘νΌν° κ°μΌλ‘ κ°λ κ°μ²΄μ κ²½μ° μμ 볡μ¬λ ν λ¨κ³κΉμ§λ§ 볡μ¬νλ κ²μ λ§νκ³ κΉμ 볡μ¬λ κ°μ²΄μ μ€μ²©λμ΄ μλ κ°μ²΄κΉμ§ λͺ¨λ 볡μ¬νλ κ²μ λ§νλ€. μμ 볡μ¬μ κΉμ 볡μ¬λ‘ μμ±λ κ°μ²΄λ μ°Έμ‘° κ°μ΄ λ€λ₯Έ λ³κ°μ κ°μ²΄λ€. νμ§λ§ μμ 볡μ¬λ κ°μ²΄μ μ€μ²©λμ΄ μλ κ°μ²΄μ κ²½μ° μ°Έμ‘° κ°μ 볡μ¬νκ³ κΉμ 볡μ¬λ κ°μ²΄μ μ€μ²©λμ΄ μλ κ°μ²΄κΉμ§ λͺ¨λ 볡μ¬ν΄μ μμ κ°μ²λΌ μμ ν 볡μ¬λ³Έμ λ§λ λ€λ μ°¨μ΄κ° μλ€.