JavaScript 1주차

Dongkyu·2025년 6월 16일
JavaScript

JavaScript

목록 보기
2/5

목차

세미콜론

문장 끝엔 항상 세미콜론을 추가해야해!!

세미콜론을 붙이는건 꼭 필요로한 방식은 아니다. 오히려 세미콜론을 붙일 경우 더 많은 상황을 고려해야 하는 경우가 존재한다.

세미콜론을 붙이는것은 선택사항

ASI : Automatic Semicolon Insertion

ASI 작동 조건

  • 문장이 종료되었다고 판단하는 경우
  • return , throw , break , continue 등 키워드 다음 줄바꿈된 경우?(문제 발생 가능)
  • 블록(})이 끝났을 경우

세미콜론이 필요한 이유?

  • 세미콜론이 꼭 필요하고 사용해야하는 것은 아니다. 오히려 세미콜론을 사용하지 않았을 때에 코드를 읽고 쓰기 더 수월한 경우가 있다.


변수와 상수

자바스크립트에는 변수를 선언할 때 사용되는 두가지 키워드가 존재한다.

  • 변수 : 변할수 있는 변수를 선언할 때 사용되는 let
  • 상수 : 한번 정의된 상수는 새로운 값을 얻지 못한다. const

변수

변수는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다.

  • JavaScript에서는 let키워드를 사용해 변수를 생성한다.
  • 이 변수에 =를 사용해 변수 내부에 데이터(값)을 할당할 수 있다.
let person; //message라는 변수를 선언 -> 값은 undefied
person = 'elise'; // 문자열을 저장 
console.log(person); // 'elise' 출력

person = 'mio';
console.log(person); // 'mio' 출력

주의사항 : 변수를 두번 선언을 하면 에러가 발생한다.

변수 규칙

자바스크립트의 변수는 두가지 제약사항을 가진다.

  1. 변수를 선언할 때에 사용되는 데이터는 문자, 숫자, $, _만 사용할 수 있다.

  2. 변수에 첫 글자로 숫자가 들어갈 수 없다. 때문에 보통 변수를 선언 할 때에 Camel Case방식을 사용한다.

    • Camel Case방식은 변수의 이름으로 사용되는 단어가 두개 이상일 경우에 첫 단어는 소문자로 사용하고, 두번째 단어부터 공백 없이 첫글자를 대문자로 작성하는 방식이다.

  3. 대문자와 소문자를 구별한다.

  4. 예약어를 변수명으로 사용할 수 없다.

상수

변수와 같은 역할을 하지만, 상수에 한번 저장된 값은 변할 수 없다.

  • 상수를 선언 할 때에는 const를 사용한다.
const myName = 'KimDongKyu';

myName = "DongKyu Kim" // error, can't reassign the constant!

개발을 할 때에 변수에 저장될 값이 동적인지 정적인지에 따라 const와 let을 잘 구별하여 사용해야 한다.

대문자 상수

변수에 기억하기 어려운 값을 저장할경우 이름을 대문자로 지정하는 것은 과거부터 널리 사용되는 관습니다.

  • 보통 COLOR데이터에 많이 사용된다.
const COLOR_BLACK = "#000";
const COLOR_WHITE = "#fffff";

대문자 상수의 장점

  • 어려운 데이터값보다 그값의 의미를 지닌 상수값이 이해하기가 훨씬 편하다.
  • 코드를 작성하며 생기는 오타를 줄일 수 있다.
  • 이러한 이유로 코드의 가독성이 좋아진다.


자료형

자바스크립트는 여덟 가지 기본 자료형이 있다. (JavaScript의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간에 문자열일 수 있고, 다른 순간엔 숫자가 될 수도 있다)

종류

  • 문자열 유형(string)
  • 숫자 유형(Number)
  • 불리언 유형(Boolean)
  • Undefined
  • null
  • bigint
  • Symbol

숫자형(number type)

숫자형은 정수 및 부동소수점 숫자를 나타낸다.

let n = 123;
n = 12.345;
  • 숫자형과 관련된 연산에는 곱셈 * , 나눗셈 / , 덧셈, 뺄셈 등이 대표적이다.
  • 일반적인 숫자 외에 infinity , -Infinity , NaN 같은 ‘특수 숫자값’ 이 포함된다.

BigInt

내부 표현 방식 때문에 자바스크립트에선 (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없다.

// 끝에 'n'이 붙으면 BigInt형 자료입니다.
const bigInt = 1234567890123456789012345678901234567890n;
  • BigInt 형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없지 정수를 나타낼 수 있다.
  • BigInt 형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있다.

문자형

자바스크립트에서는 문자열(string)을 따옴표로 묶는다.

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

따옴표는 세가지 방식이 있다.

  1. 큰 따옴표 → "hello"
  2. 작은 따옴표 → 'hello'
  3. 역 따옴표(백틱, backtick) → helo

불린형(Boolean)

불린형은 true 와 false 두가지 값밖에 없는 자료형이다.

let loginState = true;
let showBox = false;
  • 참과 거짓을 통해 연산을 할 수 있는 논리형 타입이라고도 한다.

null 값

null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값을 말한다.

let func = null;
  • 보통 null을 그저 값이 없는 상태라고 알고 있지만, 이는 정확하지 않은 의미이다. 정확히 null 은 어느 reference 변수에 대해 주소값이 없는 것을 표현하기 위한 키워드 값이다.
  • 할당되어있는 메모리에 지정된 값이 없다는 의미로 이해하면 될 듯 하다.

undefined 값

undefined 값도 null값처럼 자신만의 자료형을 형성한다.

let age;
alert(age); // 'undefined'가 출력된다.

또는 직접 undefined를 할당할 수도 있다.

  • 직접 undefined를 할당하는 것을 권장하지 않는다.
  • 알 수 없는상태를 나타낼 때에는 null의 사용을 권장한다.

객체와 심볼

객체 형을 제외한 다른 자료형은 문자열이든 숫자열이든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부른다.

  • 심볼 형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용된다.

typeof 연산자

typeof 연산자 → 인수의 자료형을 반환하는 연산자이다.

  1. 연산자 : typeof x
  2. 함수 : typeof(x)


형 변환

형 변환(type conversion) : 하나의 데이터 타입을 다른 데이터 타입으로 바꾸는 것을 말한다.
자바스크립트는 암묵적 형 변환과 명시적 형 변환 두가지 방법을 제공한다.

  • 암묵적 형 변환(type coercion) : 자바스크립트의 엔진이 자동으로 데이터 타입을 변환하는 경우를 말한다. 예를 들어 문자열과 숫자를 더할 경우 문자로 자동 변환데어 연결된다.

  • 명시적 형 변환 : 개발자가 직접 함수를 사용하여 데이터 타입을 변환하는 경우이다. String(), Number(),Boolean() 함수 등을 이용한다.

문자형 형변환

보통 무언가를 출력할 때 주로 일어난다.

  • String(value)을 사용하면 문자형으로 명시적 변환이 일어난다.
const noClickBtn = true; // Boolean값인 true를 저장했다.
console.log( typeof onClickBtn ) // 'Boolean'

strOnClickBtn = String(onClickBtn)
console.log( typeof strOnclickBtn ) // "string" -> "true"라는 문자열이 됨.

숫자형

수학 관련 연산자 사용시 주로 변환된다.

  • Number(value)를 사용하여 변환 가능하다.
console.log( Number(undefined) ) // NaN
console.log( Number(null) ) // 0
console.log( Number(true) ) // 1
console.log( Number("string") ) // 전달받은 문자열을 그대로 읽는다. 처음과 끝의 공백을 무시하고, 문자열이 비어있으면 0을 오류발생시 NaN을 출력한다.

불린형

논리연산시 발생되는 형변환이다.

  • if문 등으 조건비요시 보통 불린형 참, 거짓으로 판별된다.
// false
Boolean( 0 )
Boolean( null )
Boolean( undefined )
Boolean( NaN )
Boolean( "" )

//true -> false 외의 모든 값은 true이다.
Boolean( "0" )
Boolean( 1 )
Boolean( true )


함수(function)

함수는 프로그램을 구성하는 주요 구성요소(building block)입니다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출 할 수 있다.

함수 선언

function 함수이름(매개변수 = '초깃값') {
  //함수 본문
  return(반환값);
}
  • 함수를 선언 할 때에는 function 이라는 선언키워드를 사용한다.
  • function 뒤에 사용할 함수의 이름을 정의한다.
  • 함수를 정의 할 때에는 () 를 꼭 사용해주어야 한다.

지역 변수

함수 내에서 선언한 변수인 지역 변수(local variable) 는 함수 안에서만 접근할 수 있다.

function showMessage() {
	let message = 'Hello~~'; // 지역 변수
	
	alert(message);
}

showMessage(); //함수 호출 -> Hello~~
alert(message); //전역에는 message라는 변수가 없음! ReferenceError: message is not defined

외부 변수

함수 내부에서 함수 외부의 변수인 외부 변수(전역변수)에 접근할 수 있다.

let name;

function rename(r){
	name = r; //외부변수에 인수를 저장
	alert(name); //재정의된 외부변수 name을 출력
}

rename('동규'); // '동규' 라는 인수를 전달 -> 전역변수 name을 함수 내부에서 변환시킴
  • 외부 변수는 지역 변수가 없는 경우에만 사용할 수 있다.(즉 외부 변수와 동일한 이름의 지역변수가 있다면 함수 내부에서는 지역변수가 우선순위가 되어 사용된다.)
  • 이처럼 name 과 같은 전역에서 사용할 수 있는 변수를 전역변수(global) 라고 부른다.
    • 전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면 모든 함수에서 접근할 수 있다.
    • 변수는 연관된 함수 내에서 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋다.

매개변수

매개변수(parameter) 를 이용하면 임의의 데이터를 함수에 전달 할 수 있다. 매개변수는 인자(parameter)라고 불리기도 한다.

function(age){
  console.log("나이 : " + age);
}
  • age가 매개변수에 해당된다.

즉 함수를 선언할 때에 사용하는 변수를 매개변수, 함수를 호출할 때 사용되는 변수를 인수라고 이해하면 된다.

기본값

함수에서 return이 없을 경우, return만 있을 경우 기본적으로 함수는 undefined를 출력한다.

function greet() {
  console.log("hello");
}

console.log(typeof greet()); // 'undefined'

함수의 선언과 호출

자바스크립트에서 함수 또한 객체형이기에 함수를 선언할 경우 복사가 아닌 참조가 된다.

function hello() {
  console.log("hello~!!");
}

let greet = hello;
greet === hello; // true
  • 때문에 함수를 선언하게 되면 컴퓨터는 함수객체에 메모리를 할당하게 된다. hello는 그 메모리를 그저 가리키는 변수일 뿐이다.

함수를 호출하는 것과 참조하는 것은 엄연히 다른 값이다.

function say() {
  console.log("Hi~!!");
}

console.log(say); //ƒ say() {console.log("Hi~!!");}
console.log(say()); // 'Hi~!!'
alert(say()); // 'undefined'
  • 함수를 담고있는 변수 say를 console.log로 출력을 해보면, say함수 그대로 출력이 된다. 즉 변수say가 가리키는 함수 그 자체를 출력하는 것이다.
  • say()를 console.log()로 출력을 할 경우 내부 코드를 실행한 값 'Hi~!!'가 나오는 것을 볼 수 있다.
  • alert()을 사용하여 say()를 호출시에는 undefined가 출력된다. return이 없기 때문에 기본값 undefined가 기본값으로 출력되는 것이다.

중복 함수

위의 차이로 인해 함수를 중첩했을 경우 함수를 호출하느냐 참조하느냐에 따라 다른 값이 나온다.

function sum(x) {
  return function(y) {
    return x + y;
  }
}
alert(sum(3)); // VM205:2 Uncaught SyntaxError: Function statements require a function name

위의 함수는 고차 함수로, 함수 내부에 또 하나의 함수가 들어가 있는 상태이다. 위의 함수는 어떻게 return값을 얻을 수 있을까?

  • 상위 함수 sum()의 (호출값return)을 다른 변수에 저장하는 것이다.
const first = sum(3);
alert(first(2)); // 5

sum(3)을 입력했을 때 return되는 값은 function(y) x + y이다.

  • 그래서 first라는 상수를 선언하고, function(y) x + y;를 저장한다. 이는 결국 다음과 같다.
const first = function(y) {
  return 3 + y;
}

따라서 상수 first()에 2를 인수로 넣어준다면 값은 5가 나오는것이 당연하다.



객체(Object)

자료형 단원에서 설명하듯 자바스크립트에는 총 7가지의 원시형 타입과, 객체형으로 8가지의 데이터타입을 가지고 있다. 이번에 정리해볼 단원은 객체이다.

  • 객체는 Key-value 쌍으로 데이터를 이루고 있다. 이 쌍들을 {...} 중괄호로 묶어 객체를 나타낸다.
const Object = {
  key1 : "value1", // key - value 한쌍의 데이터타입의 모음이 객체이다.
  key2 : "value2",
  key3 : "value3",
}

객체에 포함될 수 있는 값은 JavaScript의 모든 값에 해당된다. 즉 변수, 숫자값, 문자값, 불린값, 함수, 객체 등등 모든 데이터값이 value에 들어갈 수 있다.

객체 생성

객체 생성방법에는 두가지가 있다.

  • new Object() : 객체 생성자 문법
  • = {...} : 객체 리터럴 문법
    ※ 리터럴(literal)이란 프로그래밍 언어에서, 변수나 상수와 같이 메모리 공간에 저장되는 값 자체를 직접적으로 표현하는 방식을 말한다.

보통 객체를 선언 할 때에는 '객체 리터럴'방식을 사용한다.

주변에서 볼 수 있는 객체
우리 주변에도 많은 것들을 객체로 표현할 수 있다.
예를 들어 TV를 객체로 표현한다면 다음과 같다.

const SamSungTV = {
  chaner : 25, // 채널 수
  volum : 50, // 볼륨 값
  power : false, // 전원 상태 
  volumUp : () => SamSungTV.volum++, // volue 높이기
  volumDown : () => SamSungTV.volum--, // volum 낮추기
  powerOn : () => SamSungTV.power = true, // 전원 키기
  powerOff : () => SamSungTV.power = false, // 전원 끄기
};

객체 프로퍼티

객체의 'key-value' 한쌍의 데이터 값을 모두 프로퍼티라고 한다. 개발자는 이 프로퍼티의 값을 추가, 삭제, 변경을 할 수 있다.

점 표기법

객체의 name.key를 통해 객체의 프로퍼티에 접근이 가능하다.

위 SamSungTV 객체를 예로 설명하자면..

alert(SamSungTV.chaner); // 25 -> 읽기

SanSungTV.power = true
alert(SamSungTV.power) // true -> 변경

SamSungTV.user = "user@google.com"; // 추가

대괄호 표기법

객체의 Key 프로퍼티에 공백이 있는 경우 name.to value의 형태로 접근을 한다면 오류가 생기게 된다. 자바스크립트는 공백을 별개의 데이터로 인식하기 때문이다. 이러한 경우에 대괄호 표기법을 사용하여 프로퍼티에 접근이 가능하다.

let person = {}

person["user name"] = "Hong Gil-dong"

객체의 참조

객체는 값을 변수에 저장할 때 값참조가 이루어진다. 값참조란 객체를 선언하는 순간 컴퓨터에서 일부 메모리를 할당하게 되는데, 변수는 단지 그 할당된 메모리를 가리키는 변수일 뿐이다.

그렇다면 값복사와 무슨 차이점이 있는 것일까?

let age = 25;

let age2 = 25;
alert(age2 === age); // true

위 예시에서 변수age, age2에 각각 동일한 값 25를 저장한 후 서로를 비교했을 때 동치상태를 띄우게 된다. 값을 복사할 경우에는 변수가 저장하고 있는 값만을 비교하게 된다.

하지만 참조일 경우에는 다른 결과가 나오게 된다.

let person = {}
person.age = 25;

let person2 = {}
person2.age = 25;

alert(person === paerson2) // false

같은 값을 가지고 있는 다른 두 객체를 비교했을 때에는 왜 false가 나오는 것일까? 이유는 바로 변수가 객체를 참조하고 있기 때문이다.

참조라는 의미를 사전적 용어로 보자면 "비교하고 대조하여 살펴본다는 의미"를 가지고 있다. 즉 변수에 객체를 담고있는 것이 아닌 참조의 상태로 연결만 되어 있다는 것이다.

객체는 생성되는 순간 메모리의 할당값을 가지게 되고, 이를 절대 변경할 수 없다. 변수는 단지 이 메모리를 가리킬 뿐이다. 그래서 위의 두 객체 person과 person2는 엄연히 다른 메모리에 할당된 다른 객체가 되는 것이다. 단지 각 메모리에 저장된 value값만 같을 뿐인 것이다.

그렇다면 어떻게 복사를 할까?

새로운 변수에 현제 객체를 참조하고 있는 변수를 저장하면 된다.

let person = {
	age : 25,
};

let person2 = person;

alert(person2 === person); //true

// person2의 프로퍼티 value를 변경하면, person의 프로퍼티 value 데이터도 변하게 된다.
person2.age = 10;
alert(person.age); // 10

위 예시에서 보듯 두 객체는 동일한 객체임을 나타내게 된다. 즉 person, person2 모두 같은 메모리에 할당된 객체를 가리키고 있는 셈이다. 그래서 person의 프로퍼티를 변경하거나, person2의 프로퍼티의 값을 변경하더라도 동일하게 적용이 되는 것이다.

출처

모던 JavaScript 튜토리얼
MDN JavaScript

profile
Dongkyu
인생의 모든날을 사랑하고 즐기자
이전 포스트

JavaScript Prototype

다음 포스트

JS 2주차 (Array)

0개의 댓글