다시, 자바스크립트 (1) - 기초

Junho Yun·2023년 3월 16일
0
post-thumbnail

0.1 변수

변수란? : 값을 담기 위한 공간 입니다.

변수 선언 방법

// 옛날 방식 (ES6 이전)
var name = "junho";

// 요즘 방식 (ES6 이후)
let name = "junho";
const name = "junho";

  • var 는 이제 사용을 하지 맙시다. 추후 설명하겠지만, 일단 사용하지 마세요.

  • let 은 재할당이 필요한 경우 사용합니다. 위의 예시에서 name이 "junho" 가 아니라 "hojun"로 바꿀 일이 있다면, let을 사용하시면 됩니다.

  • const 는 바꿀 일이 없을 때 사용합니다. 일단 const로 모두 선언하고 재할당할 때 let으로 바꾸는 것도 하나의 방법입니다. (feat 코딩앙마의 tip)

변수 명명법

변수명은 숫자로 시작할 수 없고, 변수명에는 공백,기호, 마침표 등이 들어갈 수 없습니다. 또한 예약어도 사용할 수 없습니다. 이는 개발을 진행하면서 적응할 내용이라 추가 설명은 없습니다.

다만, 가장 중요한 점은 변수 이름을 선택할 때 변수명만 읽고도 변수를 이해할 수 있도록 작성하는 것이 가장 중요합니다.

0.2 자료형

자바스크립트는 동적 언어 입니다. 즉, 정적 언어와 달리 변수를 정의할 때 자료형을 정의할 필요가 없습니다.

위에서 변수를 선언한 예시를 보았다면 바로 이해할 수 있을 것 입니다. 변수를 선언할 때 해당 변수의 type(자료형)을 정의하지 않습니다. 이를 해결하기 위해 요즘은 강타입언어(typescript)를 사용하는 추세입니다.

자바스크립트는 총 7개의 자료형이 있습니다. 이는 다시 6개의 원시 자료형과 객체로 나눠집니다.

원시 자료형 vs 객체

원시 자료형(primitive)은 객체가 아닌 자료형입니다. 즉 이를 제외하면 모두 객체입니다. 특징으로는 메서드를 갖지 않습니다.

  • 원시 자료형 : string, number, boolean, null, undefined, symbol

객체는 여러 속성의 모음을 저장하는 데 사용합니다. 예시 객체 입니다.

const car = {
  // number 받을 수 있죠.
  wheels : 4,
  // string도 같이 받을 수 있죠.
  color : "red"
  // 함수도 할 수 있어요, 이것이 메서드가 되는 겁니다.
  drive : function() {
  	console.log("부릉 부릉")
  }
}

car.drive()
// 부릉부릉

빈 객체 만들기 : 두 가지 방법 -> 객체 리터럴 추천

const car = new Object();
const car = {};

두 번째 방법을 더 많이 사용합니다. (객체 리터럴)

객체에 접근하기 : 점 표기법 vs 대괄호 표기법

const car = {
  wheels : 4,
  color : "red"
  drive : function() {
  	console.log("부릉 부릉")
  }
}

console.log(car.wheels);
console.log(car['color']);

점표기법이 쉽고 간결하지만 대괄호 표기법을 사용해야할 때도 있습니다.

  • 여러 단어로 이뤄진 속성 ("hi bye"가 key 값으로 있다면 점 표기법이 불가능)
  • 변수에 저장된 키를 통해 객체의 속성에 접근할 때
    (let key = "wheels" 선언 후에 car[key] 로 접근)

객체의 복사

원시자료형은 그냥 복사하면되는데, 객체는 참조 방식이 사용됩니다.
https://velog.io/@yunjunhojj/Deep-Dive-JS-2일차-ch11 나의 글 참고

결국 Object.assign()을 사용하는 방법이 있습니다. 

const car = {
	color: 'red;	
}
const secondCar = Object.assign({},car);
car.wheels = 4;
console.log(car);
// {color: 'red', wheels: 4}
console.log(secondCar);
// {color: 'red'}

추후에 나올 스프레드 문법으로도 복사를 많이 합니다. 편하고 가독성이 좋거등요. 하지만 이는 1 depth의 복사 입니다. 완전한 깊은 복사가 아니라는 것을 참고해주세요.

배열

객체는 key값과 value의 쌍으로 이루어져있지만, 배열은 index값과 value의 쌍으로 이루어져있습니다. 배열의 index는 0부터 시작합니다.

const fruitBasket = ['apple','banana','orange'];
console.log(fruitBasket[0]);
// apple 
console.log(fruitBasket[1]);
// banana

배열의 메서드 (추가와 제거)

push, pop, unshift, shift

  • push : 배열 마지막에 새 값을 추가
  • pop : 배열 마지막 값 하나를 제거
  • unshift : 배열 시작에서 새 값을 추가
  • shift : 배열 시작에서 값 하나를 제거

typeof를 사용하면 자료형을 확인할 수 있습니다.

const str = "hello";
typeof(str);
// "string"

0.3 함수

함수 정의 

function greet(name) {
	console.log("hello" + name);
}
greet("준호");
// hello 준호

첫 괄호 (name)에서 name을 매개변수(parameter)라고 부릅니다. {}안의 코드는 명령문 (statement)라고 부릅니다.

매개변수가 객체일 경우에는 참조형으로 들어가기 때문에 주의해야합니다.

함수를 선언하는 방법은 : 함수 정의 이외에 함수 표현식, 익명 함수, 화살표 함수 등이 있습니다. 화살표 함수가 가장 중요하기 때문에 추후에 따로 정리해볼 것을 추천 

const greeter = (name) => {
	console.log("화살표 함수 예시" + name);
}

0.4 함수 스코프와 this 키워드의 이해

스코프는 자바스크립트에서 꼭 이해해야하는 부분입니다.
this 또한 몰라서는 안될 중요한 개념입니다.

스코프란 무엇인가?

변수의 스코프란 변수에 접근할 수 있는 위치를 말합니다. 크게 두 가지가 있습니다.

  • 전역 스코프 (global scope) : 어디서든 접근할 수 있는 것을 뜻 합니다.
  • 블록 스코프 (block scope) : 블록 내부에서만 접근 할 수 있다는 것 입니다.
    (블록 : 함수, 루프, 중괄호 등으로 구분되는 모든 영역) 
var myInt = 1;

if(myInt === 1){
  let mySecondInt = 2;
  console.log(mySecondInt);
  // 블록 내부니까 2라고 콘솔 찍힘
}
console.log(mySecondInt);
// 블록 외부니까 오류를 뱉어냅니다. not defined

this는 또 뭘까요?

this의 값을 함수가 호출되는 방식에 따라 다릅니다.
여기서 호출되는 방식이라는 것이 중요합니다.

특징1 : 전역 문맥에서 this

(전역에서 접근하면 -> window)

console.log(this);
// window
// window

특징2 : 함수 문맥에서 this.

(this는 함수를 호출한 객체이다.)

function foo() {
	console.log(this);
}

const obj = {
	list : [1,2,3],
  	foo
}
foo();
// window -> why? : window.foo()랑 같기 때문에
// use strict 모드일 경우 -> undefined 출력 
obj.foo();
// obj -> obj의 다른 속성에 접근할 때 유용합니다. 
// 간단하게 생각하면 . 바로 왼쪽에 있는 것을 생각하면 됩니다.

특징3 : 화살표 함수안의 this는 선언될 때 결정됨.

const obj = {
  name: "junho"
  showName{
	setTimeout(()=> {
	    console.log(this.name)
    }, 1000)
  },
}

obj.showName(); // junho
// 상위 스코프 = showName의 스코프, 그것의 this = obj

this가 호출에 따라 바뀌지 않음, this를 외부에서 가져옴
화살표 함수의 this는 상위 실행 스코프 문맥의 this와 같습니다.

특징4 : 이벤트 처리기에서 this 는 event.target이 됩니다.

button.addEventListener('click', function(event){
	console.log(event.target === this)
	// true
})

bind를 사용해서 수동으로 설정하기

const myCar = {
	color: 'red',
  	logColor: function() {
    	console.log(this.color)
    }
}

const unboundGetcColor = myCar.logColor;
console.log(unboundGetcColor());
// undefined -> this는 window가 됩니다. 
const boundGetcColor = unboundGetcColor.bind(myCar);
console.log(boundGetcColor());
// red  -> this를 myCar로 수동 설정 해줬습니다.

추가적인 방법

  • call : 인수의 목록은 받는다.
    -> call(this, maker, color)
  • apply : 하나의 인수 배열을 받는다
    -> apply(this, [maker, color])
profile
Junho Yun
의미 없는 코드는 없다.
이전 포스트

WIL - 취업 준비

다음 포스트

다시, 자바스크립트 (2) - var, let, const

0개의 댓글