🪴 In To Programming

• 선언
  let
  특정 이름에 특정 값을 담는 것

let a = b;

• 변수
  바뀔 수 있는 값
  한 번 선언한 변수 이름은 똑같은 이름으로 또 선언할 수 없다. (블록 스코프에선 또 다르다.)

• 상수
  값이 고정적 (수정 X, read only)

(+) 최신 문법으로 작성 후 '바벨' 이용해 구형 브라우저에서도 사용할 수 있게끔 변환 작업을 한다.

null, undefined 차이

• null
  "없다"
• undefined
  "값이 아직 정해지지/설정되지 않았다"

++a / a++의 차이 (다른 산술 연산자도 마찬가지)

• ++a
  기호가 앞에 올 경우
  1 더한/뺀 후의 값이 변수에 담긴다.
  => "계산한 후의 값이 변수에 담김"
  
  
• a++
  기호가 뒤에 올 경우
  원래 a에 담긴 값이 출력되고 그 후에 계산을 된 값이 a에 저장된다.
  => "계산 전의 값이 변수에 담긴다."
  

• += 연산 (다른 산술 연산자에도 마찬가지로 적용된다)

a = 4;
a += 3; 
a = a + 3; 

🌱 논리 연산자

참, 거짓 가리기 위해 사용한다.

• 논리 연산자의 우선 순위
  1. ! (not)
  2. && (and)
  3. || (or)

const value = !((true && false) || (true && false) || !fasle)

// 1. 괄호 안의 논리 연산자 우선 순위 1번 ! -> ! 연산 먼저 처리된다.
// !((true && false) || (true && false) || true)

// 2. () 안의 내용 중 &&부터 처리된다.
// !(false || false || true)

// 3. 괄호 안의 나머지 연산들이 처리된다.
// !(true)

// 4. 마지막 ! 연산 처리
// false

🌱 비교 연산자

1. === : 같은지 비교 연산해준다.
   (=== 쓰는 걸 추천)

• === (= 3개)
  타입, 값 둘 다 비교
• == (= 2개)
  값만 비교

2. !== : 다른지 비교 연산해준다.

• !== (= 2개)
  타입, 값 둘 다 비교
• != (= 1개)
  값만 비교

3. 초과, 미만, 이상, 이하
   초과 >
   미만 <
   이상 >=
   이하 <=

🌱 조건문

1. if문
2. switch문
   경우로 나눠서 해당 경우의 코드 실행한다.

const device = 'iphone';
//switch (확인하고 싶은 것) {}

switch (device) {
  case 'iphone':
    console.log('아이폰 출력!');
    break; // break = "비교 끝났다!" 
    // break 없으면 다음 case까지 실행함.
  case 'galaxy':
    console.log('갤럭시 출력!');
    break;
  default: // 어떤 경우에도 해당하지 않을 때 dafault 실행
    console.log('모르겠네요');
    // default엔 break; 안 붙여도 ok
}
       

🌱 함수

• return
  결과값으로 반환해준다.
  return 실행시 함수 종료
  => return 이후 코드 실행 X
  
  

• return으로 문자열 반환 가능하다.

name = 'bora';
fuction hello (name){
  return `제 이름은 ${name}입니다.`;
}

• 화살표 함수
  이름 없는, 익명 함수.

const num = 5;
//const add = (파라미터) => { ~실행 코드 ~}

// 코드 길 땐 { } 붙여야 함. 
const add = (a, b) => {
  return a+b;	
}

// 이런 식으로도 사용 가능
// 화살표 함수의 유일한 문장이 'return'일 때 'return'과 중괄호 {} 를 생략할 수 있다.
const add = (a, b) => a+b;

문자열 템플릿 리터럴 (백틱 사용)

let name = 'mark';
let month = 8;
let date = 2;
console.log(`제 이름은 ${name} 이고, 오늘은 ${month}월 ${date}입니다. `);

🌱 객체

같은 종류의 정보 집합이라 볼 수 있다.
한 상수/변수 안에 여러가지 정보 담는다.

// keyname : value -> : 로 연결.
// ; 아닌 ,로 연결

const 객체이름 = {
  keyname : 'value',
  keyname : 900 ....
} 

const ironMan = {
  name : '토니 스타크',
  actor : '로버트 다우니 주니어',
  'actor nickname' : '아이언맨'
  // keyname엔 공백 X, 공백 O 경우 'keyname' 이렇게 "" 따옴표를 씌워줘야 한다.
}
console.log(ironMan.name);
console.log(ironMan["actor nickname"]);

• 비구조 할당 = 객체 구조 분해
  특정 값들을 객체에서 빼온다.

const { 사용할keyname1, 사용할keyname2 ... } = 해당object;

console.log(${keyname});
// 이런 식으로 사용이 가능하다.

1. 함수에서도 비구조 할당을 파라미터로 사용이 가능하다.

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

function print({name, actor}){
  const text = `${actor}는 ${name}으로 출연했습니다.`;
  console.log(text);
}
print(ironMan);

//const { alias, name, actor } = hero;
// 상수/변수 {사용할keyname1, 사용할keyname2 ... } = 해당객체이름;

2. 상수, 변수로 출력

const {name} = ironMan;
console.log(name);
// 상수 name의 값이 '토니 스타크'로 할당됨.
// name = 'bora'; <- name이 상수이기 때문에 TypeError: "name" is read-only 오류가 난다.

this ⭐️⭐️

• 함수 function의 this는 자기가 속한 곳 가리킴.
• 화살표 함수 내부에선 this가 뭔지 모른다.
• this 들어간 함수 꺼내면 원래 this가 갖고 있던 관계가 사라진다.

const dog = {
  name: "멍멍이",
  sound: '멍멍!',
  say: function() {
    console.log(this.sound);
    // dog 객체 안에서의 this는 속해있는 dog를 가리킨다.
  }
};

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

cat.say = dog.say;
/* dog.say 뒤에 () <- 안 붙었기 때문에 함수 실행 값이 아닌 함수 그 자체 function() {
    console.log(this.sound);
    } 가 온다.
cat.say = 는 cat 객체에 say라는 keyname을 생성하게 된다.
따라서 cat.say = function() {
    console.log(this.sound);
    } 
이렇게 생성된다.
*/

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

const catSay = cat.say;
/* function() {
    console.log(this.sound);
    } 
이 함수를 상수 catSay에 할당한 것.
(할당만 함! () <- 안 붙였기 때문!)
*/

catSay();
// 함수가 할당된 상수를 실행시켜도 해당 함수 안에 this가 속해있는 곳이 없기 때문에 에러가 난다.

getter / setter ⭐️⭐️

Getter 함수와 Setter 함수를 사용하게 되면 특정 값을 바꾸려고 하거나, 특정 값을 조회하려고 할 때 우리가 원하는 코드도 같이 실행 시킬 수 있다.

• getter
  "조회"
  • getter 함수 실행시 () <- 괄호 안 붙여도 된다.
  • getter 함수를 설정 할 때에는 함수의 앞부분에 get 키워드를 붙인다.

• setter
  "값 설정"

  • setter 함수 실행시, 함수이름(파라미터값) <- 이렇게 해줘야 한다.

  • Setter 함수를 설정 할 때에는 함수의 앞부분에 set 키워드를 붙인다.

  • Setter 함수를 설정 방법
    : ex) numbers.a = 5
    a라는 setter 함수의 파라미터에 5가 들어간다.

• getter, setter 함수
  

// getter, setter 함수 이름은 변수와 완전히 같으면 안 된다.
// getter 함수 선언 방법
// 객체이름.getter함수이름
console.log(dog.name);

// setter 함수 선언 방법
// 객체이름.setter함수이름 = setter함수의 파라미터 값;
dog.name = '뭉뭉이';

// numbers 라는 객체
const numbers = {
  // 변수 설정시, get, set 함수와 완전히 똑같으면 안 된다. _a, a <- 이런 식으로 달라야 함.
  _a: 1,
  _b: 2,
  sum: 3,
  calculate() {
    console.log('calculate');
    this.sum = this._a + this._b;
  },
  // _a값 조회
  get a() { 
    return this._a;
  },
  
  // _b값 조회
  get b() {
    return this._b;
  },
  
  set a(value) {
    console.log('a가 바뀝니다.');
    // value값을 _a값으로 설정한다.
    this._a = value;
    this.calculate();
  },
  
  set b(value) {
    console.log('b가 바뀝니다.');
    // value값을 _a값으로 설정한다.
    this._b = value;
    this.calculate();
  }
};

console.log(numbers.sum);
numbers.a = 5;
numbers.b = 7;
numbers.a = 9;
// 바뀐 a,b의 값이 그대로 적용 되서 또 바꾸지 않는 이상 sum 실행시 계속 같은 값만 출력된다.
console.log(numbers.sum);
console.log(numbers.sum);
console.log(numbers.sum);

🌱 배열

여러 개의 항목이 들어 있는 리스트

• 배열 안에 다양한 데이터 타입이 들어 올 수 있다.
  
  
• 메소드
  • array.push
  • array.length
    등등이 있다.

🌱 반복문

반복문 종류

1. for

   • for of
     배열 반복문

   for (let item(배열원소) of array)

   • for in
     객체 반복문

   for (let item(keyname) in object)

2. while

   • 특정 조건 비교할 때 많이 사용
   • while의 조건문이 'true'일 때 작동한다.
     => 조건문을 언젠가 'false'가 되도록 작성해야 함. 안 그러면 "무한 반복"!!!

• Object method

const doggy = {
  //묶음 1 (내가 보기 쉽게 '묶음'이라고 별명 붙임)
  name : '멍멍이',
  //묶음 2
  sound : '멍멍',
  //묶음 3
  age : 2
}

// 각 묶음들을 배열로 만들어 출력.
// 총 3개의 배열이 만들어진다.
// [[1],[2],[3]]
Object.entries(doggy);

// doggy 객체의 키 이름들만 뽑아서 배열로
Object.keys(doggy);

// doggy 객체의 키 값들만 뽑아서 배열로
Object.values(doggy);

continue / break

• continue
  continue 이후 코드 실행 X, 컨티뉴 이전 코드(반복문 - 다음 조건)로 이동해 그 부분부터 다시 실행한다.

• break
  break 있는 부분에서 바로 종료.
  이후 코드 실행 X

🌱 배열의 내장 함수

• array.forEach()

  • 파라미터 - 함수 ok
  • 배열 안의 원소들에 일괄적인 작업하고 싶을 때
  • 배열로 반환
    
    

• array.map() ⭐️⭐️⭐️

  • 파라미터 - 함수 ok
  • 배열 안의 모든 원소 변환할 때 사용
  • 배열로 반환
    
    

찾은 1번째 원소 값을 출력한다.

• array.indexOf(원소)
  해당 원소의 인덱스 번호 알려준다.

• array.findIndex(function)

  • 파라미터로 함수 쓴다
  • 배열 안의 값 객체 / 특정 조건의 값 확인해야하는 경우에 사용
  • 해당 판별 함수를 만족하는 첫번째 요소의 인덱스를 반환

• array.find(function)
  함수 실행 후 해당 원소(객체 / 원소 ...)의 값을 출력.

https://learnjs.vlpt.us/basics/09-array-functions.html
(예시 모음)

• array.filter(function)
  특정 조건(판별 함수)을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열 출력.
  • 파라미터 - 함수
    
    
    
• array.splice(index, n)
  배열에서 특정 항목 제거할 때 사용.
  사용시 제거한 원소가 배열 형태로 출력.
  • index : 지우고 싶은 항목의 인덱스 번호
  • n : 해당 인덱스 원소부터 그 뒤로 몇 개를 지우고 싶은지
    (n=1 경우, 해당 인덱스 원소만 지움)
    

• array.slice(시작인덱스, 끝인덱스-1)
  배열을 찾아낼 때 사용.
  기존의 배열 건드리지 않는다.

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 1까지 출력.

console.log(sliced); // [10, 20]

// 기존 배열은 그대로
console.log(numbers); // [10, 20, 30, 40]