[2023 신입부원 기초 스터디] 박승환 #4주차- js야 안녕!!^^

@@드디어 HTML과 CSS를 배우고 Java Script를 배울 시간이 왔다...! 처음에는 파이썬과 비교하면서 자바스크립트를 배우려 했지만 다시 생각해봤더니 그냥 자바스크립트 그대로를 처음 프로그래밍 언어를 배우는 것 처럼 배워야겠다는 생각이 들었다. 새로운 프로그래밍 언어인 만큼 기초를 탄탄하게 잡아야겠다!!!!@@

 

확장자 파일 --> 확장자파일명.js

변수

변수를 할당할 때는 

let 변수명 = 값;으로 변수를 할당한다.

let hi = '박승환';

hi = '안녕하세요';                    

 

변수의 값을 변경하기 위해서는  그다음 줄에 변수명 = 값2;를 작성 하면 되는데 

여기서 중요한 것은 또 다시 let 변수명 = 값2를 하면 에러가 뜬다는 것이다.

 

 html파일에 script 태그 를 이용하여 js파일을 연결하고 consol.log(변수명); 을 작성하고, 사이트를 열면 화면에는 아무것도 안뜨지만 개발자 모드에서 콘솔을 보면 내가 작성했던 변수의 값이 적혀있는 것을 볼 수 있다.

 

**모든 문장 끝에 ' ; '를 작성해야하는 것 같다.**

 

상수

상수:  변하지 않고 일정한 값

const hello = '안녕하세요!!';

 const 상수명 = 값;을 하면 되는데 여기서도 앞서

변수와 같이 상수명 = 값2;를 할 수 없다. 또한 재할당도 안된다.

변수는 let 변수명;을 하고 다음줄에 변수 값을 지정할 수 있어 초기화를 나중에 해도 되지만

상수는 초기화 작업이 무조건 필요하다. (한 줄에 값을 작성하는 것)

 

이름 작성 규칙

• 변수나 상수 이름의 첫 번째 글자는 영어, $, _ 만 가능
• 첫 글자 이외에는 숫자 가능
• 영어 소문자 대문자 구분 
•  키워드와 똑같은 이름의 변수 상수 이름은 작성 불가
• 공백 문자 허용 x 

 

원시 데이터 타입 

객체가 아니면서 매서드도 가지지 않는 데이터

(string, number, bigint, boolean, undefined, null, symbol)

const number = 123;

console.log(typeof number);

콘솔에서 number 확인 가능

const number = 123n;

console.log(typeof number);

bigint - 숫자 뒤에 n붙여주기

콘솔에서 bigint 확인 가능 

 

string은 값에 ' ', " ", ` `(백틱)를 작성

const name = '박승환';

console.log(typeof name);

콘솔에서 string확인 가능 

 

백틱을 사용하면 한번에 문장 작성가능

const job = '개발자';

const age = 20;

const msg = `저는 ${job}이고, ${age}살 입니다.` ;

콘솔에서 '저는 개발자이고 20살입니다.' 확인 가능 

변수를 사용할 때 $(변수명)사용

 

boolean 참 or 거짓 확인

const isTrue = true

console.log(isTrue );

콘솔에서 boolean 확인 가능

 

null 값이 아예존재하지 않는 것을 의미

undifined 값이 아직 정해지지 않았다. 

let hello;                    #< -- 값을 초기화(지정) 안함.

console.log(hello);

콘솔에서 undifined 확인 가능

참조데이터타입

 

배열 []

const arr = [1, 2, 3];

console.log(arr);

0 ,1 ,2 는 인덱스(배열의 위치)를 의미함.

const arr = [1, 2, 3];

console.log(arr[0]);

콘솔에서 1 확인 가능

 

 

객체 {}

키명 : 값, 

키명2 : 값2

 

const obj = {

  name: '박승환',

  job: '개발자',

};

console.log(obj);

console.log(obj.name);

<점 표기법>

console.log(obj['name']);

<대괄호 표기법>

 

둘다 콘솔에서 박승환 확인 가능

 

const arr = [1, 2, 3,[4, 5]];

<배열안에 베열 중첩 가능>

 

const arr = [1, 2, 3,{name : '박승환'}];

<배열안에 객체 넣기 가능>

 

const obj = {

  arr : [1, 2, 3],

  something : {

    name : '박승환',

  }

};

<객체 안에서도 배열과 객체 중첩 가능 >

 

산술연산자

• +(더하기)
• -(빼기)
• *(곱하기)
• /(나누기)
• %(나머지)
• **(제곱)

console.log(10/5);

콘솔에서 2확인 가능

 

증감연산자

let number = 10;

number++;

console.log(number);

++ 은 1증가

콘솔에서 11확인 가능

--는 1 감소

콘솔에서 9 확인 가능 

 

비교연산자

> , <, =>, <=, ==, ===

!== 같지 않다

 

== 와 ===의 차이

a = 123

b = '123' 이면

a == b 는 true(추상비교)

a === b는 false(엄격비교)

 

논리연산자 

&&(and) 둘다 참이여야지 참

||(or) 하나만 참이여도 참

!(not) 참은 거짓으로 거짓은 참으로 부정

 

삼항 연산자 

(조건 ? 참일 때 실행될 부분 : 거짓일 때 실행될 부분)

console.log(2 < 3 ? '참' : '거짓');

콘솔에서 '참' 확인 가능

Nullish 연산자(??)

여러개의 피연산자중 값이 확정되어있는 변수를 찾음.

const a = undefined;

const b = null;

const c = '박승환';

console.log(a ?? b ?? c)

a부터 오른쪽으로 값이 확정되어 있는 변수를 찾음.

a 와 b는 값이 확정되어 있지 않음.

콘솔에서 박승환 확인 가능

비트연산자

• &(and),
• |(or)
• ~(not)
• ^(xor)
• <<(left shift),
• >>(right shift)

 

대입 연산자

• +=
• -=
• *=
• /=
• %=
• **=

number = number + 2; 

이를 대입연산자를 사용하여 작성하면

number += 2;

 

전개구문 (...)

const numbers = [1, 2, 3];

console.log(...numbers);

배열이 펼쳐지면 젹혀짐.

 

const numbers = [1, 2, 3];

const numbers2 = [4, 5, 6];

const Newnumbers = [...numbers, ...numbers2];

console.log(Newnumbers);

이를 활용해서 두 배열을 합치기도 가능

 

 

 

---

@@신입부원 스터디 5주차이자 js 1주차를 배우면서 파이썬에 대해서 배웠기 때문에 배우면서 파이썬을 안 떠올릴 수 가 없었다. 논리, 비트, 산술, 증감 등 이런 것들은 파이썬에서도 쓰이는 개념이기 때문에 배우는데 큰 어려움이 없었다. 영상에서 엣날에는  var를 이용해서 변수를 할당했다고 한다. 이는 앞서 let과 달리 var를 계속할당할 수 있다는 점과의 차이점이 있다. 나는 이게 더 편한 것 같은데 왜 바뀐지 모르겠다ㅎㅎ 내용이 어렵지않아서 기분좋게 공부할 수 있었다. 남은 배워야 할 내용도 열심히 공부해야겠다!! @@