자료구조/알고리즘 - 기초 문법(용어, 변수, 상수, 호이스팅, 자료형 , 객체 복사)

📝 overview

• JavaScript는 객체 기반의 스크립트 언어 입니다.
• ECMA Script 사양을 준수하는 범용 스크립팅 언어 입니다.
• Java와는 연관이 없습니다.
• Mocha > Live Script > Java Script로 명칭이 변경 되었습니다.
• JavaScript는 JS엔진 위에서 수행됩니다.(Google V8, Firefox Spider Monkey, Edge Chakra)

❓ ECMA Script

• ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화 된 스크립트 프로그래밍 언어
• 매 해 6월에 버전이 갱신됨

✅ 코드 동작의 흐름

• 프로그래밍
  • 개발자(코딩) ➡️ 스크립트(컴파일러 or 인터프리터) ➡️ 컴퓨터(디버깅)
• 컴퓨터 내부 동작
  • CPU(연산) ➡️ Memory(변수, 상수 등 임시 저장소) ➡️ Disk(JavaScript)

✅ 기본 입출력

• 사용자가 프로그램과 상호작용하기 위한 방법(입력과 출력)
• input과 output의 앞글자를 따서 I/O라고 표기합니다.
• 표준 입력
  • 키보드, 마우스
• 표준 출력
  • 모니터, 알고리즘에서는 정답 확인 및 디버깅

✅ 기본 용어

• 식별자
  • 자바스크립트에서 변수나 함수에 이름을 붙일 때 사용됩니다.
  • 대소문자를 이용하여 유니코드 문자셋으로 작성합니다.
  • 규칙
    • 키워드 사용 X
    • 숫자로 시작 X
    • 특수문자는 _(언더바) 와 $(달러) 만 사용 가능
    • 공백 X

1️⃣ 변수와 상수

• 변수
  * 변경 가능한 값을 저장
  • 사용하기 전 반드시 선언
  • 종복 선언 불가능
  • 키워드 let
• 상수
  • 변경 불가능한 값을 저장
  • 사용하기 전 반드시 선언
  • 종복 선언 불가능
  • 대문자 표기
  • 키워드 const

2️⃣ 호이스팅

• 코드에 선언된 변수 및 함수를 유효한 범위의 코드 상단으로 끌어 올리는 작업
  • let/const는 호이스팅이 발생하지 않음
  • var만 호이스팅이 발생함

3️⃣ 자료형

목적에 따라 특별한 성질이나 정해진 범주를 갖고 있는 데이터 종류
자바스크립트에서는 6가지 원시타입, 1가지 객체타입 으로 구성되어 있음

• 원시타입

  • Boolean : 논리적 값 (true, false)
  • null : 존재하지 않거나, 유효하지 않은 주소 표시
  • undefined : 선언 후 값을 할당하지 않은 변수
  • number : 정수, 실수 등의 숫자
  • string : 빈 문자열이나 글자들을 표현하는 문자열
  • symbol : 문자열과 함께 객체 property로 사용(ES6에 추가됨)

• 객체타입

  • object : 두개 이상의 복잡한 개체를 저장함
  • 다수의 원시 자료형을 포함하거나, 복잡한 객체를 표현할 수 있는 자료형
  • object() / object({}) 중괄호를 통해 생성 가능
  • object는 key: value 형태로 표현하며, 접근 방법은 object.key
  • 객체에 개체를 추가하는 방법은 obj.key = value, 삭제 방법은 delete 명령어를 통해 삭제

✏️ 자료형 확인 방법

• typeof
  • 인수의 자료형을 반환하는 연산자
  • typeof x, typeof(x)로 작성

💡 객체 복사의 문제점

• object 복사
  • 대상 전체가 아닌 object내 주소 값만 복사 되는 문제가 발생
  • 가르키는 대상 전체를 복사하는 방법은 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy)를 통해 가능

1️⃣ 얕은 복사(Shallow Copy)

• 단점 : 객체 내에 또 다른 객체가 있으면 복사가 안됨
  

1. for문을 통한 객체 복사

let user = {
    name: "john",
    age: 23,
};

let admin = {};

// 얕은 복사
for (let key in user) {
    admin[key] = user[key];
}

admin.name = "park";

console.log(admin.name); // john
console.log(user.name); // park

2. Object.assing() 함수 복사

let user = {
    name: "john",
    age: 23,
};

let admin_obj = Object.assign({}, user);

admin_obj.name = "park";
user.age = 30;

console.log(admin_obj.name); // john
console.log(user.name); // park
console.log(admin_obj.age); // 23
console.log(user.age); // 30

3. 전개 연산자 복사

let user = {
    name: "john",
    age: 23,
};

let admin_spread = { ...user };

admin_spread.name = "park";
user.age = 30;

console.log(admin_spread.name); // john
console.log(user.name); // park
console.log(admin_spread.age); // 23
console.log(user.age); // 30

2️⃣ 깊은 복사(Deep Copy)

1. 재귀 함수 복사

let user = {
    name: "john",
    age: 23,
    sizes: {
        weight: 72,
        height: 180
    },
};

function copyObj(obj) {
    let result = {};
    for (let key in obj) {
        if (typeof obj[key] === "object") result[key] = copyObj(obj[key]);
        else result[key] = obj[key];
    }
    return result;
}

let admin = copyObj(user);

admin.sizes.weight++;

console.log(admin.sizes.weight); // 73
console.log(user.sizes.weight); // 72

2. JSON객체 복사

• stringify는 객체를 문자열로 반환하는데, 이때 원본 객체와의 참조가 끊김

let user = {
    name: "john",
    age: 23,
    sizes: {
        weight: 72,
        height: 180
    },
};

let admin_json = JSON.parse(JSON.stringify(user));

admin_json.sizes.weight++;
--admin_json.sizes.height;

console.log(admin_json.sizes.weight); // 73
console.log(admin_json.sizes.height); // 179
console.log(user.sizes.weight); // 72
console.log(user.sizes.height); // 180