자바스크립트 기초 문법 살펴보기

변수와 상수

변수

[키워드(예약어)][식별자(변수)] = [표현식 or 값]

let vs var
let 중복 선언 불가, 호이스팅 발생 안 함
실무에서 많이 이용!!

호이스팅
변수 선언을 자바스크립트의 스코프 맨 위로 올려 실행하는 것

var 중복 선언 가능, 호이스팅 발생
스코프의 범위가 다름

상수

const : let과 같지만 재할당이 안 됨

자료형

문자열

"", "에 둘러싸인 형태
+로 연결도 함
`을 통해 변수 넣기도 가능(템플릿 문자열, 엔터키로 엔터 적용 가능)

숫자형

정수 + 실수
실수끼리의 계산이 정확하게 이뤄지지 않음!!

논리형

undefined (특수)

변수에 데이터 할당을 안 했을 때 임시로 데이터 할당하는데 이 값이 undefined

null (특수)

⭐ 객체

파생되는 자료형 : 배열 (모든 자료형 저장 가능), 객체 리터럴, 함수

객체리터럴 -> let 변수명 = { @@@ : ###, @@@ : ### ... }

파이썬의 딕셔너리 같은 것?

접근 방법 : 변수명.@@@, 변수명["@@@"]

연산자

산술연산자

대입, 복합 대입 연산자

비교 연산자

==와 ===

=== 은 값을 물론 자료형도 같아야 함

논리 연산자

&& || !

삼항연산자

x?[참일 때]:[거짓일 때]

형 변환

암시적 현변환이 최소화 하자

조건문 다루기

if, if else, else if문

조건식이 참으로 평가되면 코드를 실행하는 조건문

switch문

case 값에 따른 블록문 실행

if문과 switch문

조건이 식인지 값인지의 차이
범위를 이용할 땐 if문

반복문 다루기

while 문

do while 문

while문에서 무조건 한 번은 실행하는 것만 다름

for 문

초깃값 -> 조건식 -> 블록문 -> 증감식 -> 조건식 순서

⭐for...in

for (let 키 in 객체 리터럴(탐색의 대상))

break

반복문 탈출

cotinue 문

반복문을 건너뛰고 실행하라는 명령

자바스크립트 함수 다루기

함수란

어떤 목적을 가진 코드를 모아놓은 블록문
객체에서 파생된 자료형
-> 자료형은 변수에 할당할 수 있아야 함
-> 힘수도 변수에 할당할 수 있음

함수를 정의하는 방법

funtion 키워드

함수 정의 방법 : 함수 표현식
식별자 O: 네이밍 함수 ⭐
식별자 X: 익명 함수

const 변수명 = function () {}; // 익명 함수
const 변수명 = function 식별자() {}; // 네이밍 함수

화살표 함수

() => {}
익명함수로만 정의 가능
-> 함수를 호출하려면 정의된 함수를
변수에 할당하는 방법인 함수 표현식을 사용해야 함

const 변수명 = () => {
(코드) ;
}
변수명();

함수 기능 확장하기

매개변수와 인수

인수 : 함수에 들어가는 것
매개변수 : 함수식에서 외부에서 받아오는 값

매개변수

함수 외부로 데이터를 반환할 때 사용

⭐ 함수의 특징 이해하기

스코프 (함수/블록)

함수 스코프 : 함수에서 정의한 블록문만 유효(지역스코프, 전역스코프)

블록 스코프 : {}로 구성된 블록문 기준으로 스코프 유효 범위를 나누는 방식

-> let, const 키워드로 선언한 변수에 한해서만 적용

함수 호이스팅

코드를 선언과 할당으로 분리해 선언부를 자신의 스코프 최상위로 끌어올리는 것

• 함수 선언식일 때의 호이스팅 O
• 함수 표현식일 때는 오류 발생

즉시 실행 함수 사용하기

함수 정의와 동시에 실행
(function(){})();

한 번 사용하는 함수인데 const 키워드 때문에 전역 스코프가 오염되는 것을 방지

자바스크립트 객체 다루기

객체란

키와 값으로 구성된 속성의 집합
{}를 이용해 생성 (리터럴 방식으로 객체를 생성했다고 표현)
모든 자료형 가능
+객체에 정의된 함수는 메서드라고 보통 부른다

객체 속성 다루기

접근 방법

• 대괄호 연산자(문자열 형태로 작성)
• 마침표 연산자 -> 속성값 변경도 가능

속성 동적 추기

객체 만들고 나중에 속성 추가
변수명 = {};
변수명.key = value;

삭제

delete 키워드를 앞에 달고 초기화

얕은 복사 & 깊은 복사
얕은 복사 -> 참조한다. (데이터 재할당은 불가능, 기존 데이터 변경이나 추가는 가능)
깊은 복사 -> 값 자체를 복사하는 것.

9장 1분 퀴즈
p.341
1 ) let score = 10;
p.352
2 ) 5번, 배열 - []
p.365
3 ) 4번, q1은 30, q2은 true || false -> true, q3은 false && true -> false
p.374
4 ) 4번
5 )
let result;
for(let i = 1; i <= 100; i++) {
result += i;
}

10장 1분 퀴즈
1 ) 1번 5번
2 ) let max = arr[0];
for(let i = 1; i < arr.length; i++) {
if(max < arr[i])
max = arr[i];
else
continue;
}
return max;
3 ) 4번 undifined❗틀림 (내 오답 " inside) : 호이스팅 때문에 선언부가 올라가서 할당이 안된 것으로 처리됨
var text = "outside";
function printScope() {
console.log(text);
var text = "inside";
};
printScope();
4 ) 4번

11장 1분 퀴즈
1 ) 3번