모각코 1회차(3.15)

변수

let - 변수 선언

---

let x = 0;  // 변수 선언

console.log(x);  // 출력 print문

const - 상수 선언

---

var 사용 x, 함수를 포함한 대부분의 선언은 모두 const 사용

let이 필요한 경우에만 let 사용

const onShowModal = () => {
}

data type

---

별도의 선언없이 변수에 대입

숫자, 문자열, boolean, null, undefined

null : 없다고 고의적으로 설정하는 값

undefined : 설정하지 않았기 때문에 없는 값

연산자

문자열 합치기

---

두 문자열을 붙일 때에는 + 사용

const x = "Hello, ";
const y = "World";

console.log(x + b);  // Hello, World

조건문

if문

---

if (조건) {
	코드
} else {
	코드
}

switch/case문

---

case 값부터 시작하여 마지막까지 순차적으로 실행하기 때문에 각 케이스 내용 끝에 break를 써줘야 함

default는 해당하는 case 값이 없을 때 실행

switch (조건) {
	case 조건1:
		코드
		break;
	case 조건2:
		코드
		break;
	default:
		코드
}

함수

문자열 리턴

---

문자열 조합시 + 연산자를 사용할 수도 있지만, 템플릿 리터럴(template literal) 문법을 사용할 수도 있음

function hello(name) {
	console.log(`hello, ${name}!`);
}

hello('world');  // hello, world

화살표 함수

---

const add = (a, b) => {
	return a + b;
};

console.log(add(1, 2));  // 3

const add = (a, b) => a + b;

단, function에서의 this와 화살표 함수 내에서의 this가 서로 다름

객체

변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있음

const dog = {
  name: '강아지',
	age: 2
};

console.log(dog.name);  // 강아지
console.log(dog.age);  // 2

일반적으로 키는 공백이 없어야하지만 공백이 필요한 경우 따옴표로 감싸서 문자열로 넣어줌

const sample = {
	'key with space': true
};

함수에서 객체를 파라미터로 받기

---

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

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

print(ironMan);  // 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.

객체 비구조화 할당

---

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

function print(hero) {  // 객체 구조 분해
	const { alias, name, actor } = hero;  // 객체에서 값들을 추출하여 새로운 상수로 선언
	const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
	console.log(text);
}

print(ironMan);  // 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.

파라미터 단계에서 객체 비구조화 할당도 가능

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

객체 안에 함수 넣기

const dog = {
	name: '강아지',
	sound: '멍멍',
	say: function say() {
		console.log(this.sound);  // this는 객체 자신을 가리킴
	}
};

dog.say();  // 멍멍

함수를 선언할 때 이름이 굳이 없어도 됨

여기서 함수를 화살표 함수로 작성하면 제대로 작동하지 않음, 화살표 함수의 this가 객체를 가리키지 않기 때문

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

dog.say();  // 멍멍