AMRD CODING

인강 & 책 스터디 노트/코딩앙마 자바스크립트 중급 강좌

코딩앙마 자바스크립트 중급 강좌 스터디 요약 (1)

thisisamrd 2024. 10. 15.

유튜버 코딩앙마님의 자바스크립트 중급 강좌는 짜임새도나 내용의 퀄리티 측면에서 정말 우수합니다.

아래 유튜브를 시청하고 중요한 내용을 요약해보겠습니다.

(아래 사진을 누르면 유튜브 링크로 이동합니다)

 

 

 

변수

자바스크립트의 변수는 동적이다. 즉, 특정 타입과 연결되지 않으며 모든 타입의 값으로 할당 및 재할당이 가능하다. 변수 생성 과정은 크게 세 단계로 나눌 수 있다: 선언, 초기화, 그리고 할당이다.

자바스크립트에서 변수를 선언하는 방법으로는 let, const, var 세 가지가 있다.

 

  • var는 함수 스코프를 따른다. 즉, var로 선언된 변수는 함수 내에서만 유효하고, 함수 밖에서는 접근할 수 없다.
  • var는 선언과 동시에 초기화가 이루어지며, 할당 전에 호출해도 초기화되어 'undefined' 값을 가진다. 즉, 호이스팅이 발생하여 변수가 코드 상단으로 끌어올려지지만, 선언 전에는 'undefined' 값을 가진다.
  • let과 const는 블록 스코프를 따른다. 즉, 중괄호 {}로 묶인 코드 블록 내에서만 유효하다. let은 재할당이 가능하지만, const는 한 번 값을 할당하면 재할당할 수 없는 상수이다. 둘 다 var와는 달리, 호이스팅이 되지만 선언 이전에 접근하려고 하면 'ReferenceError'가 발생한다. 이 현상을 TDZ(Temporal Dead Zone)라고 부른다.
  • let은 선언, 초기화, 할당이 각각 별도로 이루어진다. 선언은 호이스팅되지만, 실제로 코드가 실행되는 시점에 초기화가 이루어진다.
  • const는 선언과 동시에 초기화와 할당이 이루어지며, 한 번 할당된 값은 변경할 수 없는 불변 변수이다.

 

 

 

생성자 함수

생성자 함수는 자바스크립트에서 객체를 생성하기 위한 특별한 함수로, new 키워드를 사용하여 호출된다. new를 붙여서 실행하는 순간, 특정한 방식으로 객체 생성 알고리즘이 동작한다. 이 방식으로 객체를 만들면, 일일이 객체를 수동으로 생성하는 것보다 훨씬 빠르고 일관성 있게 객체를 생성할 수 있다.
 
new 키워드를 사용하여 생성자 함수를 호출하면, 다음과 같은 과정이 자동으로 이루어진다.
 
  • 먼저 빈 객체가 만들어진다.
  • this가 그 빈 객체에 할당된다.
  • 생성자 함수의 본문이 실행되며, this에 프로퍼티들이 추가된다.
  • 마지막으로 this가 반환되어 객체가 완성된다.
function Person(name, age) {	
  // this = {}
  this.name = name;
  this.age = age;
  // return this;
}

const person1 = new Person('Tom', 30); // Person 생성자 함수 실행
console.log(person1); // { name: 'Tom', age: 30 }
 
 
 
 
 

 

 
 

객체 메소드, 계산된 프로퍼티(컴퓨티드 프로퍼티)

계산된 프로퍼티

대괄호로 key값을 사용했을 때 a 는 계산된 값을 사용한다.

let a = 'age'

const user = {
	name: 'Mike',
    [a]: 30 // age: 30
}

 

 

Object.assign()

Object.assign() 메서드는 하나 이상의 소스 객체의 속성을 타겟 객체로 복사한 후, 타겟 객체를 반환한다. 이때, 복사는 얕은 복사로 이루어진다. 주로 객체 병합이나 객체 속성 복사에 사용된다.

 

자바스크립트에서 객체를 복사할 때 Object.assign()을 사용하는 이유는 객체가 참조 타입이기 때문이다. 객체를 단순히 할당하면, 새로운 변수는 원래 객체의 메모리 주소를 가리키게 되어, 하나의 객체를 두 변수가 공유하게 된다. 이렇게 되면 한 변수에서 객체를 변경하면, 다른 변수에서도 동일한 객체가 변경된 것을 확인할 수 있다.

 

const user = { name: 'Tom', age: 30 };
const cloneUser = user; // 같은 객체를 참조

cloneUser.name = 'John';

console.log(user.name);    // 'John'
console.log(cloneUser.name); // 'John'

 

 

이를 해결할 수 있는 방법이 Object.assign() 이다.

아래 예시에서 Object.assign()을 사용해 user 객체를 복사하면 newUser는 user의 복사본을 갖게 되므로 newUser에서 값을 변경해도 user는 영향을 받지 않는다.

const user = { name: 'Tom', age: 30 };
const newUser = Object.assign({}, user); 

newUser.name = 'John';

console.log(user.name);    // 'Tom'
console.log(newUser.name); // 'John'

 

 

 

 

Object.keys()

Object.keys() 메서드는 객체의 열쇠(키)들만 배열 형태로 반환한다. 주로 객체의 모든 키를 순회하거나 처리할 때 사용된다.

const obj = { a: 1, b: 2, c: 3 };

const keys = Object.keys(obj);

console.log(keys); // ['a', 'b', 'c']

 

 

 

 

Object.values()

Object.values() 메서드는 객체의 값들만 배열로 반환한다. 주로 객체의 값을 추출해 사용하거나 처리할 때 유용하다.

 

const obj = { a: 1, b: 2, c: 3 };

const values = Object.values(obj);

console.log(values); // [1, 2, 3]

 

 

 

Object.entries()

Object.entries() 메서드는 객체의 키-값 쌍을 [키, 값] 형태의 배열로 반환한다. 이 배열은 이중 배열 형태로 반환되어, 각 키-값 쌍이 하나의 배열로 이루어진다.

 

const obj = { a: 1, b: 2, c: 3 };

const entries = Object.entries(obj);

console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]

 

 

 

Object.fromEntries()

Object.fromEntries() 메서드는 Object.entries()와 반대로, 키-값 쌍의 배열을 객체로 변환해준다. 주로 배열 형태로 되어 있는 데이터를 객체로 변환할 때 유용하다.

 

const entries = [['a', 1], ['b', 2], ['c', 3]];

const obj = Object.fromEntries(entries);

console.log(obj); // { a: 1, b: 2, c: 3 }

 

 

 

 

 

 

 

심볼

심볼은 고유하고 충돌하지 않는 객체 속성 키를 생성하기 위한 원시 자료형이다. 이를 통해 객체의 속성을 고유하게 만들 수 있으며, 다른 코드와의 충돌을 피할 수 있다. 심볼은 값이 같아도 고유성이 보장되기 때문에 같은 설명을 가지고 있어도 다른 심볼로 취급된다.

 

// 다른 개발자가 만들어 놓은 객체
const user = {
    name: "Mike",
    age: 30,
};

// 심볼을 생성하여 프로퍼티 추가
const showName = Symbol("show name");
user[showName] = function() {
    console.log(this.name); // 'Mike' 출력
}

// 심볼로 만든 프로퍼티 호출
user[showName](); // 실행 결과: 'Mike'

// 사용자가 접속했을 때 출력되는 메시지
for(let key in user) {
    console.log(`His ${key} is ${user[key]}.`);
}

// 실행결과
// His name is Mike.
// His age is 30.

 

 

Symbol.for()

위 코드에서 심볼 showName으로 추가된 메소드는 for...in 루프에서 열거되지 않는다. 이는 심볼이 열거되지 않는(non-enumerable) 속성이기 때문이다. 하지만 심볼을 직접 호출할 경우(user[showName]())에는 심볼로 추가된 메소드가 실행되어 'Mike'가 출력된다.

 

전역적으로 공유되는 심볼을 생성하고 싶을 때는 Symbol.for()를 사용한다. 이 메소드는 전역 심볼 레지스트리에서 같은 키의 심볼을 검색하고, 없으면 새로 생성한다.

 

const id1 = Symbol.for("id");
const id2 = Symbol.for("id");

console.log(id1 === id2); // true, 두 심볼은 동일한 전역 심볼

 

 

심볼 키 확인

심볼로 정의된 속성은 for...in에서 열거되지 않지만, Object.getOwnPropertySymbols()를 사용하여 객체에 정의된 심볼을 확인할 수 있다.

const symbols = Object.getOwnPropertySymbols(user);
console.log(symbols); // [ Symbol(show name) ]

 

저작자표시 비영리 변경금지

'인강 & 책 스터디 노트 > 코딩앙마 자바스크립트 중급 강좌' 카테고리의 다른 글

코딩앙마 자바스크립트 중급 강좌 스터디 요약 (2)  (0) 2024.10.15

댓글

티스토리툴바