Javascript 기초 문법 Part 1

js 공부하면서 정리해놓은 것들 블로그에 옮기기~🤓

---

객체

let user = {
	name: 'john',
	age: 27
};
console.log(typeof user, typeof user.name, typeof user.age);
// object string number
console.log(user, user.name, user.age, user['age']);
// {name: 'john', age: 27} 'john' 27 27

user.age = 30;
console.log(user.age);  // 30

// 속성 추가
user.height = 180;

// 속성 삭제
delete user.height;

객체 복사 문제점

• 기존 객체를 새로운 변수에 넣은 경우,
  새로운 변수 안에 담긴 객체의 값이 변경되면 기존 객체의 값도 바뀐다.

  let user2 = user;
  user2.name = 'park'
  
  console.log(user2.name);  // park
  console.log(user.name);   // john -> park 으로 변경됨
  
  user.age = 30
  console.log(user2.age);   // 30
  console.log(user.age);    // 27 -> 30 으로 변경됨

• shallow copy(얕은 복사)의 문제점
  객체 내 또 다른 객체가 있다면 복사되지 않는다.

  let user = {
   name: 'john',
   age: 23,
   sizes : {
     height: 180,
     weight: 72,
   }
  };
  
  // shallow copy 1
  let admin = {};
  for(let key in user){
   admin[key] = user[key]
  };
  
  // shallow copy 2
  let admin = Object.assign({},user);
  
  // shallow copy 3
  let admin = {...user};
  
  admin.name = 'park';
  console.log(user.name);   // john
  console.log(admin.name);  // park
  // 이제 기존 변수의 값도 바뀌는 현상은 일어나지 않지만 객체 내부 객체의 값은 값이 바뀌는 현상 유지된다.

• deep copy
  깊은 복사를 해야 객체 내부 객체도 값이 바뀌는 현상을 막을 수 있다.

  let admin = JSON.parse(JSON.stringify(user));
  admin.sizes.height++;
  console.log(admin.sizes.height, user.sizes.height); // 181 180

---

Type

String

console.log(String(123));        // 123
console.log(String(1 / 0));      // Infinity
console.log(String(-1 / 0));     // -Infinity
console.log(String(NaN));        // NaN
console.log(String(true));       // true
console.log(String(undefined));  // undefined
console.log(String(null));       // null

Number

console.log(Number(''));             // 0
console.log(Number('123'));          // 123
console.log(Number('hello'));        // NaN
console.log(Number('123hello'));     // NaN
console.log(Number(123));            // 123
console.log(Number(true));           // 1
console.log(Number(false));          // 0
console.log(Number(null));           // 0
console.log(Number(undefined));      // NaN
console.log(parseInt('123.123'));    // 123 (소수점 제거)
console.log(parseFloat('123.123'));  // 123.123 (소수점 포함)

Boolean

console.log(Boolean(''));         // false
console.log(Boolean('123'));      // true
console.log(Boolean('hello'));    // true
console.log(Boolean('0'));        // true
console.log(Boolean(0));          // false
console.log(Boolean(123));        // true
console.log(Boolean(NaN));        // false
console.log(Boolean(null));       // false
console.log(Boolean(undefined));  // false

---

연산자

• 더하기 : +
• 빼기 : -
• 곱하기 : *
• 나누기(몫) : /
• 증감 연산자 : ++, --

// 몫 구하기
console.log(parseInt(31 / 10));  // 3

// 나머지 연산자 : %
console.log(31 % 10);  // 1

// 거듭제곱 연산자 : **
console.log(2 ** 3);   // 8

// 대입 연산자 : = (오른쪽에 있는 값이 왼쪽 변수에 들어감)
let num_1 = 123;
let num_2 = 456;
let str_1 = 'hello';
let str_2 = 'world';
let num_3, str_3;

num_3 = num_1 + num_2;
str_3 = str_1 + str_2;

console.log(num_3);  // 579
console.log(str_3);  // helloworld

let num_4 = num_1 - num_2;
console.log(num_4);  // -333

// 복합 대입 연산자 : +=, -=, *=, /=, %=
num_1 = num_1 + num_2;
/* ↑ 같은 거 ↓ */
num_1 += num_2;

비교 연산자

• == : 단순 값의 같음을 비교
• === : 자료 형까지 같음을 비교

논리 연산자

• && : AND
• || : OR
• ! : NOT

// A === A && expression
// 조건이 true일 경우 : && 이후에 위치한 expression 반환
const name = 'yezi';
const count = 0;  // 0 = false
function solution(andPrmt,count) {
  console.log(count, !count, !!count);  // 0 true false
  return name === 'yeahzing' && `Hello, ${name}!! Learn React`
}
console.log(solution(name, count));  // Hello, yezi!! Learn React

---

조건문

• if else

삼항 연산자

// 변수 = (조건식) ? 참일 때 값 : 거짓일 때 값
let age = 20;
let msg = age < 19 ? 'You are not adult' :'You are adult';
console.log(msg)  // You are adult

switch

// break, default는 optional

let browser = 'Chrome';
let msg;
switch(browser){
  case 'Explorer':
    msg = 'Bad :('; break;
  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    msg = 'Good :D'; break;
  default:
    msg = 'Soso :|'; break;
}
console.log(msg);  // Good :D
// Chrome에서 참이며 break를 만날 때까지 진행

---

반복문

for

• 기본 for

  for(let i = 0; i < 2; i++){
   console.log('i = ' + i);
   // i = 0
   // i = 1
  }
  
  let num = 0;
  for(; num < 2;){
   console.log('num = ' + num);
   // num = 0
   // num = 1
   num++;
  }
  
  // 2중 for
  for(let f = 0; f < 2; f++){
   for(let s = 0; s < 2; s++){
     console.log(`${f} + ${s} = ${f + s}`);
     // 0 + 0 = 0
     // 0 + 1 = 1
     // 1 + 0 = 1
     // 1 + 1 = 2
   }
  }

• for in (객체 for문)

  // for(key in objName){}
  const person = {fname: 'john', lname: 'park', age: 25};
  let info = '';
  
  for(let x in person){
   info += person[x];
  }
  
  console.log(info);  // johnpark25

• for of (ES6에 추가된 Collection 기반 반복문)

  // for(variable of iterable){}
  let lang = 'hi';
  let text = '';
  
  for(let x of lang){
   text += x;
   console.log(x)
   // h
   // i
  }
  
  console.log(text);  // hi

while

• 기본 while

  let i = 0;
  while(i < 3){
   console.log(i);
   i++;
   // 0
   // 1
   // 2
  }

• do while 반복문

  let i = 4;
  do{
   console.log(i);
   // 4
   i++;
  } while (i < 3)

반복문 제어

• break : 코드 블록을 탈출할 때 사용되는 식별자

  let text = '';
  for(let i = 0; i < 10; i++){
   if(i === 3) break;
   text += i;
  }
  console.log(text);  // 012

• continue : 해당 라인에서 중지 시킨 후 명시된 조건에 따라 재진행

  let text = '';
  for(let i = 0; i < 10; i++){
   if(i === 3) continue;
   text += i;
  }
  console.log(text);  // 012456789

• lable : 특정 영역을 지정하여 이름을 붙이는 식별자
  break나 continue를 사용하는 for문 안에서만 사용 가능하며 for문에 이름 지정하여 사용

  end: for(let i = 0; i < 3; i++){
   for(let j = 0; j < 3; j++){
     console.log(i + 'x' + j + '=' + i * j);  // 0x0=0
     break end;
   }
  }