[JavaScript] 자바스크립트 console.log (출력해보기), 변수 타입, Symbol(심볼)

📝 console.log()

출력하는 함수입니다. print와 같다고 생각하시면 됩니다.

console.log(5 * 1 );
console.log(5 * 2 );
console.log(5 * 3 );
console.log(5 * 4 );
console.log(5 * 5 );
console.log(5 * 6 );
console.log(5 * 7 );
console.log(5 * 8 );
console.log(5 * 9 );

// console.log 예제

 

📝Javascript 변수 타입

var number = 5; // 숫자
var string = "고양이"; // 문자
var bool = true; // boolean
var array = []; // 배열
var object = {}; // 객체
var who_am_i; // 변수에 값 지정 안 함

console.log(typeof number ); // number
console.log(typeof string ); // string
console.log(typeof bool ); // boolean
console.log(typeof array ); // object
console.log(typeof object ); // object
console.log(typeof who_am_i ); // undefined

자바스크립트 변수는 동적타입으로 할당된 값에 따라 자동으로 지정됩니다

 

 

📝Symbol

const id1 = Symbol('id');
const id2 = Symbol('id');

console.log(id1 === id2); // false

const id = Symbol('id');
const age = Symbol(20);
const user = {
    name : 'Mike',
    age : 30,
    [id] : 'myid',
    [age] : 20
}

console.log(Object.keys(user));    // [ 'name', 'age' ]
console.log(Object.values(user));  // [ 'Mike', 30 ]
console.log(Object.entries(user)); // [ [ 'name', 'Mike' ], [ 'age', 30 ] ]

심볼의 경우 유일한 식별자로 유일성을 보장하는데 그래서 같은 형태로 만들어도 같지 않습니다. 또한 객체에서 값을 추출할 때 값이 출력이 안 됩니다 아래와 같이 활용이 가능하다는데 솔직히 제대로 안 써봐서 잘 모르겠습니다.

 

const user = {name :"Mike", age: 30, showAge : () => {console.log(this.age)}}
const showName = Symbol("show name");

user[showName] = function () { // user.showName으로 접근시 Symbol객체로 안 들어가니 []로 사용 유의
    console.log(this.name);
}

user[showName]();  // Mike
console.log(user);
// {
//     name: 'Mike',
//     age: 30,
//     showAge: [Function: showAge],
//     [Symbol(show name)]: [Function (anonymous)]
// }


for (let key in user) {
    console.log(`key : ${key}, value : ${user[key]}`);
    // key : name, value : Mike
    // key : age, value : 30
    // key : showAge, value : () => {console.log(this.age)}

}

showAge의 경우 출력이 되지만 Synmbol로 선언한 거는 노출이 안 되는 걸 확인 할 수 있습니다

 

🔗 참고 및 출처

https://www.youtube.com/watch?v=E9uCNn6BaGQ&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=4