😶‍🌫️먼저 사담으로 몇마디 적고 시작하겠다.

사실 진작 회고록을 작성해야했는데 미룸의 달콤한 유혹에 빠져 하지 못하고 있었다.

(물론 어디에서 시작해야할지 정말 진지하게 고민해서 늦춰진것도 있지ㅁ...ㅏ..ㄴ)

그래서 먼저 했지만 적지 못한 회고록은 빠른 시일내에 올릴 예정이다.

자, 그럼 자바스크립트의 기본을 보며 정리해 보겠다. 가보자고!!

1. 변수 선언, 대입 연산자

• 변수 선언 키워드: var, let, const
  • 키워드 우측에 변수의 이름을 작성
• 대입 연산자 키워드: =

  • 키워드 좌측에는 대입 할 변수를, 키워드 우측에는 대입 할 값을 작성

    💡 += -= variable++ variable-- 와 같은 구문 설탕도 있다고 합니다.

🙄 근데 구문 설탕이 뭐지?

아... 궁금하다... 요리할때 설탕넣는 것처럼 그런 조미료 역할을 말하는 건가...?

가즈아 구글링 !!! ☆: .｡. o(≧▽≦)o .｡.:☆

syntactic sugar

   • 문법적 설탕, 구문적 설탕, 구문 설탕, 신택틱 슈거
   • 사람이 이해하기 쉽고 표현하기 쉽게 컴퓨터 언어를 디자인해 놓은 문맥
   • 사람이 사용하기 달콤하다는 것에 유래가 되었고 깔끔하고 명확하게 표현가능하다는 특징이 있다.
   • 주로... 내부적인 동작은 기존과 동일하지만, 어떤 구현 방식에 맞추어 새로운 문법을 제공하는 경우를 가리킨다.

예시

get_array(Array, vector(i, j)) → Array[i,j]
set_array(Array, vector(i,j), value) → Array[i,j] = value

내가 이해한 바로는

구문설탕 = 조미료

같은 느낌..?

천연재료 = 요리시간 오래걸림(준비할거 많음), 조미료 = 물+조미료 끝 (간편하고 쉬움)

어쨌든 다시 돌아와서 다음걸 봐보자

2. 비교 연산자

• ===

  • 양쪽에 위치한 값이 같은 경우 true로 평가되며, 다른 경우 false로 평가됩니다.

• !==

  • 양쪽에 위치한 값이 다른 경우 true로 평가되며, 다른 경우 true로 평가됩니다.
  • ! 가 값을 부정하는 Not의 의미로서 사용됩니다.

• > , <

  • 수학에서의 비교 기호와 똑같습니다.
  • > 는 좌측에 위치한 값이 더 클 때에만 true로 평가되며, 양쪽의 값이 같거나 우측에 위치한 값이 더 큰 경우 false로 평가됩니다.
  • < 는 반대로 우측에 위치한 값이 더 클 때에만 true로 평가되며, 양쪽의 값이 같거나 좌측에 위치한 값이 더 큰 경우 false로 평가됩니다.

• >= , <=

  • = 기호가 붙어 양 쪽의 값이 같은 경우에 true로 평가된다는 점이 위와 다릅니다.
  • >= 는 좌측에 위치한 값이 더 크거나 우측에 위치한 값과 같을 때에만 true로 평가되며, 우측에 위치한 값이 더 큰 경우 false로 평가됩니다.
  • <= 는 우측에 위치한 값이 더 크거나 좌측에 위치한 값과 같을 때에만 true로 평가되며, 좌측에 위치한 값이 더 큰 경우 false로 평가됩니다.

• == , !=

  • ==는 === 와 같은 기능을 하는 연산자이나, 사용하지 않는것을 권장합니다.
  • !=는 !== 와 같은 기능을 하는 연산자이나, 사용하지 않는것을 권장합니다.
  • 자바스크립트는 자동 형변환 기능을 가졌는데, 가볍게 보면 매우 편리한 기능이지만 알고보면 버그를 만들기 매우 쉬운 위험한 문법으로 받아들여야 합니다.
    • 자동 형변환이 적용되는 경우, 예시로 '10' == 10 의 결과가 true 로 평가됩니다.
      숫자 자료형을 가진 값에 자동 형변환이 적용되는 경우, 문자열로 변환이 가능하다고 여겨 '10' === '10' 처럼 동작한다고 이해하면 됩니다.
  • == != 두가지 모두 위와 같은 동작을 포함하며, 버그를 유발하기 쉬운 문법이므로 === !== 를 사용하도록 버릇들이는게 좋습니다!!

  *출처 : 항해99 자바스크립트 기본(1)

아 파이썬언어랑 비슷한데 조금씩 다르구나 ... 이런 엉엉😭

자... 예시로 파이썬에서는 == 로 썼는데 이제는 === 로 쓰는걸 습관화 해야할거 같다.

하지만 오히려 좋아 ! 기초부터 다시 제대로 쌓아보자고!

🍗 다시 하나하나 뜯어봅시다 ! 🍗

3. 자료형

1) Boolean(불리언)

• 원시 자료형 중 하나
• true(참) 혹은 false(거짓) 값으로만 표현할 수 있습니다.

2) String (문자열)

• 원시 자료형 중 하나
• '값' 또는 "값" 와 같이 외따옴표, 쌍따옴표나 외따옴표를 쌍으로 값을 묶어 표현합니다.

3) Number (숫자)

• 원시 자료형 중 하나
• 10 처럼 어떠한 따옴표나 콤마 등을 넣지 않고 숫자 값으로 표현합니다.
• 10 !== '10' 두 값은 다른 자료형을 가지고 있기 때문에 같다고 볼 수 없습니다.

4) undefined

• 원시 자료형 중 하나
• 값이 할당되지 않은 변수는 기본적으로 undefined 값을 가집니다.

5) null

• 원시 자료형 중 하나
• 어떤 값이 비어있음을 의도적으로 표현할 때 사용됩니다.

6) Object (객체)

• { key1: value, key2: value } 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있습니다.
• 다른 언어에서는 이와 같은 자료형을 Dictionary(딕셔너리)로 부르기도 하지만 JS에서의 공식 명칭은 Object입니다.
• key를 기준으로 객체에 있는 value(값)에 접근할 수 있습니다.
• 객체의 key에 접근하는 방법은 두가지 표현이 존재합니다.

  • obj.key

  • obj['key']

    const person = {
    	name: '강승현',
    	age: 52
    };
    
    person.name;
    // Print: '강승현'
    
    person['name'];
    // Print: '강승현'
    
    person.hobby;
    // Print: undefined

• 만약 유효한 자바스크립트 식별자를 사용하지 않는 경우 반드시 obj['key'] 와 같은 표현식을 사용해야 합니다.

  const person = {
  	name: '강승현',
  	age: 52,
  	'raising dog': '푸들',
  }

  여백(스페이스), 대쉬(-) 등 허용되지 않은 문자열이 포함된 경우 변수를 만들 수 없는것처럼 object의 키로 사용하기 위해서는 따옴표로 감싸야 합니다. person.'raising dog'는 참조가 불가능하지만, person['raising dog']로 하는 경우 참조가 가능합니다.

7) Array(배열)

• [value, value2, value3] 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있습니다.
• 다른 언어에서는 이와 같은 자료형을 List(리스트)로 부르기도 하지만 JS에서의 공식 명칭은 Array입니다.
• 배열에는 Index라고 하는 개념이 존재하며, value에 접근 가능하게 해주는 식별자입니다.

  • 비유하자면 책의 목차(Index)에 있는 페이지 수와 같으며, 목차를 보고 해당 페이지를 펼치면 원하는 내용(value)을 볼 수 있는것과 같습니다.

  • Index의 최소 값은 0입니다.

    const names = ['강승현', '홍길동', '김아무개'];
    
    names[0];
    // Print: '강승현'
    
    names[2];
    // Print: '김아무개'
    
    names[3];
    // Print: undefined

  8)NaN
• Not a Number의 줄임말이며, Number 자료형에 속하지만 중요하므로 따로 짚고 넘어갑니다!
• 숫자가 아닌 값을 숫자로 변환하는 경우 NaN으로 반환됩니다.
• ❓ 그렇다면 NaN는 어떻게 판별할까요?
  • NaN은 다른 모든 값과 비교했을 때 같지 않으며, 다른 NaN과도 같지 않습니다.
  • NaN의 판별은 Number.isNaN() 또는 isNaN()을 이용하면 제일 분명하게 판별할 수 있습니다.

9)Function (함수)

함수는 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용됩니다.

• 아래와 같은 형태로 표현할 수 있으며, 위의 예시에서는 getMyName이 함수의 이름이 됩니다.

  function getMyName() {
  	return '함수가 반환할 값';
  }
  
  getMyName(); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
  // Print: '함수가 반환할 값'

• 아래와 같은 형태로 변수에 할당이 가능합니다. (일급 객체)

  const variable = function() {
  	return '함수가 반환할 값';
  }
  
  variable(); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
  // Print: '함수가 반환할 값'

• Argument(인수 또는 인자)를 입력 받을 수 있습니다.

  function getMyName(myName) {
  	return myName;
  }
  
  getMyName('인자를 넣습니다.'); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
  // Print: '인자를 넣습니다.'

  *출처 : 항해99 자바스크립트 기본(1)

  

긍정적인건 다행히 몇개는 파이썬에서 나온 언어와 유사한게 있다는거다. 하지만 이걸 적재적소에 사용할 생각을 하면 다시 아찔해져온ㄷㅏ....

우선 당장에 기억나는건 f ' ' , function 정도..? ㅋㅋㅋㅋㅋ...

원래 쌓아갈때 재미있는거라고 했다. 😮‍💨

4. 불리언 연산

• [Truthy] 한 값은 true로 평가되며, [Falsy] 한 값은 false로 평가되는 연산 방식입니다.
• Falsy 값에는 빈 문자열 '', 숫자 0, 불리언 false, null, undefined, NaN가 해당됩니다.
• Falsy 값이 아닌 모든 값은 Truthy 값으로 연산되며 결국 true로 평가된다고 이해할 수 있습니다.
• 항상 Truthy 로 판단되는 자료형이 있습니다. (중요!!)
  • Array
  • Object
• 다른 자료형을 가진 값에 강제로 불리언 연산을 적용하려면 Boolean 함수를 사용할 수 있습니다.
  • Boolean('String') → true
  • Boolean('') → false
  • Boolean(undefined) → false

내가 현재까지 이해한 수준은 불리언 = 참, 거짓 평가해주는거

공식문서를 찾아보았다.

Truthy : falsy로 정의되지 않는한 모든 값은 참

false, 0, -0, 0n, "", null, undefined,NaN 를 제외한 모든 값이 참

Falsy : 불리언에서 만났을 때 거짓으로 간주 되는 값

공식문서링크 Truthy

5. 조건문

• 조건문은 조건이 충족할때만 특정 구문을 실행하기를 원할 때 사용합니다.

• 논리적인 로직을 표현할 때 가장 중심이 되는 구문이며, 프로그래밍의 꽃이라고 해도 과언이 아닙니다.

• 조건에 들어가는 값은 항상 불리언 연산이 적용됩니다.

• if ... else 문

if (condition1) // 명령문1
else // 명령문2

• if...else + Block

if (condition1) {
  // 명령문1
} else {
  // 명령문2
}

• if...else + Block

if (condition1) {
  // 명령문1
} else {
  if (condition2) {
	  // 명령문2
	} else {
		if (condition3) {
		  // 명령문3
		} else {
		  // 명령문4
		}
	}
}

여기에서 조건에 대해 여러 명령문을 묶어서 실행하기 위해서는 반드시 (block {})으로 묶어야 한다고 한다.

(block {}) 은 항상 사용해도 문제가 없다고 하네요 !

📌 우선 여기까지가 기본 (1) 이다 (1)... 이것만해도 봐야할게 많네... 😭

😊 그래도 이렇게 적으면서 정리하니까 글로 읽을때보다 훨씬 더 잘 정리되는 느낌이라 기분이 좋다. 🌞

다음에는 과제가 있어 과제 포스팅을 해보기로 합시다 !!