끄적끄적 개발기록

안녕하세요 워누입니다🙂

오늘은 누구나 알만한 자바스크립트의 대표적인 버그 2개에 대하여 포스팅해보고자 합니다! 

우선, 우리 모두가 알고있는 보편적인 지식을 짚고 넘어가보도록 하죠😮

1. null

아무것도 없는 빈 값을 의미하며,

예시로 변수 선언 후 초기화하지 않은 상태라고 보시면 됩니다!

✔추가로, 참/거짓 연산 시에 거짓으로 응답되는 데이터입니다😎

2. 세미콜론( ; )

보편적으로 모든 프로그래밍 언어에서 문장의 끝을 알리는 기호에요!

위의 내용은 처음 배울 때 다루는 내용들이지만 자바스크립트에서는 조금 더 신경써서 봐야하는데요,

이제부터 그 이유를 살펴보도록 하죠...!!!!!!

❓ null 데이터 타입이 object...?

위에서 말한 것처럼 null은 아무것도 없다는 의미로 대부분 프로그래밍 언어에서는 데이터 타입을 null로 정의합니다.

간단한 예시를 들어보도록 할게요!

- PHP

<?php
echo gettype(null);
?>

결과는 당연히 NULL 로 출력됩니다.

- Java

public class test {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		
		String a = null;

		System.out.println(a);
		System.out.println(a.getClass().getName());
	}
}

a라는 변수에 null로 초기화했으니 값을 출력할 땐 당연히 null이 나오겠죠?

추가적으로, 자바에서 getClass().getName() 메소드를 활용하여 값의 유형을 가져오려고 하면

아래와 같이 NullPointerException이 발생합니다. 

근데 자바스크립트에서는.......

null을 object(객체)로 인식합니다......ㄷㄷ

(크롬 개발자도구에서 바로 테스트 가능합니다)

이로 인해 아래와 같은 촌극이 벌어지기도 합니다...

이는 자바스크립트 엔진의 버그로 수정을 했어야 했지만 이미 배포가 어느정도 되어 개발이 완료된 다른 사이트에 영향을 줄 수 있어 수정을 하지 않았다고 하네요...🙄

*** 주의 ***

자바에서도 자바스크립트와 유사한 상황이 있어서 NULL==object 타입이다라는 오해가 많습니다.

public class test {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		
		String a = null;
		
		System.out.println(a);
		System.out.println("this is " + a);
		System.out.println(a.getClass().getName());

	}

}

위 소스코드를 실행했을 때 아래와 같은 결과를 얻을 수 있었는데요

자바에서 String을 단순히 문자열 저장하는 변수로 생각해서 NULL은 object 타입이다라고 생각하면 절대 안됩니다!!

String 자료형 자체가 클래스(참조) 타입으로 원시 타입인 int, char, float 등과 다른 형태입니다.

원시 타입은 애초에 null로 초기화가 불가능하고,

오로지 String, Integer 같은 참조 타입으로만 변수를 null로 초기화가 가능합니다.

즉, 자료형이 object 형태였던 것이고 이를 println() 메소드에서 null을 object 형태로 치환해준 것 뿐인거죠..!

(일반적으로 String 자료형을 이용하는 getName(), length(), toUpperCase() 같은 메소드를 적용할 수 없습니다.)

.

반면 PHP는 어떤지 한번 볼까요?

<?php
echo gettype(null);
echo '<br>';
echo 'this is ' . null;
?>

이게 정상이랍니다..!

샛길로 많이 샌 것 같지만 정리하자면 다음과 같습니다!

자바스크립트는 null 자체를 object로 인식하는 버그가 있고
이미 버그가 있는 버전으로 짜여진 프로그램들이 많아 수정이 어려울 것이다..!

❓ 세미콜론 생략으로 인한 버그

자바스크립트 개발자라면 모두가 아시는 것처럼 자바스크립트는 세미콜론 자동 삽입 기능이 있는데요..!

이로 인해 아래와 같은 상황이 발생하기도 합니다!

분명 json_test1() 함수와 json_test2() 함수는 중괄호 위치만 다르고 나머지 내용은 다 똑같습니다만

함수 호출 시 결과는 완전 딴판이죠?

전문적인 용어로 말씀드리면 json_test1() 함수는 K&R 방식으로,

json_test2() 함수는 BSD 방식으로 작성되어 있습니다!

(K&R, BSD 방식에 대한 자세한 내용은 아래 사이트를 참조해주세요✔)

https://namu.wiki/w/%EC%BD%94%EB%94%A9%20%EC%8A%A4%ED%83%80%EC%9D%BC

여튼 두 함수를 호출했으나 다른 결과가 발생한 이유는 return에 있습니다!

json_test2 () 함수가 BSD 방식으로 작성해버리면서 return과 중괄호 { } 사이에 줄바꿈이 발생했는데요,

이때 return에 세미콜론이 자동으로 붙어버리면서 자바스크립트가 'return;'으로 인식해버렸기 때문입니다.

이로 인해 아래 중괄호 { key : value }가 적용되지 않은 것이죠!

자바스크립트에서 'return;'은 'return undefined;'와 같아서

json_test2() 함수의 호출 결과는 undefined가 된 것을 확인하실 수 있겠네요..!

이렇게 오늘은 javascript의 대표적인 버그들에 대해서 포스팅을 해보았는데요, 

포스팅하면서 초기 설계 및 기획의 중요성과 문법 및 오타에 대한 경각심을 다시 한 번 뼈저리게 느끼게 된 것 같아요🥶

오늘 포스팅은 여기서 이만 마무리하도록 하겠습니다 ㅎㅎ

감사합니다😀