---

JS기본 문법

변수

• let : 변수 선언

let name
name = 'Hong'

• const : 상수 선언
  var의 사용성이 줄어들었다. 함수를 포함한 대부분의 선언은 모두 const로 한다. let이 필요한 경우에만 let을 쓴다.

const onClick = () => {
	//코드내용
}

데이터 타입

• 별도의 선언 없이 변수에 대입한다.

• 숫자, 문자열, boolean, null(값이 없다.), undefined(아직 값이 지정되지 않았다.)

• null은 우리가 없다고 고의적으로 설정하는 값을 의미하고 undefined는 우리가 설정하지 않았기 때문에 없는 값을 의미한다.

연산자

• 산술연산자 (+, - , *, /)

++a, a++

• 대입연산자 (=)

let num = 3;
a = a + 3;
a += 6;

• 논리 연산자 : 불리언 타입을 위한 연산자.

! : NOT
&& : AND
|| : OR
연산 순서 : NOT > AND > OR

• 비교연산자

=== : 두 값이 타입까지 완전히 일치하는지 확인
== : 타입은 검사하지 않음
즉, 숫자 1과 문자 '1'을 같은 값으로 인식
0과 false도 같은 값으로 인식
null과 undefined를 같은 값으로 인식
!== : 두값이 일치하지 않는지 확인

• 문자열 붙이기 : 두 문자열을 붙일 때에는 + 로 할 수 있다.

const a = "삼성";
const b = "좋아요";
console.log(a + b); //"삼성좋아요"

• 조건문

1. if 문 : 특정 조건이 true를 반환할 경우에만 if문 안의 코드를 실행한다.

if (조건) {
  코드
}

if문 안과 밖은 블록으로 구분되어져 있기 때문에 const를 이중으로 정의해도 무방

const num = 10
if (true) {
  const a = 5
  console.log('if문 안의 a 값은 ' + a)
}
console.log('if문 밖의 a 값은 ' + a)

2. if-else문 : 둘 중 하나만 실행하고 싶은 분기를 할 때 사용한다.

3. if-else if문 : 여러 조건 중 하나를 실행하고 싶은 분기를 할 때 사용한다.

4. switch/case 문 : 특정 값이 무엇이냐에 따라 다른 작업을 하고 싶을 때 사용한다.
   단, case값부터 시작해서 마지막까지 순차적으로 실행하기 때문에 각 케이스 내용 끝에 break를 써주어야 한다.
   default는 해당하는 case 값이 없을 때 실행하는 코드이다.

함수

• 함수 : 특정 코드를 하나의 명령으로 실행할 수 있게 해주는 기능
  함수를 만들 때는 function 이라는 키워드를 사용하며, 어떤 값을 받아올지를 정해주는데 이를 파라미터(매개변수, 인자)라고 한다.

• 또한 함수 내부에서 return이라는 키워드를 사용하여 결과물을 지정할 수 있다. return은 추가적으로 함수를 종료하는 기능을 가지고 있기 때문에 함수의 마지막이나 임의로 종료하고 싶은 시점에 명시하면 된다.

• 문자열 리턴
  문자열 조합시 +연산자를 사용할 수 도 있지만, 편하게 템플릿 리터럴(template literal)이라는 문법을 사용할 수 도 있다.

function hello(name) {
  console.log(`Hello, ${name}!`);
}
hello('Hong');
//Hello Hong!

• 화살표 함수 : 함수를 선언하는 방식 중 또다른 방법은 화살표 함수 문법을 사용하는 것이다.

const add = (a, b) => {
	return a + b;
};
console.log(add(1, 2)); //3

또는 코드 블럭내에서 간단하게 한줄로 하나의 리턴을 하는 경우 다음과 같이 줄여 쓸 수 도 있다.

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

• 주의할 점은 function에서의 this와 화살표 함수 내에서의 this가 서로 다르다는 것이다.

객체

• 객체 : 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.

const person = {
// 키 : 원하는 값
  name: 'Hong',
  age: 3
};

console.log(person.name);  // Hong
console.log(person.age);   // 30

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

const sample = {
  'key with space': true
};
//함수에서 객체를 파라미터로 받기
const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
    hero.actor
  } 입니다.`; // 템플릿 리터럴 방식을 사용해서 문자열로 출력
  console.log(text);
}

print(ironMan);
//아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.
print(captainAmerica);
//캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다.
객체 비구조화 할당
const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

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

print(ironMan);
print(captainAmerica);
더 나아가면 파라미터 단계에서 객체 비구조화 할당을 할 수도 있다.

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

• 객체 안에 함수 넣기

const person = {
  name: 'Hong',
  sound: '여러분',
  say: function say() {
    console.log(this.sound);  //여기서 this는 객체 자신
  }
};

person.say();
선언할 때는 이름이 굳이 없어도 된다.

const person = {
  name: 'Hong',
  sound: '안녕',
  say: function() {
    console.log(this.sound);
  }
};

person.say();

여기서 함수를 화살표함수로 작성하면 제대로 작동하지 않는데 그이유는 화살표함수의 this가 객체를 가리키지 않기 때문이다.

---