TIL 8/12 - JavaScript 문법 종합반 1주차, 2주차 초반

JavaScript 문법 종합반 1주차

#형 변환, #연산자, #함수, #스코프(지역변수, 전역변수), #화살표 함수, #조건문, #Falsy한 값, truthy한 값, #객체, #배열, #반복문

#형 변환

// 형 변환
// 명시적 형 변환, 암시적 형 변환

// 1. 암시적 형 변환: 자동으로 형 변환 되는것
// 1-1. 문자열
let result1 = 1 + "2";
console.log(result1); // 12
console.log(typeof result1); // string
// 숫자와 문자열을 더하니 자동으로 문자열로 바뀌었음

let result2 = "1" + true;
console.log(result2); // 1true
console.log(typeof result2); // string
// 문자열과 불리안을 더하니 문자열로 바뀜
// 문자열과 다른 데이터타입이 +로 만나면 문자열로 바뀜
// {}, null, undefined + 문자열 => 문자열

// 1-2. 숫자
let result3 = 1 - "2";
console.log(result3); // -1
console.log(typeof result3); // number

let result4 = "2" * "3";
console.log(result4); // 6
console.log(typeof result4); // number
// +가 아닌 연산자(-, * 등)가 나왔을 때는 숫자가 우선시됨

// 2.명시적 형 변환: 직접 형 변환 시켜주는 것
// 2-1. Boolean
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log("-----------------");
console.log(Boolean("false")); // true
console.log(Boolean({})); // true

// 2-2.문자열
let result5 = String(123)
console.log(result5); // 123
console.log(typeof result5); // string

let result6 = String(true)
console.log(result6); // true
console.log(typeof result6); // string

let result7 = String(false)
console.log(result7); // false
console.log(typeof result7); // string

let result8 = String(null)
console.log(result8); // null
console.log(typeof result8); // string

let result9 = String(undefined)
console.log(result9); // undefined
console.log(typeof result9); // string

// 2-3. Number
let result10 = Number("123");
console.log(result10); // 123
console.log(typeof result10); // number

 

#연산자

// 연산자

// 1. 더하기 연산자 (+)
console.log(1 + 1); // 2
console.log(1 + "1"); // 11

// 2. 빼기 연산자 (-)
console.log(1 - "2"); // -1
console.log(1 - 2); // -1

// 3. 곱하기 연산자 (*)
console.log(2 * 3); // 6
console.log("2" * 3); // 6

// 4. 나누기 연산자 (/)
console.log(4 / 2); // 2
console.log("4" / 2); // 2

// 5. 나누기 연산자 (/) vs 나머지 연산자 (%)
console.log(5 / 2); // 2.5
console.log(5 % 2); // 1

// 6. 할당 연산자(assignment)
// 6-1. 등호 연산자(=)
let x = 10;
console.log(x); // 10

// 6-2. 더하기 등호 연산자 (+=)
x += 5; // x = x + 5와 같은 의미
console.log(x); // 15

// 6-3. 빼기 등호 연산자 (-=)
x -= 5; // x = x - 5
console.log(x); // 10

// 7. 비교 연산자 => true 또는 false를 반환하는 연산자
// 7-1. 일치 연산자 (===)
// 타입까지 일치해야 true를 반환하는 연산자
console.log(2 === 2); // true
console.log("2" === 2); // false
console.log(2 === "2"); // false

// 7-2. 불일치 연산자 (!==)
// 타입까지 일치해야 false를 반환하는 연산자
console.log(2 !== 2); // false
console.log(2 !== "2"); // true
console.log("2" !== 2); // true

// 7-3. 작다 연산자 (<)
console.log(2 < 3); // true
console.log(3 <= 3); // true
console.log(2 > 3); // false

// 7-4. 논리 연산자
// 7-4-1. 논리곱 연산자 (&&): 모두 true 일 때 true 반환 (AND)
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

// 7-4-2. 논리합 연산자 (||): 두 값 중 하나라도 true 인 경우 true 반환(OR)
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

// 7-4-3. 논리부정 연산자 (!): 값을 반대로 바꿈
console.log(!true); // false
let y = 1 === 1;
console.log(!y); // false

// 7-5. 삼항 연산자(중요!) => 조건에 따라 값을 선택한다
// a ? b : c => a 가 true라면 b를, false라면 c를 반환
let a = 10;
let result = (a > 5) ? "크다" : "작다";
console.log(result); // 크다

let b = 20;
let result2 = (b < 10) ? "작다" : "크다";
console.log(result2); // 크다

// 7-6. 타입연산자 (typeof)
console.log(typeof "5"); // string

 

#함수

// 함수 = function(기능)
// input, output

// 1. 함수 선언문
// function 함수명 (매개변수) {
//     // 함수 내부에서 실행할 로직
// }

// 두 개의 숫자를 입력받아서 덧셈을 한 후 내보내는 함수
function add (x, y){
    return x + y; 
};

// 2. 함수 표현식
let add2 = function (x, y){
    return x + y;
};

// 함수를 호출한다 (= 사용한다)
// 함수명(입력값)
console.log(add(2, 3)); // 5
let functionResult = add(3,4);
console.log(functionResult); // 7

// 함수의 input: 매개변수(매개체가 되는 변수!)
// output: return문 뒤에 오는 값 (반환값)

 

#스코프 (지역변수, 전역변수)

// 스코프, 전역변수, 지역변수, 화살표함수
// 스코프: 변수의 영향 볌위
// 스코프가 전체 영역에 영향을 끼치면 => 전역변수
// 스코프가 함수 내에서만 영향을 끼치면 => 지역변수

//전역변수 예시
let x = 10; // 함수 밖에서 선언

function printX() {
    console.log(x);
}

console.log(x); // 10
printX(); // 10

// 지역변수 예시
function printX() {
    let x = 10;
    console.log(x);
}

console.log(x); // x가 정의되지 않았다는 오류 발생
printX(); // 10 => 함수 내에서는 잘 작동

 

#화살표 함수

// 화살표 함수
// ES6 신 문법

// 1-1. 기본적인 화살표 함수
let arrowFunc01 = (x, y) => {
    return x + y;
}

// let arrowFunc01 = (function(x, y){
// 		return x + y;
// }) 와 같음

// 기본적인 함수 형태에 매우 익숙해진 다음에 사용하는 것을 추천

// 1-2. 한 줄로
let arrowFunc02 = (x, y) => x + y; // 중괄호 내부가 한 줄일때만 사용 가능

let arrowFunc03 = x => x; // 매개변수가 하나면 괄호도 생략 가능

 

#조건문

// 조건문 - if, else if, else, switch

// 1. if문
let x = 10;

// 1-1
if (x < 0) {
    // main logic
    console.log("x는 양수입니다");
}

// 1-2
let y = "hello world!";

//y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력
if (y.length >= 5){
    console.log(y.length);
} 

// 2. if - else문
if (x > 0){
    // main logic #1
    console.log('x는 양수입니다.');
} else {
    // main logic #2
    console.log('x는 음수입니다.');
}

// 3. if - else if - else문
if (x < 0){
    console.log("1");
} else if (x >= 0 && x < 10){
    console.log("2");
} else{
    console.log("3");
}

// 1-4. switch
// 변수의 값에 따라, 여러 개의 경우(case) 중 하나를 선택
// default: case에 해당하는게 없을 경우
let fruit = "사과";
switch (fruit){
    case "사과":
        console.log('사과입니다.');
        break;
    case "바나나":
        console.log('바나나입니다');
        break;
    case "키위":
        console.log('키위입니다.');
        break;
    default:
        console.log('아무것도 아닙니다.');
        break;
}

// 조건문의 중첩
let age = 20;
let gender = "여성";

// 미성년자 구분
if (age >= 18){
    if (gender === "여성"){
        console.log("성인 여성입니다.");
    } else {
        console.log("성인 남성입니다.");
    }
} else {
    if (gender === "여성"){
        console.log("미성년 여성입니다.");
    } else {
        console.log("미성년 남성입니다.");
    }
}

// 조건부 실행
let x = 10;

// if (x > 0){
//     console.log("x는 양수입니다.")
// }

// and조건(&&)
(x > 0) && console.log("x는 양수입니다."); // x는 양수입니다.

// or조건(||)
// 삼항 연산자와 단축평가
let y; // y 는 undefined
let z = y || 20; // y가 undefined면 20

console.log(z); // 20

 

#Falsy한 값, truthy한 값

// falsy한 값, truthy한 값
// 조건이 true 혹은 false가 아니더라도, 해당 값이 true에 가까운지, false에 가까운지

if (0){ // false
    console.log("Hello");
}

if (""){ // false
    console.log("Hello");
}

if (null){ // false
    console.log("Hello");
}

if (undefined){ // false
    console.log("Hello");
}

if (NaN){ // false
    console.log("Hello");
}

if (false){ // false
    console.log("Hello");
}

 

#객체

// 객체
// key - value 페어
// 하나의 변수에 여러개의 값을 넣을 수 있다!

// 1. 객체 생성 방법
// 1-1. 기본적인 객체 생성 방법
let person = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

// 1-2. 생성자 함수를 이용한 객체 생성 방법
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 20, "여자");

// 2. 접근하는 방법
console.log(person.name); // 홍길동
console.log(person.age); // 30
console.log(person.gender); // 남자

// 3. 객체 메소드: 객체가 가진 여러가지 기능 (Object.~~~)
// 3-1. Object.keys(): key를 가져오는 메소드
let keys = Object.keys(person);
console.log(keys); // [ 'name', 'age', 'gender' ]

// 3-2 Object.values(): value를 가져오는 메소드
let values = Object.values(person);
console.log(values); // [ '홍길동', 30, '남자' ]

// 3-3. Object.entries: key, value 값을 2차원배열로 보여줌
let entries = Object.entries(person);
console.log(entries); // [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

// 3-4. assing: 객체 복사
let newPerson = {};
Object.assign(newPerson, person, {age : 31});
console.log(person); // { name: '홍길동', age: 30, gender: '남자' }
console.log(newPerson); // { name: '홍길동', age: 31, gender: '남자' }

// 3-5. 객체 비교
let human1 = {
    name : "홍길동",
    age : 30,
    gender : "남자",
}

let human2 = {
    name : "홍길동",
    age : 30,
    gender : "남자",
}

console.log(human1 === human2); // false
// 겍체는 크기가 상당히 크기 때문에 저장 할 때 별도의 공간에 저장함
// human1에는 별도 공간에 대한 주소가 저장되는 것
// human2도 별도 공간의 주소가 저장되므로 human1 === human2의 결과는 false가 나오게 됨

console.log(JSON.stringify(human1) === JSON.stringify(human2)); // true
// 객체를 문자열화

// 3-6. 객체 병합
let man1 = {
    name : "홍길동",
    age : 30,
}

let man2 = {
    gender : "남자",
}

// ...: spread operator => 객체의 중괄호를 해체해서 풀어줌
let perfectMan = {...man1, ...man2};
console.log(perfectMan);

 

#배열

// 배열 1

// 1. 생성
// 1-1. 기본 생성
let fruits = ["사과", "바나나", "오렌지"]; // 배열은 0번째부터 시작

// 1-2. 크기 지정
let number = new Array(5);

console.log(number); // [ <5 empty items> ]
console.log(fruits.length); // 3
console.log(number.length); // 5

// 2. 요소 접근
console.log(fruits[0]); // 사과
console.log(fruits[1]); // 바나나
console.log(fruits[2]); // 오렌지

// 3-1. push: 배열에 요소 추가
console.log(fruits); // [ '사과', '바나나', '오렌지' ]
fruits.push("수박");
console.log(fruits); // [ '사과', '바나나', '오렌지', '수박' ]

// 3-2. pop: 배열의 마지막 요소 제거
fruits.pop();
console.log(fruits); // [ '사과', '바나나', '오렌지' ]

// 3-3. shift: 배열의 첫 번째 요소 제거
fruits.shift();
console.log(fruits); // [ '바나나', '오렌지' ]

// 3-4. unshift: 배열의 맨 앞에 요소 추가
fruits.unshift("망고");
console.log(fruits); // [ '망고', '바나나', '오렌지' ]

// 3-5. splice: 배열의 위치를 지정해서 요소 변경
fruits.splice(1, 1, "포도"); // 배열의 1번째부터 1개를 "포도"로 변경
console.log(fruits); // [ '망고', '포도', '오렌지' ]

// 3-6. slice
let slicedFruites = fruits.slice(1, 2); // 1번째 요소부터 2번째 요소까지만 빼서 새로운 배열로
console.log(slicedFruites); // [ '포도' ]

// 배열 2

// forEach, map, filter, find
let numbers = [4,1,5,4,5];

// 1. forEach
// 매개변수 자리에 함수를 넣는 것을 callback 함수라고 함
numbers.forEach(function(item){
    console.log('item입니다 =>' + item);
});
// item입니다 =>4
// item입니다 =>1
// item입니다 =>5
// item입니다 =>4
// item입니다 =>5

//화살표 함수로 하면 더 간단함
// array.forEach(item => {
    
// });

// 2. maps: 기존에 있었던 배열을 가공해서 return
// 항상 원본 배열의 길이만큼이 return됨
let newNumbers = numbers.map(function(item){
    return item * 2;
})
console.log(newNumbers); // [ 8, 2, 10, 8, 10 ]

// 3. filter: 조건에 맞는 요소만 return
let filteredNumbers = numbers.filter(function(item){
    return item === 5;
});
console.log(filteredNumbers); // [ 5, 5 ]

// 4. find: 조건에 맞는 '첫 번째' 요소만 return
let result = numbers.find(function(item){
    return item > 3;
})
console.log(result); // 4

 

#반복문

// 반복문
// for, while

// 1. for
// i라는 값은 0부터 시작
// i라는 변수가 10에 도달하기 전까지
// i라는 변수는 한 사이클이 돌고 나면 1을 더함
for (let i=0; i<10; i++){
    console.log("for문 돌아가고 있음 =>" + i);
}
// for문 돌아가고 있음 => 0
// for문 돌아가고 있음 => 1
// for문 돌아가고 있음 => 2
// for문 돌아가고 있음 => 3
// for문 돌아가고 있음 => 4
// for문 돌아가고 있음 => 5
// for문 돌아가고 있음 => 6
// for문 돌아가고 있음 => 7
// for문 돌아가고 있음 => 8
// for문 돌아가고 있음 => 9

// ex: 0부터 10까지의 수 중에서 2의 배수만 console.log로 출력하는 예시
for(let i=0; i<=10; i++)
{
    if(i%2 === 0)
        console.log(i);
}

// for ~ in문
// 객체의 속성을 출력하는 문법
let person = {
    name : "Jon",
    age : 30,
    gender : "male"
};

for(let key in person){
    console.log(key + ": " + person[key]);
}
// name: Jon
// age: 30
// gender: male

// 2. while
var i = 0;

while(i < 10){
    console.log(i);
    i++;
}

// while문을 활용해서, 3초과 100미만의 숫자 중 5의 배수인 것만을 출력하는 예
var i = 4;

while(i < 100){
    if(i%5 === 0)
        console.log(i);
    i++
};

// 3. do ~ while
var i = 0;
do {
    console.log(i);
    i++;
} while(i > 10); // 최소 한번은 실행됨

// 4. break ~ continue
for (let i=0; i<10; i++){
    if(i === 5)
        break; // for문을 종료시킴
    console.log(i);
}
// 0
// 1
// 2
// 3
// 4

for (let i=0; i<10; i++){
    if(i === 5)
        continue; // 다음 루프로 넘어감 (5가 출력되지 않음)
    console.log(i);
}
// 0
// 1
// 2
// 3
// 4
// 6
// 7
// 8
// 9

 

JavaScript 문법 종합반 2주차 초반

ES6 문법

#구도분해할당, #단축 속성명, #나머지 매개변수

// 구도분해할당 (destructuring)
// 배열이나, 객체의 속성

// 1. 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // new
let arr = ["value1", "value2", "value3"];
let [a, b, c, d] = arr;

console.log(a); // value1
console.log(b); // value2
console.log(c); // value3
console.log(d); // value4

// 2. 객체의 경우
let {name, age} = {
    name : 'nbc',
    age : 30,
}
console.log(name); // nbc
console.log(age); // 30

// 새로운 이름으로 할당하는 법
let user = {
    name : 'nbc',
    age : 30,
}

let {
    name : newName,
    age : newAge,
} = user

console.log('newName =>', newName); // nbc
console.log('newAge =>', newAge); // 30

// 단축 속성명: property, shorthand
const name = "nbc";
const age = "30";

const obj = {
    name, // key와 value의 이름이 같으면, : 생략 가능
    age,
}

const obj1 = {name, age}; // obj와 내용물이 같음

// 전개 구문 = spread operator
// destructuring(구도분해할당)과 함께 가장 많이 사용되는 es6 문법 중 하나
let arr = [1,2,3];
console.log(arr); // [ 1, 2, 3 ]
console.log(...arr); // 1 2 3

// 기존의 구조를 벗어버리고 새로운 구조로 덧입혀야할 때 사용
let newArr = [...arr, 4];
console.log(newArr); // [ 1, 2, 3, 4 ]

// 객체에서
let user = {
    name : 'nbc',
    age : 30,
}

let user2 = {...user,
    gender : "남성",
}

console.log(user); // { name: 'nbc', age: 30 }
console.log(user2); // { name: 'nbc', age: 30, gender: '남성' }

// 나머지 매개변수 (rest parameter)
function exampleFunc(a, b, c, ...args){ // 후속 매개변수가 들어올 수 있음을 뜻함
    console.log(a,b,c);
    console.log(...args);
}

exampleFunc(1,2,3,4,5,6,7); // 1 2 3
                            // 4,5,6,7

// 템플릿 리터럴 (Template Literal) (백틱 `)
// 백틱(`)안에 ${}를 써서 자바스크립트 코드나 변수를 사용 가능
const testValue = "안녕하세요!"
console.log(`Hello World ${3+3} ${testValue}`); // Hello World 6 안녕하세요!
console.log(`
    Hello
        My name is Javascript!!!

        Nice to meet you!!!
`) // 따옴표(')는 멀티라인을 지원하지 않지만 백틱(`)은 멀티라인을 지원해서 매우 편리함