타입변환, {}의중의적표현,this

1. 암묵적 타입변환 : JS가 알아서 타입을 변환

"1" + 23; // '123' -> 문자가 맨 앞에 나와서 2,3도 문자로 바꿔버린다.
2 + 1 + "2"; // '32' -> 1+2는 계산이되지만 2라는 문자가 있어서 결국 문자 32가 된다.
123 + ""; //문자열 123으로 바꿔준다.

1 + true; // 2 -> boolean값을 true를 1로 바꿔주었다.
1 + false; // 1 -> boolean값을 false를 0로 바꿔주었다.

1 + null; // 1 -> > null을 0로 바꿔주었다.

1 + undefined; // NaN -> undefined는 숫자로 바꿀 수 없다.

2. 명시적 타입변환

// 1. String 생성자 함수. 값을 문자열로 바꿔주는 함수.
String(1); // "1"
String(NaN); // "NaN"
String(Infinity); // "Infinity"

String(true); // "true"
String(false); // "false"

// 2. Object.prototype.toString 메서드
(1).toString(); // "1"
NaN.toString(); // "NaN";
Infinity.toString(); // "Infinity"

true.toString(); // "true"
false.toString(); // "false"

// 3. 문자열 연결 연산자
1 + ""; // "1"

//-----숫자 타입으로 변환

// 1. Number 생성자 함수
Number("0"); // 0
Number("-1"); // -1
Number("10.53"); // 10.53

Number(true); // 1
Number(false); // 0

// 2. parseInt, parseFloat
parseInt("0"); // 0
parseInt("-1"); // -1
parseInt("10.53"); // 10
parseFloat("10.53"); // 10.53

// 3. 산술 연산자
+"0"; // 0
"100" * 1; // 100

// 4. Boolean 생성자 함수
Boolean("x"); // true / 문자값이 있으면 true
Boolean(""); // false / 비어있는 값은 false
Boolean("false"); // true

Boolean(0); // false
Boolean(1); // true
Boolean(NaN); // false
Boolean(Infinity); // true

Boolean(null); // false

Boolean(undefined); // false

Boolean({}); // true
Boolean([]); // true

// 2. !부정 연산자 이용
!!"x"; // true ( !(!'x') === !(false) -> true ) //부정이 두번이니까 true

 

3. {}의 중의적 표현

{}은 코드블록일수도 있고 객체리터럴일수도 있음. 

{}이 단독으로 존재하면 블록스코프로 해석한다. 

{}이 값으로 평가되어야할 문맥에서 피연산자로 사용될 경우 {}을 객체리터럴 객체로 해석함.

 

4. String문자열은 유사객체이다 

배열처럼 index값으로 찾을수도 있고 length로 길이도 알수있다. 

let str = "박연미";
console.log(str[0], str.length); // 박 3

 하지만 배열이 아니기때문에 배열방식으로 수정은 불가능하다! 

let str = "박연미";
str[0] = "김";
console.log(str); // 박연미

 

5. key-value로 이뤄진 객체의 경우 키값이 String으로 선언이 되어있으면 괄호으로는 값을 가져올 수 있지만 점 형태로는 값을 못가져온다. 

let jenny = {
  firstname: "je",
  "lastname": "nny",
};
console.log(jenny["firstname"]);
console.log(jenny.firstname);

console.log(jenny["lastname"]);
console.log(jenny.lastname); //못가져옴

6. Object에 있는 key값은 숫자더라도 자동으로 문자로 형변환된다. 

let object = {
  0: 1,
  1: 2,
  2: 3,
};

console.log(object);

7. 똑같은 Key값으로 선언되면 나중에 선언된 값이 Key에 들어간다. 

let cat = {
  name: "나비",
  name: "냐옹이",
};
console.log(cat);

8. 객체안에 함수가 Key, value값으로 들어간 것을 메서드라고 부른다. 

let person = {
  // 프로퍼티
  name: "박연미",

  // 메서드
  sayHello: function () {
    console.log(` 안녕하세요 ${this.name} 입니다 `);
  },
};
console.log(person);

이 메서드를 실행하려면?

person.sayHello();

ES6은 sayHello : function() 대신 바로 sayHello()로 선언한다. 

//ES6
person = {
  // 프로퍼티
  name: "박연미",

  // 메서드
  sayHello() {
    console.log(` 안녕하세요 ${this.name} 입니다 `);
  },
};

console.log(person);
person.sayHello();

9. 그렇다면 언제 .으로 값을 가져오고 언제 []로 가져오나?

.은 정적으로 값을 가져올때.

[]은 동적으로 값을 가져올때.

 

아래는 동적으로 값을 가져오는 예이다. 

ES5버전

let prefix = "product";
let i = 0;

let proList = {};
for (let i = 0; i < 5; i++) {
  proList[prefix + "-" + (i + 1)] = i + 1;
}

console.log(proList);

ES6버전

// ES6
i = 0;
let prefix = "product";

proList = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
};

console.log(proList);

 

10. key랑 value랑 값이 같을 때 ES6가 어떻게 개선됐는지 봐라. 

// ES5
const x = 1,
  y = 2;

const obj = {
  x: x,
  y: y,
};
console.log(obj);

// ES6

const newObj = { x, y };

console.log(newObj);

11. 함수를 통해 key값을 인자로 받아 value를 뽑고싶은 경우 무조건 []를 써야한다. 

아래 조건에서는 key에 name을 넣었으니 20이 나와야하는데 말그대로 key가 인식되어서 308이 나와버린다. 

따라서 []으로 안에 값을 가져와야 한다.

let cat = {
  name: "나비",
  age: 20,
  key: 308,
};
function getValue(obj, key) {
  return obj.key;
}
console.log(getValue(cat, "name"));

수정된것

let cat = {
  name: "나비",
  age: 20,
  key: 308,
};
function getValue(obj, key) {
  return obj[key];
}
console.log(getValue(cat, "name"));

결과 : 나비

 

12. this란? 자신을 포함한 객체에 대한 주소값. 

const person = {
  name: "박연미",

  sayHello() {
    console.log("---------hello ------");
    console.log(this);
  },
};

person.sayHello();

this를 출력한 결과는 person객체 자체가 나온다. 

const person = {
  name: "박연미",

  sayHello() {
    console.log("---------hello ------");
    console.log(this);
    console.log(`this 값은 : ${this}`);
    console.log(` 안녕하세요 ${this.name} 입니다 `);
  },
};

person.sayHello();

결과는 

 

13. 객체 안에 만들어진 함수의 this는 그 만들어진 함수의 주소값. 

this.name은 객체 안에 선언된 name이 나온다. this는 person객체 그자체를 의미한다 

const person = {
  name: "박연미",

  sayHello() {
    console.log("---------hello ------");
    console.log(this);
    console.log(`this 값은 : ${this}`);
    console.log(` 안녕하세요 ${this.name} 입니다 `);
  },
};
person.sayHello();

14. 위와 같이 this가 객체에서 쓰이면 객체 그자체를 의미하지만 그냥 함수에서 this는 글로벌이다. 

function sayHello() {
  console.log("---------hi ------");
  console.log(`this 값은 : ${this}`);
  console.log(` 안녕하세요 ${this.name} 입니다 `);
}
sayHello();