JS 1회차 | 식, 값, 문, 실행(run), 변수를 만드는 방법, 메커니즘, 객체의 특징, 함수를 만드는 방법

참고 사이트

https://playcode.io

Javascript Playground (Sandbox, Repl)

 

 

식

1 + 1 (식)

1 (값)

= 2(값)

==> 식 --> 결국 값이 된다 !

 

값

값의 종류

1. 기본형 값 유형, 원시형

123 // number_숫자
    // Bigint(엄청 큰 숫자를 다룰 때)

'123' // string_문자열
"123" // string
`123` // string

true, false // boolean

null // null_아무것도 없다는 의미

undefined // undefined

Symbol // Symbol

 

2. Object

{object}

 

 

값만 있을 때 단점

- 의미를 표현할 수 없음 (ex. 참은 참인데 무슨 의미 ??) --> 식별자(값에 의미를 부여하는 방법)

// 식별자_age, displayAge

let age = 52

let displayAge = function() {}

class Person {}
// class 식별자

 

식별자 naming 규칙

- 예약어(reserved word)를 쓸 수 없다 (ex. let, const ..)

- 공백을 포함할 수 없음

- 숫자로 시작할 수 없음

- 기호의 사용이 제한적임

문(statement)

= (할당한다, 옮긴다, 연결한다)

 

 

실행(run)

let name = '김민태'
let age = 52

console.log(name)
console.log(age)

// 김민태
// 52
// --> 실행되었다

 

실행이 뭘까 ?

자바스크립트를 이해하는 소프트웨어가 실행하는 것

소스코드(text)는 컴퓨터가 이해할 수 없는 구조임. 컴퓨터가 이해할 수 있는 구조로 바꿔야 함 (변경)

 

--> 실행(run): 메모리에 변경된 코드를 저장해두고 CPU가 한줄 한줄 꺼내서 한번에 하나씩 실행을 시키는 것임

cf. 적재(feche): 메모리에 변경 코드를 옮겨두는 것

cf. 저장(save): 변경된 것을 다시 하드디스크에 저장하는 것

 

js 소스코드는 서버(컴퓨터) 하드디스크에 있음. 

인터넷(network)를 이용해서 연결.

web server(브라우저가 요청하는 html, css, js를 로컬 하드디스크에서 네트워크를 통해 전송해주는 소프트웨어)

 

브라우저에서 실행되는 환경(run time)과 서버에 있는 자바스크립트 환경(source time)은 다를 수 있음

--> 타입스크립트에서 많이 사용

 

식과 문

그것의 결과로 값이 나오는지 안나오는지 유무 확인

 

- 값은 무조건 식이다 ! (ex. '김민태')

- 값이 나오지 않는건 문이다 ! (ex. =, if)

- 문의 역할: 실행의 흐름을 바꿈

let myName = '김민태'
let age = 52
// age는 52로 '평가된다'
// '=': 대입문

// if문
if (age > 40){
  console.log(myName + '늙었어')
} else {
  console.log(myName + '안 늙었어')
}

 

 

변수를 만드는 방법

let b = 10 // 변수
const c = 10 // 상수, 값을 재할당하지 못함

var a = 10 // 거의 안 씀

 

 변수를 아예 안 쓰면 좋음 (?)

let myAge = 80 // 상태(변한다는 뜻)
const dieAge = 80 // 데이터

const result = 1 + 20 // 상수로만 이루어짐
const result2 = 1 + myAge // 결과 예측 불가

 

모든 값은 상수 ! (바꿀 수 없음) 그래서 간접적인 방식으로 변수가 필요한 것임 (변수는 바꿀 수 있으니까)

상수로만 이루어진 코드는 결과가 늘 같음

버그: 코드가 의도대로 작동하지 않는 것

 

 

메커니즘

let myAge = 80;
const dieAge = 80;

// 문장이 끝났다는 뜻으로 ';'를 씀

 

// 함수정의문

function my() {
  const a = 10
  const b = 30
  
  if (a) {
  
  }
}; // 문으로 작성

const my2 = function() {
  let a = 10
}; // 값 = 식, ; 필요

 

let a = 10
let b = 10

let c // undefined

let k = 30
// let k
// k = 30 --> 축약형

let x = 20, y = 30, z = 40

 

 

object

let kimMinTae {
  name: 'mintae',
  age: 52,
  height: 176,
  bloodType: "B"
};
// 값을 묶는 역할

 

중첩 가능

let kimMinTae {
  name: 'mintae',
  age: 52,
  height: {
    head: 20,
    body: 150,
    foot: 5
  }
  bloodType: "B"
};

// 읽기

console.log(kimMinTae.height.head) // 특정 값 출력 가능

 

객체의 동적 바인딩

const myOject = {
  id: 'ibare',
  ['age number']: 30
};

myObject.name = 'person' // 객체의 동적 바인딩
console.log(myObject) // {id: 'ibare', name: 'person'}

console.log(myObject['name']) // console.log(myObject.name)

// 속성 명을 데이터로 입력받게, 코드와 데이터를 분리해줌으로써 
// 프로그램 바깥에서 데이터를 열어 제어할 수 있는 방법을 제시 (유연한 소프트웨어)

myObject['age number'] = 40;
cobsole.log(myObject) // {id: 'ibare', name: 'person', age number: 40}

 

함수를 만드는 방법

let a = 20;
let b = 30;
let result = a * b;

let c = 220;
let d = 530;
let result2 = c * d;

console.log(result2);
// 계산식이 같음 (중복코드)


function add(a, b) {
  return = a * b;
}

let a = 20;
let b = 30;
let result = add(a, b)

let c = 220;
let d = 530;
let result2 = add(c, d)

 

함수의 확장

function add(a, b) {
  return = a * b;
}

let myAdd = add; // 값
let a = 20;
let b = 30;

let result = add(a, b) + 20; // 함수

let c = 220;
let d = 530;
let k = c;
let result2 = myAdd(c, d) // (k, d)랑 같음