JS 문법 - 기본 용어와 자료형

KODYwiththeK·2022년 12월 2일

자바스크립트 제로베이스 프론트엔드 스쿨

JavaScript

목록 보기

1/32

JS 문법 - 기본용어와 자료형

Class: 제로베이스
Created: November 28, 2022 4:01 PM
Type: Javascript
강의 명: 이론부터 실전까지 모든 것을 담은 자료구조/알고리즘

자바스크립트의 입출력

사용자가 프로그램과 상호작용하기 위한 방법으로, 입력과 출력을 아우르는 개념

운영체제에서의 대표적인 입출력은 “표준 입력 / 표준 출력 / 표준 오류 출력”

표준 입력

일반적으로 컴퓨터의 키보드의 응답을 받아 입력

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

알고리즘에서는 문제의 testcase 입력을 위해 사용

표준 출력

일반적으로 컵퓨터의 모니터에 문자열로 출력

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

알고리즘에서는 문제 정답확인 혹은 디버깅 용도로 많이 사용

기본 용어

자바스크립트는 문법의 대부분을 c, c++, JAVA로부터 차용해서 제작된 스크립트 기반 언어

다수의 표현식으로 하나의 명령문이 만들어지고, 명령문으로 프로그램 수행

하나의 명령문 끝은 개행 문자 혹은 세미콜론으로 표시

표현식 → 명령문 → 응용프로그램

키워드

자바스크립트에서 문법을 만들 때 미리 정해진 용도로 동작하기 위해 정의해 놓은 단어

키워드 목록은 코드를 작성하며 알 수 있고, 변수로 작성이 불가하다.

식별자

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

대소문자를 구별하고 유니코드 문자셋을 이용

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

키워드 사용 불가
숫자로 사용 불가
특수문자는 _와 $만 사용 가능
공백 문자 포함 불가

주석

프로그램 구현 시 개발자의 설명 및 이해를 쉽게 도와주는 문장으로 실제 실행 코드에는 포함되지 않음
주석의 종류는 단일 행 주석 “//” 과 다중 행 주석 /* */이 존재한다.

변수와 상수

변수는 선언 후 할당하건, 선언과 동시에 초기화하는 등, 중간에 코드에 의해 변경될 수 있는 소지가 충분함, 그 소지를 차단하기 위해 상수를 많이 사용한다.

변수

변경 가능한 값을 저장하기 위한 기억 공간(메모리)
사용하기 전 반드시 선언이 필요하다
중복선언이 불가하다.
키워드: let
let A ⇒ 변수의 선언
A = 456; ⇒ 변수의 접근(A 라는 공간에 456을 넣음)

상수

변경 불가능한 값을 저장하기 위한 기억 공간
사용하기 전 반드리 선언 필요
중복선언이 불가하다.
키워드: const
상수는 선언과 동시에 값을 초기화 해줘야한다.
상수는 변수와 구별하기 위해, 보통 모두 대문자로 상수명을 작성한다.

호이스팅

코드에 선언된 변수 및 함수를 유효한 범위의 코드 상단으로 끌어 올리는 작업
var의 변수/함수의 선언만 위로 올려지고, 할당은 올려지지 않는다.
let/const 변수 선언과 함수 표현식에서는 호이스팅이 발생하지 않는다.

JS 자료형

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

자바스크립트에서는 6가지의 원시 타입 자료형과 1가지의 객체타입 자료형으로 구성

원시타입

boolean - 논리적 값으로 true, false
null - 존재하지 않거나 유효하지 않은 주소 표시
undefined - 선언 후 값을 할당하지 않은 변수
number - 정수, 실수 등의 숫자, 정수의 한계는 2의 53승.
string - 빈 문자열이나 글자들을 표현하는 문자열
symbol - 문자열과 함께 객체 property로 사용

객체 타입

object - 두개 이상의 복잡한 개체 저장 가능

원시 타입

typeof

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

console.log(typeof 123);  //number
console.log(typeof 456n);  //bigint
console.log(typeof 123.123);  //boolean
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 두가지만 저장

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

null

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

존재하지 않는, 비어있는, 알수 없는 값을 나타내는데 사용

undefined

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

number

정수, 부동소수점 숫자를 표현하는 자료형

number와 관련돤 연산은 사칙연산이 대표적

number에는 일반적인 숫자 외에 infonity, -infinity, NaN 같은 특수 숫자 값이 포함

number 에서는 2^53 -1보다 큰 값을 사용할 수 없으며, 더 큰 정수를 다루고 싶다면 bigint 자료형을 사용해야 한다.

소수점에 대한 처리가 100% 확실한 처리가 어렵다. Math를 통해 결과를 깔끔하게 만들 수 있음

string

문자, 문자열을 표현하는 자료형

큰따움표, 작은 따옴표, 역 따옴표(백틱)을 통해 표현할 수 있다.

역 따옴표(백틱)을 활용할 때는, 문자열 안에 변수를 같이 사용할 수 있다.

객체타입

object

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

Object() 클래스 혹은 중괄호 { } 리터럴방식을 통해 생성한다.

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

스크린샷 2022-11-28 오후 5.22.46.png

객체는, 선언된 변수 내에는 메모리 주소만을 저장하고, 참조(referenc)를 통해 실제 데이터는 다른 곳에 저장되고, 그 곳에 대한 데이터에 접근할 수 있다.

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

user.weight = 65;  // <- 객체에 새로운 속성과 값 추가
console.log(user)  // { name: 'kody', age: 25, weight: 65 }

delete user.age;  // <- 객체에 있던 속성과 값 삭제
console.log(user);  // { name: 'kody', weight: 65 }

객체에 개체 추가는 obj.key=value, 삭제는 delete 명령어를 통해 수행 가능하다.

객체 복사 문제점

let user = {
  name : 'kody',
  age: 25
};

let admin = user;

console.log(admin);  // { name: 'kody', age: 25 }

admin.name = 'park'  
console.log(admin.name);  // park
console.log(user.name);  // park

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

let user 의 주소를 admin과 같은 주소로 변경했기 때문에, 두 변수가 가리키는 주소가 같다.

따라서 두 변수는 이름만 다를 뿐, 같은 주소를 가리키는 변수이다. 때문에 둘 중 하나의 속성값만 바뀌어도 다른 변수에 까지 영향을 미친다.

object 복사

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

가리키는 대상 전체를 복사하는 방법은 “얕은복사와 깊은복사 “를 통해 가능하다.

객체를 다룰 때는 주소에대한 개념을 유념해야한다.

얕은 복사

반복문 for 문을 통한 복사

let user = {
  name : 'kody',
  age: 25
};

let admin = {}; // admin 을 빈 객체로 정의하고

for(let key in user) {
  admin[key] = user[key]; // 반복문을 통해 키 값을 복사
}            // 이제 두 개가 다른 주소를 가진 객체 이므로

admin.name = "park"
console.log(admin.name); // admim의 키 값이 바뀌어도
console.log(user.name); // user에게 영향을 주지 않는다.

Object.assign( ) 을 통한 복사

let user = {
  name : 'kody',
  age: 25
};

let admin = Object.assign({}, user)

admin.name = "park"
console.log(admin.name); // park
console.log(user.name);  // kody

전개연산자를 이용한 복사

let user = {
  name : 'kody',
  age: 25
};

let admin = {...user}

admin.name = "park"
console.log(admin.name); // park
console.log(user.name);  // kody

하지만 객체 내의 또 다른 객체가 있다면 복사되지 않는다.

깊은 복사

재귀함수를 이용한 깊은 객체 복사

let user = {
  name : 'kody',
  age: 25,
  sizes: {
    height: 180, weight: 72
  },
};

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

JSON 객체를 이용한 깊은 복사, stringhify는 객체를 문자열로 변환하는데 이 때 원본 객체와의 참조가 끊긴다.

let user = {
  name : 'kody',
  age: 25,
  sizes: {
    height: 180, weight: 72
  },
};

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

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

KODYwiththeK

일상 속 선한 영향력을 만드는 개발자를 꿈꿉니다🧑🏻‍💻

다음 포스트