[JS] 기본 문법 - part1

✔️ 변수와 상수

var, let

let name; // 변수의 선언
name = 'jiseong'; // 값 할당
var x = 6; // 변수의 선언 및 값 할당

var는 동일한 이름을 갖는 변수 중복 선언 가능, let은 불가능

const

const는 변하지 않는 상수를 정의해줄 때 사용하는 keyword이다.

변수 선언시 주로 const로 사용하여 정의하며 필요한 경우에는 let을 사용한다. (var는 더이상 쓰이지 않음)

const a = 1; 

데이터 타입

자바스크립트의 모든 값은 데이터 타입을 가지며 총 7개의 타입이 존재한다.

원시 타입 (primitive data type)
- number
- string
- boolean
- null       (값이 없음을 의미)
- undefined  (아직 값이 정해지지 않음을 의미)
- symbol (New in ECMAScript 6)

객체 타입 (Object data type)
- object

❓ 참조
자바스크립트는 다른 언어와 다르게 변수를 선언 할 때 데이터 타입을 정하지 않는다. 즉, 변수에 할당된 값에 따라서 데이터 타입이 결정되며 이를 Dynamic typing이라 한다.

✔️ 연산자

산술연산자

+, -, *, /    /* 사칙 연산자 */
++a, a++    /* 전위 후위 증가연산자 */

문자열 연결 연산자

const str = 'My name is ' + 'jiseong'; // "My name is jiseong"

❓ 참조
ES6의 템플릿 리터럴(template literal) (`(Grave accent)를 사용)사용으로도 문자조합 가능

function hello(name) {
  console.log(`Hello, ${name}!`);
}

대입연산자

let color = 'red'; // "red"

논리연산자

!: NOT
&&: AND
||: OR
/* 연산순서는 NOT -> AND -> OR */

그렇다면 !""는 무슨 값으로 나올까?

!False 이므로 true 값이 나온다.

❓ 참조
Falsy 값 목록

• 0
• -0
• false
• undefined
• null
• ""
• ''
• ``
• NaN

그 밖에는 다 Truthy 값

비교연산자

=== /* === 는 타입까지 일치하는지 확인 */
== /* == 는 타입을 검사하지 않아서 숫자 1과 문자 '1' 이 동일한 값으로 간주 */

✔️ 조건문

if, else if, else문 / Switch, case문 존재

✔️ 함수

함수는 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 코드의 집합이다.

함수 선언식 - Function Declarations

function 함수명(parameter...) {
  구현 로직
}

함수명(argument...);

함수 표현식 - Function Expressions

const 함수명 = function (parameter...) {
  구현 로직
};

함수명(argument...);

화살표 함수

함수를 선언하는 또 다른 방법

const add = (a, b) => {
  return a + b;
};

console.log(add(1, 2));

위의 코드처럼 한줄로 하나의 return을 하는 경우 return을 생략할 수도 있다.

const add = (a,b) => a + b;

함수의 호출 pass-by-reference & pass-by-value

함수의 호출방식에서

객체 타입(참조 타입)은 pass-by-reference로 처리된다.

let myObj = {
    value: 10
}

function updateValue(objRef){
    objRef.value = 20;
}

updateValue(myObj);
console.log(myObj); // { value: 20 }

원시 타입은 pass-by-value으로 처리된다.

let num = 10;

function updateValue(value) {
    value = 20;
}

updateValue(num);
console.log(num); // 10

❓ 참조
pass-by-reference & pass-by-value와 call-by-refernce & call-by-value와의 차이는 함수 기준으로 보느냐 인수 기준으로 보느냐의 차이다.

Reference

• https://poiemaweb.com/
• https://learnjs.vlpt.us/