Younho9 Notes

Appearance

Return to top
On this page

2020-02-29

Title
2020-02-29
Category
2020
Tags
2020
Aliases
2020-02-29
Created
4 years ago
Updated
last year

JavaScript

객체

  • 객체 선언
javascript
const ironMan = {
	'name': '토니스타크',
	'actor': '로버트 다우니 주니어',
	'alias': '아이언맨',
	'key is string': true,
};

const ironMan = {
	'name': '토니스타크',
	'actor': '로버트 다우니 주니어',
	'alias': '아이언맨',
	'key is string': true,
};

객체는 { } 로 감싸고 key: value 페어로 이루어져 있는데, key 는 문자열로 공백이 있다면 ' 로 감싸야 한다. 또한 , 를 빼놓으면 error가 발생한다.

  • 객체 호출
javascript
console.log(ironMan);
// Object {name: "토니스타크", actor: "로버트 다우니 주니어", alias: "아이언맨"}

console.log(ironMan.name);
// 토니스타크

console.log(ironMan.actor);
// 로버트 다우니 주니어

console.log(ironMan.alias);
// 아이언맨

console.log(ironMan);
// Object {name: "토니스타크", actor: "로버트 다우니 주니어", alias: "아이언맨"}

console.log(ironMan.name);
// 토니스타크

console.log(ironMan.actor);
// 로버트 다우니 주니어

console.log(ironMan.alias);
// 아이언맨
  • 객체 구조 분해
javascript
const {alias, name, actor} = hero;
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
console.log(text);

const {alias, name, actor} = hero;
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
console.log(text);

객체에서 값을 추출해냄.

  • 객체 내부 함수
javascript
const dog = {
	name: '멍멍이',
	sound: '멍멍!',
	say: function () {
		console.log(this.sound);
	},
};

const dog = {
	name: '멍멍이',
	sound: '멍멍!',
	say: function () {
		console.log(this.sound);
	},
};

function() 은 익명 함수이지만, function dogFunc() 처럼 named 함수로 만들어도 된다.

이렇게 함수를 객체 내부에 정의할 수 있다.

그런데 만약 화살표 함수를 정의하면 어떻게 될까?

javascript
const dog = {
	name: '멍멍이',
	sound: '멍멍!',
	say: () => {
		console.log(this.sound);
	},
};

dog.say();

// TypeError: Cannot read property 'sound' of undefined

const dog = {
	name: '멍멍이',
	sound: '멍멍!',
	say: () => {
		console.log(this.sound);
	},
};

dog.say();

// TypeError: Cannot read property 'sound' of undefined

function 키워드를 사용할 경우 this 로 자신이 속한 위치와 연결시키는 것이 가능.

화살표 함수의 경우 자기 자신이 속한 this 가 어디인지 모른다

javascript
const dog = {
	name: '멍멍이',
	sound: '멍멍!',
	say: function () {
		console.log(this.sound);
	},
};

const cat = {
	name: '야옹이',
	sound: '야옹~',
};

cat.say = dog.say;
dog.say(); // 멍멍!
cat.say(); // 야옹~

// Error
const dogSay = dog.say;
const catSay = cat.say;
dogSay();
catSay();

const dog = {
	name: '멍멍이',
	sound: '멍멍!',
	say: function () {
		console.log(this.sound);
	},
};

const cat = {
	name: '야옹이',
	sound: '야옹~',
};

cat.say = dog.say;
dog.say(); // 멍멍!
cat.say(); // 야옹~

// Error
const dogSay = dog.say;
const catSay = cat.say;
dogSay();
catSay();

cat.say = dog.say; 로 함수를 할당해줄 수 있는데, 만약 외부에 있는 const dogSay 에 할당한다면, 마찬가지로 this 가 어느 scope 인지를 알지 못해 error 가 발생한다.

  • getter와 setter 함수
javascript
// EX 1
const dog = {
	_name: '멍멍이',
	get name() {
		console.log('_name을 조회합니다.');
		return this._name;
	},
	set name(value) {
		console.log('이름이 바뀝니다..' + value);
		this._name = value;
	},
};

console.log(dog.name);
dog.name = '뭉뭉이';
console.log(dog.name);

// EX 2
const numbers = {
	_a: 1,
	_b: 2,
	sum: 3,
	calculate() {
		console.log('calculate');
		this.sum = this._a + this._b;
	},
	get a() {
		return this._a;
	},
	get b() {
		return this._b;
	},
	set a(value) {
		this._a = value;
		this.calculate();
	},
	set b(value) {
		this._b = value;
		this.calculate();
	},
};

console.log(numbers.sum);
numbers.a = 5;
numbers.a = 6;
numbers.a = 7;
numbers.a = 8;
console.log(numbers.sum);

// EX 1
const dog = {
	_name: '멍멍이',
	get name() {
		console.log('_name을 조회합니다.');
		return this._name;
	},
	set name(value) {
		console.log('이름이 바뀝니다..' + value);
		this._name = value;
	},
};

console.log(dog.name);
dog.name = '뭉뭉이';
console.log(dog.name);

// EX 2
const numbers = {
	_a: 1,
	_b: 2,
	sum: 3,
	calculate() {
		console.log('calculate');
		this.sum = this._a + this._b;
	},
	get a() {
		return this._a;
	},
	get b() {
		return this._b;
	},
	set a(value) {
		this._a = value;
		this.calculate();
	},
	set b(value) {
		this._b = value;
		this.calculate();
	},
};

console.log(numbers.sum);
numbers.a = 5;
numbers.a = 6;
numbers.a = 7;
numbers.a = 8;
console.log(numbers.sum);

get 함수와 sum 함수는 이름이 같아도 된다. 하지만 변수와 이름이 같으면 안된다. 따라서 변수명 앞에 _ 를 붙여준다.

EX2에서처럼 get, set을 사용할 때의 장점은 a의 값이 변할 때에 calculate 함수를 실행하여 sum 값을 업데이트하므로 효율적이다.

  • 객체 내장 함수
javascript
const doggy = {
	이름: '멍멍이',
	소리: '멍멍',
};

console.log(doggy);

console.log(Object.entries(doggy));
console.log(Object.keys(doggy));
console.log(Object.values(doggy));

const doggy = {
	이름: '멍멍이',
	소리: '멍멍',
};

console.log(doggy);

console.log(Object.entries(doggy));
console.log(Object.keys(doggy));
console.log(Object.values(doggy));

배열

JS에서 배열은 타입을 신경쓰지 않아도 된다. ex) [ 'a', 1, 'text' ]

배열 내장함수

  • push

  • pop

  • length

반복문

  • for 문

  • while 문

  • for - of

javascript
const numbers = [10, 20, 30, 40, 50];

for (let number of numbers) {
	console.log(number);
}

const numbers = [10, 20, 30, 40, 50];

for (let number of numbers) {
	console.log(number);
}

컬렉션 전용 반복 구문

  • for - in
javascript
var obj = {
	a: 1,
	b: 2,
	c: 3,
};

for (var prop in obj) {
	console.log(prop, obj[prop]); // a 1, b 2, c 3
}

var obj = {
	a: 1,
	b: 2,
	c: 3,
};

for (var prop in obj) {
	console.log(prop, obj[prop]); // a 1, b 2, c 3
}

객체의 속성들을 반복하여 작업 수행.

  • continue

반복문 중에 건너뛰고 다음 반복을 실행.

  • break

반복문을 빠져나감.

  • foreach
javascript
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

superheroes.forEach((hero) => {
	console.log(hero);
});

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

superheroes.forEach((hero) => {
	console.log(hero);
});
  • map
javascript
const array = [1, 2, 3, 4, 5, 6, 7, 8];

const square = (n) => n * n;
const squared = array.map(square);

console.log(squared);

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const square = (n) => n * n;
const squared = array.map(square);

console.log(squared);
javascript
// 더 간략히
const array = [1, 2, 3, 4, 5, 6, 7, 8];
const squared = array.map(n => n * n;);

console.log(squared);

// 더 간략히
const array = [1, 2, 3, 4, 5, 6, 7, 8];
const squared = array.map(n => n * n;);

console.log(squared);
  • indexOf
javascript
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index);

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index);
  • findIndex
javascript
const todos = [
	{
		id: 1,
		text: '자바스크립트 입문',
		done: true,
	},
	{
		id: 2,
		text: '함수 배우기',
		done: true,
	},
	{
		id: 3,
		text: '객체 배열 배우기',
		done: true,
	},
	{
		id: 4,
		text: '내장 함수 배우기',
		done: false,
	},
];

const index = todos.findIndex((todo) => todo.id === 3);
console.log(index);

const todos = [
	{
		id: 1,
		text: '자바스크립트 입문',
		done: true,
	},
	{
		id: 2,
		text: '함수 배우기',
		done: true,
	},
	{
		id: 3,
		text: '객체 배열 배우기',
		done: true,
	},
	{
		id: 4,
		text: '내장 함수 배우기',
		done: false,
	},
];

const index = todos.findIndex((todo) => todo.id === 3);
console.log(index);

  • find

  • filter

Released under the MIT License.

Copyright © 2022-present Younho Choo