변수 선언, 대입연산자
-
변수 선언 키워드 : var, let , const
키워드 우측에 변수명, var는 사용하지 않음 -> Hoisting 과 관련
선언되지 않은 변수 이름을 사용하려고 하면 참조 에러 발생
변수 정리 -
대입연산자 키워드 : =
대입할 변수 = 대입할 값
+=, -=, variable++, variable-- 와같은 구문도 있음
비교 연산자
- === : 양쪽에 위치한 값 비교, true , false 로 평가됨
!== : ! 부정의 not을 의미 위와동일
< , > : 값의 크기 비교, true, false
<=, >= : 위와 동일, 값이 같을 때는 true, "=" 항상 오른쪽
!=, == : 사용하지 않는 것을 권장 -> 자동 형변환 -> 버그 유발형변환 캐스팅
12 * "2" = 24 - > 묵시적 형변환 : 다른 자료형과의 연산을 실행할때 적절하게 자료형을 자동으로 변환해서 결과를 돌려준다.
문자열과 숫자형 값을 더하면 문자열의 덧셈으로 된다.
- parseint() : 문자열에서 숫자로 형변환 명시적 형변환 (의도적으로 형변환을 시키는 것)
자료형
-
원시 타입 (Primitive Type)
한번에 하나의 값만 가질 수 있음 , 하나의 고정된 저장공간을 이용
number, string, undefined, null, boolean
undefined : 값이 할당되지 않은 변수는 기본적으로 Undfined 값을 갖음, (변수를 선언하고 값을 할당 X)
null : 어떤 값이 비어있음을 의도적으로 표현할 때 사용typeof null 의 결과가 object 로 나오는 이유는?
자바스크립트의 typeof 키워드에서 null 에 대한 예외처리가 되어있지 않은 버그가 있었지만, typeof를 사용하는 모든 웹 사이트에 영향을 끼칠수 있기 때문에 수정되지 않고 있습니다. (참조) -
NaN : not a number, number 자료형
숫자가 아닌 값을 반환하는 경우 NaN
NaN 판별
NaN 은 다른 모든 값과 비교했을 때 같지 않고, 다른 NaN과도 같지 않음.
Number.isNaN() , isNaN() 을 이용하여 판별
Number.isNaN() : 현재 값이 NaN이거나, 숫자로 변환했을때 NaN이 될 경우 true를 반환.
isNaN() : 현재 값이 NaN이어야만 true 를 반환.NaN === NaN; // false Number.NaN === NaN; // false isNaN(NaN); // true isNaN(Number.NaN); // true
- 비원시 타입 (Non-Primitive Type)
한번에 여러 개의 값을 가질 수 있음, 여러 개의 고정되지 않은 동적 공간을 사용
object, Array, Function
-
Object(객체) : {key : value, key2 : value2} 형태
객체 생성자 new, 객체 리터럴방식 중괄호 {}
key는 반드시 문자열, value 에 모든 자료형의 값 담을 수 있음.
key 끼리 중복시 가장뒤에 있는 프로퍼티 key를 사용.
key 를 기준으로 value에 접근 .
존재 하지 않는 key에 접근 : undefined -
객체의 key에 접근하는 방법
1. 점표기법 obj.key
2. 괄호 표기법 obj['key'] (문자열 형태로)
유효하지 않은 자바스크립트 식별자를 사용할시 괄호 표기법을 사용해야 한다.
person.'raising dog' - > 참조 불가
person.['raising dog'] - > 참조 가능점표기 법의 한계 점 표기법은 정의 되지 않은 result 객체에 접근 할 수 없지만, 괄호 표기법은 해당 프로터티를 변수화 하기 때문에 접근이 가능, 비동기로 데이터를 호출하는 경우, 프로퍼티에 접근하고 싶다면 괄호 표기법을 사용
-
Array(배열) :[value, value2, value3] 의형태로 표현
리스트 -> 배열이 공식 명칭
value 에는 모든 자료형의 값을 담을 수 있음.
index를 통해 value에 접근, index의 최소값은 0arr.push({ key: "value" }) 추가, 마지막에 추가됨 slice() : 배열의 특정 인덱스에 있는 값을 반환 splice(): 배열의 특정 인텍스에 있는 값을 변경 또는 삭제 pop() : 배열의 마지막 인덱스의 값을 꺼냄 shift(): 배열의 첫번째 인덱스의 값을 꺼냄 console.log(arr.length) 배열의 길이 -
내장함수 forEach() : arr.forEach(func(value, index, array))
const numbers = [11,2,3,4,5] 1.forEach로 배열 순회 function myFunc(num) { console.log(num) } numbers.forEach(myFunc) 2.화살표함수로 간단하게 사용 numbers.forEach(num => console.log(num)) 3. value, index 인자로 받기 numbers.forEach((num, index) => { console.log('Index: ' + index + ' Value: ' +num) }) 4. value, index, array를 인자로 받기 numbers.forEach((num,index,arr) => { console.log(arr) }) 출력 결과 1 1 Index: 0 Value: 11 [ 11, 2, 3, 4, 5 ] 2 2 Index: 1 Value: 2 [ 11, 2, 3, 4, 5 ] 3 3 Index: 2 Value: 3 [ 11, 2, 3, 4, 5 ] 4 4 Index: 3 Value: 4 [ 11, 2, 3, 4, 5 ] 5 5 Index: 4 Value: 5 [ 11, 2, 3, 4, 5 ] -
내장함수 map() : 원본배열의 모든 요소르 순회하면서 어떤 연산을 하여 return된 값들만 따로 배열로 만들어서 반환을 하게 해주는 함수.
-
내장함수 includes(): 주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 확인하고 boolean 형식으로 리턴해줌.
-
내장함수 indexOf(): 주어진 배열에서 전달받은 인자와 일치하는 값의 인덱스를 반환하는 함수.
주어진 배열에서 전달받은 인자와 일치하는 값이 하나도 없을 경우에는 -1을 반환. -
내장함수 findeindex() : 배열의 모든 요소를 한번씩 순회하면서 찾고자 하는 요소와 일치하는 요소가 여러개일때, 가장 먼저 만나는 index의 번호를 반환한다.
-
Function(함수) : 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용.
함수도 데이터 타입이므로 값이다 -> 변수에 담아서 사용 할 수 있다function getMyName(Argument) { return '함수가 반환할 값'; } getMyName(Argument); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다. // Print: '함수가 반환할 값' 위 함수를 변수에 할당해서 사용할 수 있다 (일급 객체) Argument(인수 또는 인자)를 입력 받을 수 있다.
-
불리언 연산 ( Truthy 와 Falsy )
Truthy한 값은 true로 평가되며, Falsy 한 값은 false로 평가되는 연산 방식.
Falsy 값이 아닌 모든 값은 Truthy 값으로 연산되며 결국 True로 평가됨.let a = "s"; if (a) { console.log("true"); } else { console.log("flase"); } a 값에 : 빈 문자열 '', 숫자0, -0, 불리언 false, null, undefined, NaN -> Falsy a 값에 : 문자열, array, object, 숫자, infinity -> Truthy 강제로 불리언 연산을 적용 하려면 Boolean( )함수를 사용 할 수 있다. 자바스크립트의 조건문에는 불리형 값을 넣지 않아도 참이나 거짓으로 인식이 되는 속성이 있다.
-
조건문 : 논리적인 로직을 표현할 때 가장 중심이 되는 구문
조건에 들어가는 값은 항상 불리언 연산이 적용.
if...else 문, else if
조건에 대해 여러 명령문을 묶어서 실행하기 위해서는 반드시 block으로 묶어야함 -> 가독성
switch 문 : else if 처럼 체이닝 되는 조건을 많이 사용할 경우익숙하지 않은 swich문 연습 let country = "ko" swich(country){ case 'ko': console.log("한국") break case 'cn': console.log("중국") break default : console.log("미 분류") break } case 마다 break로 끊어줌삼항연산자 : 조건식 ? 참일때 수행할 식 : 거짓일때 수행할 식
간단한 삼항연산자 연습 주어진값이 널이거나 undefined 아닌지를 판단하는 프로그램 let a = []; const result = a ? true : false; console.log(result); // true
-
연습문제
- 변수 선언시 값을 할당하지 않으면 어떤 값인가요?
- 선언되지 않은 변수를 참조하면 어떻게 되나요?
- 배열이 기본으로 제공해주는 함수들이 있습니다. 이 중 원하는 데이터를 필터링 해주는 함수는 뭘까요?
