바닐라코딩
1주차 JavaScript Review
단점이없어지고싶은개발자
2021. 7. 20. 21:57
반응형
1-1. Values & Types
우리는 변수에 담을 수 있는 존재는 모두 '값' 이라고 할 수 있다.
자바스크립트에서 우리가 다루는 값들은 여러 가지 종류가 있고, 그 종류에 따라 우리는 아래와 같이 7가지로 분류할 수 있다.
1.String Type(문자열)
- 따옴표를 이용해 표현한다
- 문자열은 더 할 수 있다. 예) 'yo' + 'han' === 'yohan'
- 문자열은 유사 배열이다
index를 이용해 각 문자열에 접근할 수 있다
.length속성이 있다. 예) 'abcde'.lenth === 5
2.Number Type(숫자)
- 숫자는 말 그대로 숫자다
- 더하기, 빼기, 곱하기, 나누기 등의 연산이 가능하다
- Infinity 혹은 -Infinity 등과 같이 무한대를 표현하는 숫자값도 있다
- NaN이라는 값 또한 숫자다
**'Not A Number'**를 의미한다
주로 숫자가 아닌 값을 숫자로 치환할때 의도치 않게 주자 나타나는 값이다
예)Number('abcde')
3.Boolean Type
- true, false 두 가지 값이 있다
4.Undefined Type
- '없음'을 의미한다
- undefined 라는 값이 있다
- 초기값이 할당되지 않은 변수나 매개변수 등은 모두 undefined 값을 기본값으로 한다
//초기값이 할당되지 않은 변수
let x;
console.log(x); //undefined
//초기값이 할당되지 않은 매개변수
function foo(x,y) {
console.log(a); //1
console.log(b); //undefined
}
foo(1);
//객체에서 존재하지 않는 속성에 접근하는 경우
const WhatName = {
name: 'yohan',
};
console.log(WhatName.skill);// undefined
5.Null Type
- '없음'을 의미한다
- null이라는 값이 있다
- 명시적으로 '값이 없음'을 나타낼 때 주로 사용된다
- null === null 은 ture 다
- 비록 undefined 와 같이 '없음'을 나타내는 값일지라도, 대입한 적 없는 변수 혹은 속성과 명시적으로 '없음'을 나타내는 경우를 구분할 수 있어야 코드의 의미가 명확해 질 것이다. undefined는 전자, null은 후자의 경우에 많이 쓰인다.
let war = ['a', 'b', 'c'];
war = null; // war라는 변수에 '값이 없음' 이라고 표기함
6. Object Type
const person = {}; //빈 객체 생성
person.name = 'yohan'; // 객체 내 key 와 value 생성
console.log(person.name);// 'yohan'
console.log(person);//{ name: 'yohan' }
console.log(typeof.person); //'obejct'
const list = [1, 2, 3, 4, 5];
console.log(typeof list); // 'object'
function war() {}
console.log(typeof war); //'function'
(이상한 자바스크립트의 세계에 오신 것을 환영합니다)
7.Syombol - 나중에 다룬다 크게 신경 안써도 된다
1-2 Operators
Logical NOT Operator
- ! 를 이용해 표현한다
- ! 뒤에 오는 값을 true는 false를 반환하고, 그렇지 않을 경우 true를 반환한다
!true; // false
!2; //false
!"abc" // false
!false // true
!'' // true
!0 //true
위 예제 코드처럼 값들을 true로 변환할 수 있는 값이 있고, 그렇지 않은 값이 있다. true로 변환할 수 있는 값은 Truthy라고 하고, 그렇지 않으면 Falsy라고 한다
false로 변형되는 값들은
0, false, undefined, null (""), ""'', NaN - 중요
나머지는 true로 변환되어 진다. 고로 false로 변형되는 값들은 꼭 기억해준다.
Logical OR Operator
- || 로 표현한다 or 즉, 또는
- true 나 false 값이 아닌, 피연산자 값이 반환된다
연산방식
1.연산자를 기준으로 왼쪽부터 Truthy 값을 찾는다
2. Truthy값을 찾은 경우, 연산을 중지하고 해당 값을 반환한다.
3. 마지막까지 Truthy 값을 찾지 못한 경우, 마지막에 위치한 값을 반환한다.
Logical AND Oerator
- &&로 표현한다
- true 나 false 값이 아닌, 피연산자 값이 반환된다!! -중요-
연산방식은 OR 이랑 같다
1-3 Functions
함수는 크게 두 가지 방법으로 선언하여 만들 수 있다.
//함수 선언식
function war() {
//function body
};
//함수 표현식
const war = function() {
//function body
};
선호하는 방식으로 사용해도 되지만, 단일 프로젝트에서는 한 가지로 유지하는 것이 유지보수할 때 좋다.
function war() {
for(let i = 0; i < 4; i++) {
console.log(i);
}
}
위 함수는 선언만 되어 있다. 만들기만 하고 사용히자 않았다는 뜻이다.
function war() {
for(let i = 0; i < 4; i++) {
console.log(i);
}
}
war();
함수는 위와 같이 함수명 뒤에 소괄호()를 이용하여 실행할 수 있다. 실행문 뒤에는 세미클론을
붙여주어야 한다.
자바스크립트에서 세미클론은 필수가 아니지만, 일반적으로 세미클론을 생략하는 경우는 잘 없다.
설사 생략하더라도 어느 위치에 붙여야 하는지는 숙지해야한다.
parameters
for (let i = 0; i < 4; i++) {
console.log(i);
}
for (let j = 0; j < 6; j++) {
console.log(j);
}
for (let k = 0; k < 8; k++) {
console.log(k);
}
위와 같이 코드를 작성했다고 하자
중복되는 부분들을 함수를 이용해 개선할 수 있다.
반복적으로 로그를 출력하는 행위가 본복되어지면, 우리가 작성하는 함수는 반복문을 이용하여
로그를 출력하는 행위를 하도록 만들면 된다. (4,6,8)은 매번 다르지만 '매개변수'를 이용하여 함수
선언 시에는 결정할 수 없지만, 함수 실행 시점에 사용자(함수를 실행하는 주체)가 원하는 값으로
정확히 지정하여 사용할 수 있도록 설정할 수 있다.
function repeatLog(count) {
for(let i = 1; i <= count; i++ ) {
consloe.log(count);
}
}
//repeatLog 함수 내부에서 'count'라는 변수는 3을 가르킨다.
repeatLog(3);
위 예제에서 repeatLog 라는 함수는 count라는 매개변수를 선언하여 사용하도록 선언되었고, 함수 실행 시에 해당 매개변수의 값을 지정하여 사용하도록 변경되었다
매개변수란 말 그대로 변수다. 다만 함수를 선언할 때 유동적으로 함께 선언해줄 수 있는
특별한 변수라고 생각하면 좋다 또한 선언할 수 있는 갯수 제한이 없다
Return Value
모든 자바스크립트의 함수는 실행 후 결과값을 반환한다. 하나의 함수가 한 번 실행되었다면 한개의 결과값을 반환한다.
function war(b) {
return b + 3;
}
war(3); // 결과값 : 6
//함수의 결과값은 return 구문을 이용하여 결정할 수 있다
funcion war(x, y) {
if( x > y) {
return x;
}
}
war(2, 1); // 2
war(1, 2); //undefined
//함수에 return 구문이 없거나 실행되지 않을 경우, undefined가 결과값이 된다
1-4 Control Flow
if Statement
if는 Truthy 값이 조건으로 주어질 경우, 해당 조건문이 실행되고 그렇지 않을 경우 다음 조건으로 넘어간다.
if ( 조건문) {
조건문이 true 면 실행할 문구;
} else if (if 조건문이 false고 해당 문이 true면 실행) {
조건문이 true면 실행할 문구;
} else {
위에 문들이 다 false면 실행할 문구;
}
for문
for(1번; 2번; 4번) {
3번
}
1번(Initialization) - 초기화
for loop의 초기 구동 코드, 실행이 시작되는 시점에 가장 먼저 실행되는 부분이며, 단 한번만 실행된다.
2번(Conditional) - 조건
조건이 성립되지 않으면 for loop의 실행이 종료된다. 2번 파트의 조건의 조건이 성립 여부즌 2번 파트의 결과값이 Truthy인지 Falsy인지를 의미한다
3번
반복하여 실행하는 로직을 써넣는다
4번 (Update)
3번 파트의 실행이 끝난 후에 실행되는 구절. 3번 파트가 여러번 실행된다면, 4번 파트 또한 여러분 실행된다. 3번이 종료될때마다 매번 실행된다.
For In Loop
주로 객체의 Key/Value를 순회하기 위한 목적으로 사용된다
const number = {
one: 1,
two: 2,
three: 3,
};
for (let prep in number) {
console.log(prep);
console.log(number[prep]);
}
prep 변수에 in 연산자 뒤에 위치한 객체의 속성들이 하나씩 담긴다
객체의 속성은 대괄호를 이용하여 접근할 수 있기 때문에, number[prep]을 이용하여 해당 키값의 Value를 사용할수도 있다.
-객체의 Key/Value는 순서를 정의할 수 없다. for in loop의 순서는 임의로 정해진다.
객체는 원래 순서가 없다.
1-5 Object Literal
식별자 (Identifier)
어플리케이션에서 값에 상징적인 이름으로 변수를 사용한다. 변수명은 식별자(Identifier)라고 불리며 특정 규칙을 따른다
const me = 'yohan';
function getAge() {
return 29;
}
const person = {
name: me,
age: getAge(),
};
객체 리터럴을 이용해 속성을 지정할 때, 위와 같이 이미 정의된 변수나 함수를 이용하여 Value로 지정할 수도 있다.
const value = 'name';
const obj = {
[value]: 'yohan',
};
obj.value; // undefined;
obj.name;// 'yohan';
위와같이 대괄호를 사용해서 다른 변수에 저장된 문자열을 속성(key)의 이름으로 쓰는 것도 가능하다
Handling objects
속성 접근자, delete 연산자, in 연산자 등을 이용해서 객체에 대한 정보를 읽고 쓸 수 있다
const person = {
name: 'yohan',
age: 29;
langaages: ['koeran'],
};
//Reading
person.name; // 'yohan';
person.age; //29
//Writing
person.name = 'yohrran';
person.age = 30;
//Adding
person.address = '시골동네';
//Deleting
delete person.adress;
//Checking
'name' in person; //true;
'number' in person' //false
Dot Notaion, Vracket Notaion
아래와 같이 **속성 접근자(property aceessor)**을 이용해 이미 생성된 객체의 속성에 대한 Value를 가져올 수도, 또는 지정해줄 수도 있습니다.
const person = {}; //Empty
//Dot nationa
person.name = 'yohan';
person.age = 29;
위에서는 객체 리터럴을 이용해 빈 객체를 생성해 준 뒤, Dot Notation을 통해 속성을 갱신해주었습니다. 그러나, 자바스크립트에서 식별자로 허용되지 않는 문자가 들어간 속성 이름을 사용해야하는 경우 반드시 Bracket notation을 사용해야 합니다.
예) person['한국 나이'] = 29;
특별한 경우가 아닌 이상, 일반적으로 Dot Notataion을 사용한다.
Method
객체의 속성값으로 함수를 지정할 수도 있습니다. 어떤 객체의 속성으로 접근해서 사용하는 함수를 Method라고 부른다.
const person = {
greet: function() {
return 'Hello world';
},
};
person.greet(); // 'Hello world';
Arrays and Functions
배열과 함수 또한 객체라는 범주에 포함된다. 그리고 일반 객체와 동일한 성질을 갖고 있다.
const arr = [1, 2];
console.log(arr[0]); // 1
console.log(arr.title); // undefined;
arr.title = 'Hi';
console.log(arr.title); // 'Hi';
반응형