위 검색창에서 F1을 누르고 Dev Containers: attach to.....을 누르고 node를 누르면 새 창이 열리고 node container로 진입한다.
여기서 파일을 만들면 처음에 설정한 파일이 저장되길 원하는 경로에 있는 폴더에 자동으로 파일이 저장된다.
14일차
javascript
목차
변수, 주석
문자열
연산자
형변환
흐름제어
함수
변수, 주석
1. 주석 JS의 한 줄 주석// <-> # 파이썬의 한 줄 주석 /* JS의 여러줄 주석 */ ''' 파이썬의 여러줄 주석 ''' /** * JS의 스페셜 주석, 슬래쉬 별표 별표 치고 엔터누르면 알아서 늘어남 * */ console.log( 출력 내용 ) <- JS의 출력 명령어 print() <- 파이썬의 출력 명령어
vscode의 경우 실행하려면 밑의 터미널 창에서 node (파일명.확장자) 를 입력하고 엔터를 눌러야 된다.
그럼 요렇게 나온다
확장 프로그램 설치하면 단축키로도 가능하다고 한다.
2. 변수
* 변수 * - 문법 * - 변수 선언 * - 변수 선언 및 초기화 * - 키워드 변수명 * - 변수 선언 및 초기화 * - 키워드 변수명 = 값 * - 용도 * - 값을 담는 그릇(초보적 해석) * - 값을 가르키는 `참조`값을 가진 그릇(값을 가르킨다) * * - 키워드 (파이썬에는 없는 내용이다) * - var * - 초기때부터 사용하였음 * - 변수 선언, 범위에 대한 버그가 존재함 -> 변수명이 안 겹치면 일단 해결됨 * - 추가됨 (2015, ES6에서) * - 변수의 범위를 블록 스코프 { 여기서만 유효 } 로 구성 * - let : 변수 키워드, 범위에 대한 버그를 해결함. * - const : 상수 키워드 (파이썬에는 없음) * -> 압도적으로 많이 씀, 상수명은 대문자 구성(관습) * -> 함수/객체를 참조할 때 사용, 환경변수, 설정값 * */ 수업 내용 복사 ㅎ
***기억해야 할 포인트*** 변수 선언 : var, let, const
파이썬과 같이 상수는 대문자로 표기한다, JS에서는 끝에 세미콜론을 붙인다.
파이썬과 같이 전역변수는 global하게 적용되고, 지역변수는 조금 다르게 { } 중괄호로 표기된 함수 내에서만 정의된다. 첫번째에는 1 , number로 출력 -> 파이썬은 int인데 이 점이 다르다. 두번째에는 hello string으로 출력 a = 10, b = 11
a는 전역변수로 1로 지정되었지만 if문 안에서 var a = 10으로 다시 지정하였으니 a는 10으로 출력된다. var b = 11은 맥락상 지역변수지만, var의 경우 지역, 전역 변수를 완전히 명확하게 선언하지 않아 코드블럭 밖에서도 출력되는 모습이다. let c = 12는 let으로 지역변수로 `명확히` 선언하였기 때문에 코드블럭 밖에서 출력하면 오류가 난다.
변수 호이스팅은 조금 복잡하다. 변수 선언을 하지 않았담녀 자동으로 var a2;라는 코드를 54번 console 코드 위에 삽입한다. 그래서 54번은 undefined가 출력되고 이후 55번에서 선언을 한 후 56번이 출력되어 100이 출력된다. 이런 것이 버그 아닌 버그라고 할 수 있다. 해결하려면 변수를 선언 한 후 사용하는 아주 당연한 룰 을 적용하거나 let, const를 사용하면 된다. var의 버그를 수정하기 위해 나온게 let, const이다.
3. 문자열 파이썬과 꽤나 동일하다. 하지만 다른 점은 포맷팅 파이썬 f' { } , { } , { } ' JS `${ 값 } , ${ 값 } , ${ 값 }` 으로 달러기호를 붙여야 한다. 문자열 출력 확인
리터럴을 겹쳐도 파이썬과 같이 맨 바깥 리터럴이 작용하고 그 내부는 문자열로 출력되는것을 확인할 수 있다.
여러 줄을 구성하려면 백틱 `(키보드상 물결표시) 로 감싸준다면 모두 출력되어 나온다.
4. 연산자 대부분 다른 언어와 동일함 포인트 포맷팅의 차이 f' `${} ++ ===
JS의 `$ { } 포맷팅을 이용해서 구문에 대입한 내용이다. 포맷팅 형식 말고는 거의 동일하다.
문자열 더하기, 파이썬의 경우 오류가 날 것이다. 하지만 JS에서는 관대하게도 다 받아준다 대신, 문자열과 수치형이 함께 있다면 모두 문자열취급으로 변한다. 예시로 17번 출력물을 본다면 빈 칸과 수치형 10이 더해졌지만 10 STRING으로 문자열로 타입이 출력되는것을 볼 수 있다.
이건 좀 신기한데 ++ , -- 등 파이썬에는 없는 연산자가 있다. ++ => 1 더하기, -- => 1 빼기이다, 단, 위치로 인해 결과가 달라진다. EX i++ = i를 먼저 출력한 후 값을 증가시킴 ++i = 값을 증가시킨 후 i를 출력함. 그래서 25번 행의 결과값의 경우 i =1, i = 1을 출력한 후 1을 더함(이 때 i = 2), (i = 2)에 1을 더한 후 (i = 3) 출력, i = 3 이 순서로 보면 된다.
이 경우에는 i에 2를 더한 후, i = i +2로 또 2를 더해서 최종 값 7이 출력되는 것이다.
JS만의 다른 연산자인 ===가 있다. X1은 NUMBER , X2는 STRING이다, 그런데 두 값을 == 하면 true가 출력된다, 이는 통상 객체간만 비교해서 그런 것이다. 그런데 ===을 사용하면 같은 타입도 거르기 때문에 false가 출력된다.
삼항연산자 문법 : (조건식) ? (참일때 값) : (거짓일때 값) ;
커피값을 1800d으로 변수를 준 이후 삼항연산자를 이용해서 조건식 커피값이 2000보다 크면 비쌈 출력, 작으면 적당 출력을 대입한 내용이다.
5. 형변환 종류 명시적 해당 변수를 대놓고 특정 타입으로 바꾸는 방식 정보 손실이 발생될 수 있음 암묵적 통상 수치형 => 수치형 => 메모리공간 절약 효과
1. 명시적 10 number => a는 10이고, 수치형이다 1-1. 문자열로 변환 a는 문자열이다, false는 문자열이다 1-2. 결과물이 수치형 문자열 ' 1 ' 을 넣었지만, number로 인해서 ' 1 ' 은 수치형이 되었다. -> 이 떄, 공백제거가 된다. 이 때, ' ab ' 는 숫자가 될 수 없기 떄문에 NaN가 출력된다 ( 정보손실발생 ) 1-3. 불린형 반환 파이썬과 다르게 true, false 다 소문자다. 1, -1 = true NaN , null , undefined = false
2. 암묵적 형 변환 27번 코드는 수치 + 수치 = 더ㅎ가기가 작동했다. 30, 31, 32번은 단 하나라도 문자열이 있으니 모두 문자열로 출력되는 모습이다,
6. 조건문 포인트 elif가 없고 문법이 조금 다르다, 소괄호와 중괄호(코드블럭) 존재 조건이 1개 if ( 조건식 ) { 수행문 } 조건이 2개 if ( 조건식 ) { 수행문 } else { 수행문 } 조건이 n개 if ( 조건식 ) { 수행문 } else { 수행문 } if ( 조건식 ) { 수행문 } else { 수행문 } if ( 조건식 ) { 수행문 } else { 수행문 } if ( 조건식 ) { 수행문 } else { 수행문 } ... 논리 연산자도 차이가있다. A && B = A and B A | | B = A or B !A = A가 아니다, not A 1. 조건이 1개일때
문법이 조금 다른것을 볼 수 있다. let을 통해서 변수를 선언하고 if (소괄호 안에 조건식을 넣는다 ) { 코드블럭-> 파이썬의 : 역할이다 console.log(' 구매 실패') <- 파이썬의 print()역할 } 2. 조건이 2개일때
조건이 2개일때이다. 첫번째 조건은 else전에서 끝나고 만약 else라면 모두 적절을 출력하는거다. else는 나머지 모든 조건이니 조건식을 생략해도 ok
등급 매기는 조건문이다. 학생 점수는 70점이고 90점부터 순서대로 A, B, C, D, F의 등급을 받는다. 문법을 보면 if 조건문 코드블럭 수행문 else if 조건문 코드블럭 수행문 else , . . . . 반복되는 모습을 볼 수 있다. 위에서부터 내려오며 학생의 점수인 70점에서 멈추는것을 볼 수 있다.
삼항연산자로 조건문을 만든 내용 조건문 ? 참일때 값 : 거짓일떄 값 ; 로 만든 삼항연산자. 멤버 레벨이 10이고, 레벨이름은 멤버 레벨이 10이상일때 vip, else라면 normal이 출력된다. 레벨이 10이기때문에 vip가 출력된 모습. 실습 이미지
위에처럼 풀어서 기입해도 되지만 수행문이 1개라면 else에 다 잡히니까 { } 중괄호를 생략해도 무방하다.
여러 조건이 있는 경우 또 하나의 방법으로 switch ~ case를 사용해도 좋다. switch ~ case의 경우는 범위 조건식이 아닌, 한 가지 명확한 케이스가 있을때 사용 가능한 조건식이다. 하나하나 살펴보길,
7. 반복문
파이썬과 다른 점은 do ~ while문이 한개 존재한다. while 문과의 차이는 while문은 시작 조건이 false면 바로 끝난다. 하지만 do ~ while문은 일단 한번은 조건식을 돌고, 이후 끝난다.챗gpt가 알려준 두 구문의 차이
우리가 아는 기본 for 반복문이다. 다른점은 구문에 포맷팅이 f포맷팅이 아닌 점 1번 구문에 변수 증감 기호가 ++ 인 점 ( 파이썬은 +=) for 문에도 소괄호로 싸여있는점 등등이 있겠다 익숙한 변수다, 중괄호는 파이썬에서 딕셔너리였다. for 문에서 딕셔너리의 키와 값을 추출하는 방법은 인덱싱이었다. person 변수를 지정한 후 for 문으로 키를 출력하는데 이 때 추가 조건으로 if key === 'name'이라면 continue, 점프해라 라는 뜻이다 그래서 key, person[키 인덱스 = 값] 이 출력되므로 출력값은 age 10 문법만 조금 다르지 사용하는 방식은 비슷하다.
js는 값이 모두 나오다 보니 편의를 위해서 구분선을 넣었다. 파이썬에서 리스트였던 [ ] 는 JS에서 배열이라고 한다. FOR 문으로 levels에 있는 데이터들을 하나씩 꺼내서 출력하는게 1번 levels에 있는 데이터들의 인덱스도 함께 추출하는것이 2번이다. 그런데 지저분해서 잘 사용은 안한다고 한다. 인덱스는 파이썬과 같은 형식으로 작동한다.
while문으로 cnt가 > 3 이 될때까지 계속해서 돌리는 내용이다. 마찬가지로 문법이 파이썬과 조금은 다르지만 크게 다르지는 않은 모습을 볼 수 있다. cnt ++ 로 1씩 증감되는 모습, cnt가 4가 되니 출력되지 않고 break를 통해 나가는 모습을 볼 수 있다. 애초에 while(조건문) 형식으로 바꿔서 더욱 간결하게 변환시킬수도 있다. 위와 아래의 결과값은 같다.
do ~ while 은 반드시 한번은 수행된다. 위 코드에서는 크게 while문과 다른 점을 느낄 수 없지만. 이렇게 보면 while 문과는 다르게 시작부터 false라도 한번은 출력되는것을 볼 수 있다.
