자바스크립트 중급강좌 #1- 코딩앙마

변수

기본적으로 자바스크립트의 변수는 '동적'이다. (dynamic variables)

어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당)이 가능.

변수 생성과정은 1. 선언 2. 초기화 3. 할당

 

자바스크립트의 변수는 let, const, var 

 

• var : 1. 선언 + 초기화  2. 할당 ( 할당 전 호출 시 undefined로 초기화되어 있음 )
• let : 1. 선언  2. 초기화  3. 할당 ( 호이스팅되면서 선언이 이루어지지만 실제 코드에 도달해야 초기화 )
• const : 1. 선언 + 초기화 + 할당 ( 불변 )

var는 함수 스코프 ( 함수 내부에서만 지역변수 ), let과 const는 블록 스코프 ( 블록 내부는 모두 지역변수 )

Temporal Dead Zone의 영향을 받는 let과 const는 초기화 또는 할당 전에 사용할 수 없다.

생성자 함수

- 객체 리터럴 ( 객체 하나 만들기 )

let user = {
	name : 'Mike',
    	age : 30,
    }

- 생성자 함수 

function User( name, age ) {
	this.name = name;
    	this.age = age;
        this.sayName = function(){
        	console.log(this.name);
        }
}
let user1 = new User('Mike', 30);
user1.sayName(); //'Mike'

 

객체 메소드 , Computed property

- computed property

let a = 'age'
const user = { name : 'Mike', [a]: 30 // age : 30 }
function makeObj(key, value){
	return { [key] : value }
}
const obj = makeObj("나이", 24); // { 나이: 24 }

 

- 객체에서 사용가능한 methods

• Object.assign( ) : 객체 복제 /병합

//const neUser = user; 이렇게 하면 얕은 복사 ( 하나의 객체를 여러 변수가 접근 ) 
const newUser = Object.assign( {}, user ); //{}안에 있는 초기값에 user가 병합된다.
Object.assign({name:'Tom'}, user); //병합할 때 키가 같으면 덮어쓰기.
const user = { name : 'Mike'}
const info1 = { age : 30,}
const info2 = { gender : 'male'}
Object.assign(user, info1, info2) //user에 info1, info2가 병합

• Object.keys( ) : 키 배열 반환
• Object.values( ) : 값 배열 반환
• Object.entries( ) : 키/값 배열 반환

Object.keys(user); //["name","age","gender"]
Object.values(user); //["Mike", 30. "male"]
Object.entries(user); //["name","Mike"], ["age",30], ["gender","male"]

• Object.fromEntries( ) : 키/값 배열을 객체로 

심볼( symbol )

유일한 식별자를 만든다.

const id = Symbol('id');
const user = { name : 'Mike', [id]: 'myid' }
console.log(user) //{name : "Mike", Symbol(id): "myid"}

배열 구조 분해

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

let [a,b] = [1,2]; //a=1, b=2
[a,b] = [b,a] //swap

let user = {name: 'Mike', age:30}; //객체 구조 분해
let {name: userName, age: userAge} = user; //user.userName: 'Mike', user.userAge: 30

 

나머지 매개변수

- arguments : 함수내에서 이용 가능한 지역 변수

function showName(name){
	console.log(arguments.length); 
    console.log(arguments[0]);
    console.log(arguments[1]);
}
showName('Mike','Tom'); //2 'Mike' 'Tom'

- 나머지 매개변수 : 정해지지 않은 개수의 인수를 배열로 나타낸다

function showName(...names){
	console.log(names);
}
showName(); //[]
showName('Mike','Tom'); //['Mike','Tom']