[용어정리] Part4 JavaScript | 문법 및 기본구조(2)

11-2 연산자 - 논리연산자

NOT - ! , AND - && , OR- ||

- 사칙연산할때도 곱셈 나눗셈 먼저하고, 덧셈 나눗셈을 나중에 하듯이 처리되는 순서가 따로있다

- 조건문을 구현할때 유용하게 사용된다 

 

! > && > || 로써, NOT이 최우선 순위를 가지고있다.

 

const value = !(true && false || true && false || !false);
// !(true && false || true && false || true);
// !(false || false || true);
// !(true)
// false

아래 주석 풀이해놓은것을 보면, ! 먼저 처리되고, && 다음 || 순으로 처리된 것을 확인 할 수 있다.

 

 

12 조건문(Conditional Statements)

• 조건에 따라 실행이 되기 때문에, 프로그래밍에서 매우 중요한 요소이다
• 표현식이 참으로 평가될 때, 실행되는 블럭( 중괄호를 설정하여 한 개 이상의 statement를 작성해놓은 코드 덩어리)
• 블록에 코드가 한줄이면, 줄괄호  { }는 생략 가능하다.

⭐1) if문

 

 

'그럼 언제 표현식이 참 / 거짓으로 평가될까?'

 

표현식이 거짓으로 평가될 때 

Boolean 말고도 , 이같이 딱 false는 아니지만 Boolean으로 평가될때  

false로 평가되는 값들을Falsy(풜시)한 값이라고 한다.

예) false, 0, null, undefined, NaN

반대로

표현식이 참으로 평가될 때 (Truethy 트루시)

Falsy의 반대: true, 27, 'Mark', {} []

//앞에 Falsy한 값이 있다면, 뒤에 블럭들은 실행이 안된다.
if (false) console.log(false);
if (0) console.log(false);
if ("") console.log(false);
if (null) console.log(null);
if (undefined) console.log(undefined);
if (NaN) console.log(NaN);

//Falsy한 값들을 제외한 다른 모든 값들은 True로 평가된다.
if (true) console.log(true);
if (37) console.log(37);
if (-37) console.log(-37); //마이너스 또한 true이다.
if ("Mark") console.log("Mark"); // 빈문자열이 아닌 아무 문자열이 있으면 true
if ({}) console.log({}); //빈 객체 또한 true
if ([]) console.log([]); //빈 배열 또한 true

if만으로 프로그램을 만들기에는 너무 불편하다.

if문 블럭뒤에는 else와 { }를 이용해서 if의 조건 표현식이 참인경우 말고, 아닐때를 그때 실행하는 블럭을 설정할 수 있다.

 

⭐2) else { }

•  if에 해당하지 않을 때
  if 문 블록뒤에는 slse와 { } (중괄호)를 이용해서 if의조건식이 참인 경우 말고,
  아닐때, 그때 실행하는 블럭을 설정가능.

⭐3) else if { }

• if에 해당하지 않을 때
  if와 else외 한가지가 더 있는데, 이는 논리적인으로 구분된 여러가지 조건을 추가해서 여러조건에 해당하는 경우를 설정할 수 있다.

//if() {} else if() {} esle{}

const n = 15;

//이 코드는 15라는 숫자가 if에서도 걸리고 바로 아래 5에서도 걸리므로 논리적으로
//사용자가 의도한바가아니면, 오류를 이르킬수있다.
//따라서 16번째 줄부터 보면 좋을것 같다.
if (n % 3 === 0) {
    console.log("n은 3의 배수입니다.");
} else if (n % 5 === 0) {
    console.log("n은 5의 배수입니다.");
} else {
    console.log("n은 3의 배수도 아니고, 5의 배수도 아닙니다.");
}

//만약 15인 경우 따로 빼주고, 3과 5를 완전히 영역이 겹치지 않을떄만 갈라서 처리하고 싶을시
//아래의 로직이 더 맞다.

//n이 3의 배수이면서, 5의 배수이면 뭐라고 출력해야될까?
if (n % 3 === 0 && n % 5 === 0) {
    console.log("n은 15의 배수입니다.");
} else if (n % 3 === 0) {
    console.log("n은 3의 배수입니다.");
} else if (n % 5 === 0) {
    console.log("n은 5의 배수입니다.");
} else {
    console.log("n은 3의 배수도 아니고, 5의 배수도 아닙니다.");
}

//위에서보면 똑같은 평가? 로직? 이 많아서 정리를 해보도록하겠다.
//n % 3 ===0 과 n % 5===0 의 값은 여럴번 반복되므로, 변수나 상수에 넣는다.
const multipleOfThree = n % 3 === 0;
const multipleOfFive = n % 5 === 0;

if (multipleOfThree && multipleOfFive) {
    console.log("n은 15의 배수입니다.");
} else if (multipleOfThree) {
    console.log("n은 3의 배수입니다.");
} else if (multipleOfFive) {
    console.log("n은 5의 배수입니다.");
} else {
    console.log("n은 3의 배수도 아니고, 5의 배수도 아닙니다.");
}

//중첩을 이용해서 표현 할 수도 있다.
//15의 배수가 아닌경우를 먼저 중첩 형식으로 써보도록하겠다. (위의 코드가 논리적으로 틀린건 아니다.)
if (multipleOfThree && multipleOfThree) {
    console.log("n은 15의 배수입니다.");
} else {
    if (multipleOfThree) {
        console.log("n은 3의 배수입니다.");
    } else if (multipleOfThree) {
        console.log("n은 5의 배수입니다.");
    } else {
        console.log("n은 3의 배수도 아니고, 5의 배수도 아닙니다.");
    }
}

 

⭐4) &&, ||, ! <- if의 표현식 안에서 사용하면서 조건문을 평가할 수 있는 능력을 키워야된다.

• 논리 연산자를 이용한 조건문 실행

//표현식 && 표현식
//둘다 참 일때만 참이다.
//표현식은 앞에 먼저 평가하고, 뒤에를 평가한다.
//앞 표현식을 평가를 해서 참 일때만, 뒤 표현식을 평가할 필요가 생기기 때문에 뒤의 표현식이 실행된다.

let n = 5;

//let n = 7; 5로 나누어 떨어지지않으므로 뒤에가 실행이안된다
n % 5 === 0 && console.log("5로 나누어 떨어질때만 실행"); //실행됨

//앞 표현식의 평가 결과가 거짓일때는 뒤 표현식을 평가할 필요가 없어서 실행하지 않는다.
n = 6;
n % 5 === 0 && console.log("5로 나누어 떨어질때만 실행"); //실행안됨

//표현식 || 표현식
//둘 중에 하나만 참이면 참이다.
//앞 표현식을 평가를해서 참 이면, 뒤 표현식을 평가할 필요가 없어서 실행하지 않는다.
n = 5;
//앞에가 참이기 때문에 뒤에가 실행이 안됐다.
n % 5 === 0 || console.log("5로 나누어 떨어지지 않을때만 실행"); //실행안됨

//앞 표현식을 평가해서 거짓 일때만, 뒤 표현식을 평가할 필요가 생기기 때문에 뒤의 표현식이 실행된다.

//따라서 &&는 다르게 앞에가 참이면 뒤에가 실행 됐는데, 이번에 ||연산자는 거짓일때만 뒤에가 실행된다.
n = 6;
n % 5 === 0 || console.log("5로 나누어 떨어지지 않을때만 실행"); //실행됨

 

⭐5) 삼항 연산자를 이용한 조건부 실행

• 삼항 연산자를 이용해도 조건에 따라 실행이 가능하다.
  특별한 점은, 실행한 결과를 바로 어딘가에 할당할 때 사용하면 좋다.

//조건 ? 조건이 참이면 실행되는 표현식 : 조건이 거짓이면 실행되는 표현식
//중괄호 {} 를 사용할 수 없는 문법이기 때문에 하나의 표현식만 가능하다.
let n = 5;
console.log(n % 5 === 0 ? "5의 배수이다." : "5의 배수가아니다.");

//표현식의 결과를 변수에 할당할 수 있다.
const message = n % 5 === 0 ? "5의 배수이다." : "5의 배수가아니다.";
console.log(message);

⭐6) swich를 이용한 조건문

• if이외에 switch라는 키워드를 이용해서 조건문을 사용할 수 있다.
  switch는 if와는 달리 어떤 표현식이 참인지 거짓인지 보다는 어떤 값인지를 체크해서 맞으면 실행이되는 어떤 블럭들을 쭉~ 설정하는것이다.

//switch뒤 괄호 안에 있는 값이 무엇인지 중괄호 안에 있는 코드들을 비교해서 실행한다.
//이중에 default: 뒤에 있는 문장은 항상 참이어서 싱행되는 블럭이다.
//문장이 한 줄이라서 중활호는 생략했다.

let n = 5;
switch (n) {
    // default: {
    //     console.log(n);
    // }
    default:
        console.log(n);
}

//다음은 n이 5로 나누었을때 나머지가 0인 경우에 실행되는 블럭을 추가한 것이다.
//case '비교할 값':을 이용해서 맞으면 실행된다.
//case 0:인 경우와 default:인 경우 두 블럭 모두 순서대로 실행이된다.

switch (n % 5) {
    case 0: {
        console.log("5의 배수이다.");
    }
    default:
        console.log(n);
}

//만약에 해당 블럭이 실행된 후 다음 블럭을 거치치 않고  switch문을 나가고 싶다면,
//case 문 안에서 break;를 실행한다.
switch (n % 5) {
    case 0: {
        console.log("5의 배수이다.");
        break;
    }
    default:
        console.log(n);
}

//break와 case문의 순서를 잘 조정하여, 원하는 코드를 만들어 낼 수 있도록 제대로 이해해야한다.
n = 6;
switch (n % 5) {
    case 0: {
        console.log("5의 배수이다.");
        break;
    }
    case 1:
    case 2:
    case 3:
    case 4:
        console.log("5의 배수가 아니다.");
    default:
        console.log(n);
}

 

12 반복문

> 특정조건이 만족할때까지 계속 돌리다가 조건이 만족되지않으면 끝낸다

> 반복문은 여러종류가 있다.

⭐1) for문 

for (let i = 0; i < 10; i++) {
    console.log(i);
}

⭐2) while문

let i = 0;
while (i < 10) { //조건으로 주는 부분에 언젠가는 false로 줘야한다
    console.log(i);
    i++;
}

>while문을 사용할때 주의할점은 

조건으로 주는 부분에 언젠가는 false를 줘야하는 것이다.

만약 false가 없으면 while문은 영원히..반복이된다.

또한 주로 while문을 작성할 때는 숫자를 1씩 올려가면서 하는 반복문은 사용하지 않는다.

이런건for문으로 하는게 좋다 

 

대신에 while문으로는 조건이 조금 더 까다로운경우 사용하는데, 즉 단순히 숫자를 비교하는 것이 아닌

어떠한 값이 true가 됐을때 ? 이럴때를 주로 비교한다.

예를들자면 아래같은 코드이다.

let i = 0;
let isFun = false;

while (isFun === false) { //비교를 하고있는것이 숫자가 몇보다 클때 가 아니다.
//while (!isFun) { //논리 연산자 사용
    console.log(i);
    i++;
    if (i === 30) {
        isFun = true;
    }
}

이렇게 되면, 결과값이 0부터 29까지 출력되는것을 확인할 수 있다.

그런데 여기서 중요한것은 4번째줄에 비교를 하고있는것이 숫자가 몇보다 클때 가 아니라 isFun이 false일때 while문을 계속 반복해라 라고 하는 것이다.

 

그리고 5번째 줄을보게되면

while (isFun === false) {  대신에  

while (!isFun) { 를 사용할 수 있는데,

! 이라는 NOT 연산자를 사용하여 

isFun이 원래는 false인데, NOT이들어가는 !가 들어가서 true가 된다.

 

따라서 정리하자면 while문은 (조건)에 들어오는값이 true일때 반복하게 되는데,

근데 isFun의 false에다가 !를 붙였으니까 ture가 되니까 반복을하다가,

i의 값이 30이 되면 isFun이 true가 되면서 

 

while (!isFun) { 

 

이 부분에서 !가 있으니까 false가 되겠지? 그래서 while문이 종료가 되는 것이다.

 

따라서 반복문은 주로 숫자를 비교한다기 보다는 

특정 조건을 비교할때가 더 많다. (주로 이러한 용도로 사용한다)

 

⭐3) for...of

> 주로 배열을 다루게 될때 사용되는 반복문이다.

> for...of는 배열안에 있는 것들을 사용해서 어떠한 작업을 해야될때 쓴다.

이렇게 배열에 있는 값을 출력했다.

그럼 이전에 배웠던 for문으로 사용하면 안되냐?

const numbers = [10, 20, 30, 40, 50];

//방법 1.
for (let number of numbers) {
    console.log(number);
}

//방법 2.
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

된다. console.log로 찍으면 똑같은 값이 나오는 것을 확인할 수 있다.

그런데, 방법1같은경우는 헷갈려서 잘 사용 안한다고한다. 

따라서 방법2 를 주로 사용하지만, 

 

사실은 이것도 잘 안쓴다고한다.

응? 왜지?

 

그 이유는, 배열에 내장함수라고해서 배열안에있는 값들을 가지고 어떠한 처리를 해야될때 더 쉽게하는 방법이 있기 때문이다.

 

이게 헷갈리는 또 다른 이유는  for...in이라는 반복문이 또 있기 때문이다.

 

이걸 알아보기전에, 객체의 정보를 배열형태로 받아 올수 있는 몇 가지 방법에 대해서 알아보자!

예를들어 아래와같은 코드가 있다고 해보자

const doggy = {
    name: "멍멍이",
    sound: "멍멍",
    age: 2,
};

만약에 내가 key라고 부르는 name, sound, age를 배열형태로 받아오고 싶다면 어떻게할까?

console.log(Object.keys(doggy)); //[ 'name', 'sound', 'age' ]

라고 해주면 key값을 받아 올 수 있다.

 

그리고나서 내가 value를 사용하고 싶다면?

console.log(Object.values(doggy)); //[ '멍멍이', '멍멍', 2 ]

라고 적어주면 value가 잘 찍힌다.

 

또 하나 더 entries라고 있는데 이는 배열형태로 반환하며 내부에는 key : value값으로 함께있다.

console.log(Object.entries(doggy)); //[ [ 'name', '멍멍이' ], [ 'sound', '멍멍' ], [ 'age', 2 ] ]

 

따라서 정리하자면 아래와 같이 객체의 정보를 배열형태로 받아 올수 있는 방법이 있다는걸 기억해두자!

그리고 3가지 함수 (entries , keys , values) 잘 알아두고,

⭐특히 Object.keys를 잘 알아두기! 예) doggy에 있는 모든 keys에 대해서 어떤 작업을 하고싶다 라고 하면 for문을 돌릴 수 있기때문이다.

console.log(Object.entries(doggy)); //[ [ 'name', '멍멍이' ], [ 'sound', '멍멍' ], [ 'age', 2 ] ]
console.log(Object.keys(doggy)); //[ 'name', 'sound', 'age' ]
console.log(Object.values(doggy)); //[ '멍멍이', '멍멍', 2 ]

 

⭐4) for...in

객체에 대한 반복적인 작업을 처리할 때 사용한다.

const doggy = {
    name: "멍멍이",
    sound: "멍멍",
    age: 2,
};

for (let key in doggy) {
    console.log(key);
}

//출력결과 : 
//name
//sound
//age

 

만약 key와 value값을 함께 보여주고 싶다면 ? 

const doggy = {
    name: "멍멍이",
    sound: "멍멍",
    age: 2,
};

for (let key in doggy) {
    console.log(`${key}:${doggy[key]}`);
}

//출력결과 :
//name:멍멍이
//sound:멍멍
//age:2

 

 

⭐ 가볍게 알아보는 continue와 break

for (let i = 0; i < 10; i++) {
    if (i === 2) continue; //그 다음 loop를 돌게하는거다
    console.log(i);
    if (i === 5) break; // 그냥 밖으로 나간다.(끝나버리는거)
}

//출력결과 :
//0
//1
//3
//4
//5

---

⭐ 반복문 연습

/**
 *
 * @param {*} numbers -숫자로 이루어진 배열을 가져온다
 * @returns 모든 값들의 합을 구해준다.
 */
function sumOf(numbers) {
    let sum = 0;
    for (let i = 0; i < numbers.length; i++) {
        sum += numbers[i];
    }
    return sum;
}

const result = sumOf([1, 2, 3, 4, 5]);
console.log(result);
//15

 

⭐ 반복문 퀴즈
숫자로 이루어진 배열이 주어졌을 때, 해당 숫자 배열안에 들어있는 숫자 중 3보다 큰 숫자로만 이루어진 배열을 새로 만들어서 반환해보세요.

function biggerThanThree(numbers) {
    let result = [];
    for (let i = 0; i < numbers.length; i++) {
        if (numbers[i] > 3) {
            result.push(numbers[i]);
        }
    }
    return result;
}

const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(biggerThanThree(numbers)); // [4, 5, 6, 7]


https://learnjs.vlpt.us/basics/08-loop.html

 

 

https://github.com/luckyjek/TIL_/blob/main/basic-js/conditional-statements/loop.js

GitHub - luckyjek/TIL_: Today I learned / 오늘의 학습 기록소

 

 

 

13 함수(function)

• () => {}  arrow function(es6)
  함수를 만들어서 변수에 넣어준 형태가 되고, 선언적 방식으로는 쓸 수 없다. 
  즉, 항상 익명함수이다.

//arrow함수를 만들어 이름이 hello1인 변수에 할당
const hello1 = () => {
    console.log("hello1");
};
//함수의 매개변수
//함수를 호출할 때 값을 지정

//매개변수가 하나일 때, 괄호 생략 가능

const hello2 = (name) => {
    console.log("hello2", name);
};

const hello3 = (name, age) => {
    console.log("hello3", name, age);
};

//함수의 리턴
//함수를 실행하면 얻어지는 값
const hello4 = (name) => {
    return `hello4 ${name}`;
};

const hello5 = (name) => `hello5 ${name}`;

• new 함수();
  생성자 함수 
  

  //생성자 함수를 이용하여 새로운 객체를 만들어 내는 방법
  function Person(name, age) {
      console.log(this);
      this.name = name;
      this.age = age;
  }
  
  const p = new Person("Mark", 37);
  console.log(p, p.name, p.age);
  
  const a = new Person("Anna", 26);
  
  console.log(a, a.name, a.age);​

이렇게 객체를 만들 수 있는 이유는 Person이라고하는 function 이 속안에서 this라고 하는 컨텐스트를 만들기 때문인데,

이 this가 하는 역할이 객체가 만들어졌을때 그 객체를 가르키는 용도로 사용되기 때문이다.

 

그러므로 같은 함수지만, arrow function에서는 함수안에 this가 생기지 않기 때문에  

arrow function으로는 어떤 새로운 객체를 만들어내는 생성자 함수로 사용 할 수가 없다.

const Cat = (name, age) => {
    console.log(this);
    this.name = name;
    this.age = age;
};

const c = new Cat("냥이", 1);

 

결과를 보면, arrow function으로 만든 Cat이라고 하는 함수는 new라고 하는 키워드를 사용하면  Cat is not a constructor라고 error가 뜨는데, 이 이유가 Cat이라고 하는것은 안에 this를 가지고 있지 않기때문에 객체를 만드려면, this가 있어서 this가 값이나 함수를 property로 넣어줄수가 있어야되는데 없다. 

따라서 생성자함수로 사용되는 함수는 모두 function키워드를 사용한 함수이다.

 

 

함수 안에서 함수를 만들어 리턴(완전 신기...)

이렇게 함수를 만들어내는 함수를 사용하면 장점이있는데,
연이어 plus7이라는 함수도 만들어 낼 수 있다는것이다.

 

 

• 함수는 객체이기 때문에, 함수를 호출할 때, 인자로 함수를 사용
  

  

  10번째줄 hello함수가 실행되면, 
  1) console.log("hello");가 실행
  2) hello( function( ... ) ) <-인자 익명함수가 실행된다.

 

 

14 객체=개체(object)

함수 혹은 클래스로 '틀'을 만드는 것이다. 그리고 그 '틀'로부터 Object(객체, 개체, object)를

하나씩하나씩 찍어내게된다. 
즉, 개발자가 자유롭게 틀을 만들어 그 틀로부터 개체를 만들어내서 사용하게되며, 이 개체를 인스턴스라고 불리운다.

 

생성하는 방법은 되게 다양한데,

• 함수를 이용하여 만드는 방법( 생성자 함수로 객체 만들기 )
  function 특( ) { } => new 틀 ( )  

여기서 또, 마지막 19줄 console.log(B( )); 을 보게되면,B에 인자를 넣지 않았기 때문에  name, age 가 undefined, undefined가 찍힌 후, console.log(B());를 출력하므로  console.log에 나와야하는 return값이 없기때문에 undefined라고 찍히는 것이다.

1. 객체에 속성 추가하기 (property)
   객체에 속성을 추가한다는 의미는 { } 중괄호로 객체가 만들어지는데 그 안에 사용할 데이터 혹은 함수같은 것들을 그 안에 넣을 수 있다는 것이다. 그렇게 넣어져있는 하나하나의 이름을  property라고 하고, 그 property가 특정 값들을 가지고 있는 것이다.
   

   

new Object( ) - object로 객체 만들기
>기초가 되는 객체
>별로 권장되는 방법은아니다.

 

⭐⭐⭐⭐⭐프로토타입 체인

>자바스크립트는 프로토타입(.prototype)으로 모든 객체를 연결해서 표현할 수 있다. 
이것을 바로 프로토타입 체인이라고한다. <함께보면 좋은 블로거 글>

 

정리 :

• (35번째줄,36번째줄)p라고하는 객체는 Person이라는 생성자함수로부터 나왔는데, 그 Person이라고한는것은 Object로 부터 prototype체인을 받아온 후에 내가 설정한 (11번째줄)hello함수 그리고 그런 (3~7번째줄)property를 가지고있는 형태가 되는것이다.
• 자바스크립트에서 프로토타입이라는 개념은 가장 중요한 개념중 하나인데, 보통은 class라는 키워드를 이용해서
  객체를 확장할 수 있는 형태로 작업을 하고있는데, 자바스크립트는 원래 태생적으로 프로토타입을 이용한 상속 방식을 채택하고, 사용하고있다.
  
  

⭐⭐⭐⭐⭐프로토타입을 이용한 객체 확장

따라서 가장 가까운 곳에 있는것은  Korean이고, 

이것의 prototype을 가지고있는 prototype chain은 Person이 가지고있으며,

Person의 toString 등의 여러가지 Object가 주는 것을 prototype으로 가지고 있는것이다.

이렇게, JS에서 객체는 prototype형식으로 체이닝돼서 확장된 함수들을 뽑아내서 사용 할 수 있는 형태이다.

 

⭐⭐객체 리터럴

>객체를 만들때 마치 0,1,2,3,4,...와 같은 숫자형 값 혹은 true false값으로 그냥 true false라고 썼었던것처럼

a라는 객체를  { }<- 이런식으로 직접 객체로 써서 만든다해서 문자그대로 사용한 값이 객체로 만들어지는 그런 기능을 객체 리터럴을 사용한 객체생성방법이라고 한다.   

마찬가지로 위와같이 단순한 것이 아닌,
b안에 { } <-객체를 만들고,

이 안에 리터럴로 name프로퍼티는 'Mark'라고 하는 값을 가지도록 만들면,

console.log는 찍었을때 {name:'Mark'}라고 나오게된다.

 

여기서 조금 더 살펴보자! 

const dog = {
    name: "멍멍이",
    sound: "멍멍!",
    // say: function say() {
    //     console.log(this.sound);
    // },
    say() {
        console.log(this.sound);
    },
  
    //활살표 함수는 동작안함
    //say: () => {
    //    console.log(this.sound);
    //},
};

1 방식, say: function say() {

2 방식, say() {

이렇게도 다같은 출력이 가능하며, 

 

하지만 12번째줄 화살표함수로 하게될 경우는?

3 방식, say: () => {

undefinde가 뜨게되며, 이는 this가 뭔지 모르는것이다.

이게 왜이러는거냐면, 우리가 function키워드를 만들었을때의 this는 

자기가 속해있는곳을 가르키게되는데,

 

근데 화살표 함수가 되면, 화살표함수에서는 this를 자기가 속해있는 곳으로

연결을 하지 않는다. 때문에 작동하지않는다.

 

그럼 cat이라는걸 추가해서 더 살표보자

const dog = {
    name: "멍멍이",
    sound: "멍멍!",
    say: function say() {
        console.log(this.sound); //function으로만든 함수에서의 this는 자기가 속해있는걱, 바로dog가르킨다.
    },
};

const cat = {
    name: "야옹이",
    sound: "야옹~",
    //15번째줄로인해 say가 등록됨
};

dog.say(); //멍멍!
cat.say = dog.say; //say가 등록되었다. -> 그럼 this는 cat을 가르킨다. 
cat.say(); //야옹~

const catSay = cat.say;
catSay();

15번째줄의 cat.say = dog.say; //say가 등록되었다. -> 그럼 this는 cat을 가르킨다. 

이부분 유의하면서 보고,

 

그런데 만약

19번째줄을 추가했고, catSay를 호출하면 뭐가나올까? 

catSay는 아무곳에도 엮여있지 않다. 따라서 this가 뭔지 모르기때문에 undefinde가되고  error가발생한다.

 

따라서 정리해보자면,

-함수에있는 this는 자기가 속해있는 곳을 가르키게되는것이다.

-이거를 만약 화살표 함수로 사용하게되면, this가 뭔지 모른다.

-그리고 만약 만든 함수를 밖으로 꺼내버리게되면(18번째줄), 꺼내는 순간 this와의 관계가 사라진다. 

 

 

⭐⭐표준 내장 객체

>객체가 이미 Runtime환경에 만들어져 있는 것이다. 

예) Object, new가 들어간  function이라고하는 표준내장객체인 function으로 새로운 객체를 만들수 있는 것 또한 표준 내장 객체이며, 이외에도 여러가지가 많이있다._mdn자료

 

대표적으로 Array를 보자.

25번째 25번째 줄을 보면 바로 24번째 줄의 console.log의 결과값은 

이와같이 undefined 라고 나온 것을 확인할 수 있는데, 이를보고 알수있는것은

Object.prototype.slice는 프로토타입체인상  Object에 있는게 아니라 Objrect를 프로토타입 체인으로 받아온 Array가 

따로 또 구현을 추가한 함수인 것이다.

 

따라서 이런식으로 표준 내장객체를 활용해서  코딩을 하는 일이 굉장히 많기 때문에 

여러가지 표준 내장객체를 공부해놓는것이 좋다.

 

 

https://github.com/luckyjek/TIL_/blob/main/basic-js/conditional-statements/object.js

GitHub - luckyjek/TIL_: Today I learned / 오늘의 학습 기록소

 

 

 

⭐⭐⭐⭐⭐객체 관련 못다한 자료 추가 : 

객체 - 비구조화 할당

만약 아래왜 같은 코드가 있다.

const ironMan = {
    name: "토니 스타크",
    actor: "로버트 다우니 주니어",
    alias: "아이언맨",
};

const captainAmerica = {
    name: "스티븐 로저스",
    actor: "크리스 에반스",
    alias: "캡틴 아메리카",
};

function print(hero) {
    const text = `${hero.alias}(${hero.name})역할을 맡은 배우는 ${hero.actor}입니다.`;
    console.log(text);
}

print(captainAmerica);
print(ironMan);

 

이때 print( )함수를 집중해서 보면,

 

  const text = `${hero.alias}(${hero.name})역할을 맡은 배우는 ${hero.actor}입니다.`;

hero안에있는 값을 조회하기 위해서 

hero.alias, hero.name, hero.actor이런식으로 계속 hero . 이라며 사용하고 있는데,

es6에있는 비구조화 할당 이라는 문법을 사용하게된다면 좀 더 편하게 사용할 수 있다.

 

비구조화할당이라는 문법의 또 다른이름은 객체 구조분해 라고도 불리기도한다.

 

그럼 어떻게 사용하는지 알아보자!

이 문법의 역할은 객체(hero)에서 특정값(alias, name, actor)들을 추출해내는것이다.

function print(hero) {
    const { alias, name, actor } = hero; //어디에서 어떤값을 추출하고싶은지 정의를 해준다.
    //내가 뺴주고 싶은 값을 쉼표로 구분해서 적어준다.
    //그러면 hero라고 되어있는것을 다 지워줘도된다.
    const text = `${alias}(${name})역할을 맡은 배우는 ${actor}입니다.`;
    console.log(text);
}

 

이런식으로 말이다.

 

그래서 객체비구조화 or 객체구조분해 문법에 대해서 설명을 다시 정리해보면,

hero라는 객체가 있는데, 거기서 값을 매 번 조회할 때마다  hero.alias, hero.name, hero.actor 이런식으로 해야됐었는데,

그 객체(hero)내부에서 그 안에있는 값들을 밖으로 빼온것이다.

빼와서,  alias, name, actor 이름으로 선언해준것이다. 

 

그리고 더 나아가서, 파라미터를 사용하는 단계에서도 비구조화할당을 해줄 수 있다.

어떻게하면될까?

function print({ alias, name, actor }) { //파라미터에 직접 대입
   //const { alias, name, actor } = hero; 지운다
    const text = `${alias}(${name})역할을 맡은 배우는 ${actor}입니다.`;
    console.log(text);
}

크... 처음보다 훨씬 코드가 깔끔해진 것을 확인 할 수있다.

따라서 이런 비구조화할당은 잘 사용하면 너무나도 유용한 문법이다.

어떤 역할이냐면, 특정 값들을 객체로부터 빼온다!라고 알아두면 좋을 것같다.

 

근데 굳이 function print함수내부에서 사용하는 것처럼 사용할 필요는없다.

const { name } = ironMan;
console.log(name); //토니 스타크

 이런식으로 비구조화할당을 할 수있다. ( 잘 알아두기! ) 

 

 

 

⭐⭐⭐⭐⭐배열(Array) 관련 못다한 자료 추가

객체는 한 변수 혹은 상수안에 여러가지 정보를 담기위함이었다면,

배열은 여러개의 항목들이 들어있는 list와 같다.

이때, 자바스크립트안에서의 배열은 배열 안에있는 모든 원소들이 똑같은 형태일 필요는 없다.

즉, [ 1번재는 숫자, 2번째는 객체, 3번째는 문자열 ] 이런식으로 되도 상관 없다는 소리다.

 

우리가 많이 쓰는 괄호 는 이름이 쫌많이 헷갈리는데,

(//소괄호 --입술모양
    {//중괄호 --콧수염
        [ //대괄호--스테이플러 

        ]
    }
)

이런 괄호들이 있으며, 

 

배열을 사용시에는 스테이플러 모양을 가진  [ ] 대괄호 를 사용하며, 안에 넣고싶은 원소들을 넣는다.

 

이제 배열의 크기(배열안에 몇개가 있는지를 조회)를 알아내는 방법을 알아보자.

const objects = [{ name: "멍멍이" }, { name: "야옹이" }];

console.log(objects.length); //2

objects.push({
    name: "멍뭉이",
});
console.log(objects.length); // 3

이와같이 length를 사용한다.

 

정리하자면, 배열은 아래와 같이 여러가지 종류를 나열해서 넣을 수 있는 값이다.

const array = [
    1, true, {a:1}, [1,2,3,4]
]

만약 몇 번째 아이템을 조회하고 싶다! 라고하면,

console.log(array[0]); ...

와 같이 조회하며 되고,

뭔가 array 배열안에 더 추가하고 싶다면? 

push를 사용해서 

array.push(6);

console.log(array) //[ 1, true, { a: 1 }, [ 1, 2, 3, 4 ], 6 ]

이라고 하면 맨 끝에 6이 들어간 것을 확인 할 수있다.

 

⭐⭐더 심화된 배열은 [개인]티끌모아태산에서 확인하기  

 

---

 

참고자료 : 

패스트캠퍼스

https://learnjs.vlpt.us/basics/