[새싹x코딩온] JavaScript 기초

아래 3가지 주제를 정리해보자.

 

• 자료형
  • 객체 접근법 2가지
  • typeof
  • 명시적 형변환 Number, String (feat. prompt)
• 변수 선언(var/ let /const) 및 재선언과 재할당의 차이점
• 함수 표현하는 3가지 방법 + 차이점!!!!!!!⭐️⭐️⭐️

 

1. 자료형

#객체 접근법 2가지

let cat = {
  name: '나비',
  age: 1,
  gender: 'f',
  isCute: true,
};

console.log(cat.name);
console.log(cat.isCute);
cat.like = ['tuna', '쥐'];

// 접근방법2-대괄호 접근법!
console.log(cat['name']);
cat['parent'] = '초롱이';
console.log(cat);

 

객체 타입에서 접근법 2가지 있는 거 잊지 말자. 계속  `cat.name` 이렇게만 써서, `cat['name']` 이게 낯설게 느껴졌다.

 

 

객체에 기존에 하던대로 `cat.like = ['tuna', '쥐'];`  이렇게 추가할 수도 있지만, 대괄호 접근법으로 `cat['parent']='초롱이';` 와 같이 새로운 키값의 이름을 대괄호 안에 넣고, 값을 적어 추가할 수 있다.

 

#typeof

console.log(typeof {}); //object
console.log(typeof [true]); //object
console.log(typeof null); //object

 

첫 줄에 나온 것처럼 비어있는 객체도 타입은 객체이다. typeof를 배열, null에 사용하면 Object 결과값이 나온다.

 

#명시적 형변환

prompt로 입력 받은 값은 '문자'로 저장된다는 사실 몰랐다 😱 (JS의 자동 형변환) 

자동 형변환에 의존하지 말고, 직접 형 변환을 시켜보자. `Number()` 사용해서 prompt로 입력받은 값을 강제로 숫자로 바꿔주기.

 

 

2. 변수 선언 (var/ let/ const) & 재선언과 재할당의 차이

"var 쓰지마!!!" 라는 말과 "엄격한 const" 이거 2개만 기억하고 있어서 수업을 열심히 들었다.

 

변수를 선언하는 방법은 var, let, const가 있는데 차이점을 알기 전에 먼저 재선언과 재할당이 다르다는 것을 알아야 한다. 

// 재선언
var a =1;
var a =2;

//재할당
var a=1;
a=2;

 

var가 위험한 이유는 재선언을 해도 오류가 발생하지 않기 때문이다. 그러니 취업해서 발견하다면 리팩토링으로 다 없애버리자.

 

다음으로 let은 이미 선언한 값에 재할당은 가능하지만, 재선언은 불가능하다. 아래와 같이 쓴다면 에러가 뜨는 것을 확인할 수 있다.

let lucnh = '주먹밥🍙';
let lunch = '카레🍛'; //err!!

let lunch = '주먹밥🍙';
lunch = '카레🍛'; // 가능, 변수의 값이 '카레🍛'로 바뀜

 

가장 엄격한 선언은 const로 재선언과 재할당 모두 불가능하다.

const dinner = '김밥🍙';
dinner = '불고기🍖'; // 오류 발생! TypeError: Assignment to constant variable.

 

 

3. 함수를 표현하는 3가지 방법

함수 선언문, 함수 표현식, 화살표 함수 3가지 방법이 있다는 건 알고 있었는데 차이점은 모르고 그냥 마음대로 쓰고 있었다...! 

//1. 함수 선언문

sayHello(); // 가능
function sayHello() {
    console.log("Hello!");
}

//2. 함수 표현식
sayHello(); // 오류 발생! ReferenceError: Cannot access 'sayHello' before initialization
const sayHello = function() {
    console.log("Hello!");
};

//3. 화살표 함수
const sayHello = () => {
    console.log("Hello!");
};

 

 

먼저 어디서든 호출 가능해서 가장 친숙한(?) 함수선언문이 있다. 즉, 함수 선언 전에 호출해도 함수 사용이 가능하다. (호이스팅) 코드 구조 상 함수가 여러 곳에서 호출되거나, 가독성을 높이고 싶을 때 사용한다.

 

다음으로 선언되기 전에 호출할 수 없는(호이스팅 불가) 함수 표현식이 있다. 즉, 함수 표현식에 도달해야 함수가 생성된다. callback 함수 등 다 쓰임새가 있으니 함수 표현식도 자유롭게 쓸 줄 알아야 한다.

 

마지막으로 화살표 함수는 함수 표현식과 동일하게 선언 이후에만 사용 가능하다. function 키워드를 안 써도 돼서 매우 간결함.

 

출처 : chatGPT