JS 기초 1 : 자바스크립트, 입출력, 용어, 변수와 상수, 자료형, 객체타입, 객체 복사 문제점

LeetCode

- 온라인 기반 알고리즘 문제 풀이 및 토론 환경 제공하는 플랫폼 사이트

- 자바스크립트, C, C++ 등 인기 있는 코딩 언어 지원

- 글로벌 기업에서 SW 문제해결 인터뷰시 활용

 

JavaScript

- 객체(object) 기반의 스크립트 프로그래밍 언어

- 웹의 동적 동작을 구현하기 위해 제작

 

표준 입력(stdin)

- 컴퓨터의 키보드의 응답을 받아 입력

- 프로그램의 데이터 추가하기 위한 입력 장치

 

표준 출력(stdout)

- 컴퓨터의 모니터에 출력

- 프로그램의 실행 상태나 실행 결과를 보고 판단

- 알고리즘에서는 문제의 정답 확인, 디버깅 용으로 사용

 

식별자

- 스크립트에서 변수나 함수에 이름을 붙일 때 사용하는 단어

- 자바스크립트 내 식별자 규칙

    - 키워드 사용 불가

    - 숫자로 시작 불가

    - 특수문자는 _와 $만 허용 

    - 공백 문자 포함 불가

 

변수

- 변경 가능한 값을 저장하기 위한 기억 공간

- 사용하기 전 반드시 선언 필요

- 중복 선언 불가

- 키워드 : let

 

상수

- 변경 불가능한 값을 저장하기 위한 기억 공간

- 선언과 동시에 값 초기화 해야함

- 중복 선언 불가

- 키워드 : const

//선언 후 할당
let hi;
hi = "hello";

//선언과 동시에 초기화
let halo = "hallo";

// 한 줄에 여러 변수 선언하고 초기화
let name = "john", age = 13, msg = "hello";

//상수는 보통 대문자로 표기
const BIRTHDAY = 12.21;

 

호이스팅(Hosting)

- 변수에 선언된 함수를 유효한 범위의 코드 상단으로 끌어 올리는 작업

- var의 변수/함수 선언만 위로 올려지고, 할당은 올려지지 않음

- let/const 변수 선언과 함수 표현식에서는 호이스팅 발생하지 않음

console.log(name);
var name= "John"
console.log(name);

//hosting 실제 동작
var name;
console.log(name);
name= "John"
console.log(name);

 

자료형 종류

- 목적에 따라 특별한 성질이나 정해진 범주를 갖고 있는 데이터 종류

구분	데이터 타입	설명
원시 타입(primitive type	Boolean	논리적 값으로 true, false
	null	존재하지 않거나 유효하지 않은 주소 표기
	undefined	선언 후 값을 할당하지 않은 변수
	number	정수, 실수 등의 숫자, 정수의 한계는 +-2의 53승
	string	빈 문자열이나 글자들을 표현하는 문자열
	symbol	문자열과 함께 객체 property로 사용
객체 타입(object type)	object	두 개 이상의 복잡한 개체 저장 가능

 

typeof

- 인수의 자료형을 반환하는 연산자

let str = "hello, world"
console.log(typeof str) // string
console.log(typeof 123); // number
console.log(typeof 456n); // bigint
console.log(typeof 123.123); // number
console.log(typeof true); // boolean
console.log(typeof "hello"); // string
console.log(typeof Symbol("id")); //symbol
console.log(typeof Math); // object
console.log(typeof null); // 하위 호환성으로 오류였던 object 그대로 사용
console.log(typeof console.log); // function

 

boolean

- 논리적인 값을 표현하는 자료형

- 참인 true와 거짓인 false 두가지 값만 존재

- 주로 조건문 등에서 동작 판단의 기준으로 사용

let value_check = 10 > 3; // 비교 결과: 참 > true
console.log(value_check);

 

null

- 비어 있다는 의미로 표현되는 자료형

- 존재하지 않는(nothing), 비어 있는(empty), 알 수 없는(unknown) 값을 나타내는데 사용

- 변수 내의 값이 비어있는지 판단할 때 사용

const null_check=null;
console.log(null_check === null);

 

undefined

- 값이 할당되어 있지 않은 상태를 나타낼 때 사용되는 자료형

- 변수 선언 후 초기화 하지 않는다면 undefined가 자동으로 할당

- 변수 값이 할당되었는지 판단할 때 사용

 

number

- 정수, 부동소수점(floating point) 숫자를 표현하는 자료형

- 관련된 연산은 사칙 연산이 대표적

- 숫자 외에 infinity, -infinity, NaN(Not a Number) 같은 특수 값이 포함

- 2의 53승 보다 큰 값을 사용하고 싶다면 bigint 사용해야 함

let num_1 = 123.0;
let num_2 = 123.456;
let num_3 = 1/0;
let num_4 = 123n;

console.log(num_1-num_2); // -0.45600000000000307 
console.log((num_1 - num_2) .toFixed(3)); // -0.456
console.log(num_3); // Infinity 
console.log(num_1 / "hello"); // NaN
console.log(typeof num_4); // bigint

 

string

- 문자나 문자열을 표현하는 자료형

- 표현 방법은 큰 따옴표 "", 작은 따옴표 '', 역 따옴표(backtick) ``

- 백틱은 문자열 안에 변수를 같이 쓸 수 있음 ${} 안에 변수 입력

let str_1 = "hello";
let str_2 = 'hello';

let num = 3;
let str_3 = `hello_${num}` // hello_3
// let str_4 = hello_${num}; //SyntaxError: Unexpected token '{'
// let str_5 = hello_$(num); // ReferenceError: hello_$ is not defined


console.log(str_3);
// console.log(str_4);
// console.log(str_5);

 

object

- 다수의 원시 자료형을 포함하거나 복잡한 개체(entity)를 표현할 수 있는 자료형

- Object() 혹은 Object({})를 통해 생성

- 쉼표로 구분

- 개체는 key:value 형태로 표현하며, 접근은 object.key 형태로 표현

let user = {
  name: "Rookie",
  age: 26
};

console.log(typeof user); // object
console.log(typeof user.name); // string
console.log(typeof user.age); //number

console.log(user); // { name: 'Rookie', age: 26 }
console.log(user.name); // Rookie
console.log(user.age); // 26

 

- 객체에 개체(entity) 추가는 obj.key = value, 삭제는 delete 명령어를 통해 수행

let user = {
  name: "Rookie",
  age: 26
};

console.log(user); // { name: 'Rookie', age: 26 }

user.weight = 50;
console.log(user); // { name: 'Rookie', age: 26, weight: 50 }

delete user.age;
console.log(user); // { name: 'Rookie', weight: 50 }

 

object 복사

- 대상 전체가 아닌 object 내 주소 값만 복사되는 문제 발생

- 가리키는 대상 전체를 복사하는 방법은 얕은 복사(Shallow copy), 깊은 복사(Deep copy)로 가능

 

얕은 복사

1. 반복문 for 문을 통한 객체 복사

2. Object.assing() 함수를 이용한 복사

3. 전개 연산자(Spread Oprerator)를 이용한 복사

 

얕은 복사 문제점

- 객체 내 또 다른 객체가 있다면 복사되지 않음 

- 주소값을 복사하는 것이기 때문에 객체 내의 객체가 수정되면 기존값도 바뀜

let user = {
  name: "Rookie",
  age: 26,
  sizes: {
    height : 170,
    weight : 60,
  }
};

// let admin = {...user} // shallow copy problem
let admin = {...user};

admin.sizes.height++; // 170 -> 171
console.log(admin.sizes.height); // 171
console.log(user.sizes.height); // 171

 

깊은 복사

- 기존 객체 값을 유지하는 방식으로 얕은 복사의 문제를 해결할 수 있음

1. 재귀 함수 이용

- for 

 

2. JSON 객체 이용

- 객체를 문자열로 변환, 문자열을 다시 객체로 변환하는 방식으로 각각의 연산이 보존

-  JSON.parse(JSON.stringify(__));

let user = {
  name: "Rookie",
  age: 26,
  sizes: {
    height : 170,
    weight : 60,
  }
};

// stringify: js object -> string, parse: string -> js object
let admin = JSON.parse(JSON.stringify(user));

admin.sizes.height++; // 170 -> 171
console.log(admin.sizes.height); // 171
console.log(user.sizes.height); // 170

 

---

1~10강 후기 

강사님의 코드창이 너무 작아서 입력할 때는 전체보기를 해야하는데 ㅠㅠ

실습하랴 블로그쓰랴 강의보랴 이래서 서브 모니터를 사는구나^^

 

html, css 보다는 확실히 원리나 근본을 배우는 느낌이다. (결론 : 졸리다)

그래도 개념을 이해하는 재미가 있다. 

 

무엇보다 왠만한 코딩 테스트도 풀 수 있을 거라는 강사님의 말을 믿고믿고 

나머지 강의도 파이팅